IntroductionWelcome| 00:04 | Hi! My name is Chris Mattia.
| | 00:06 | Welcome to iBooks Author Essential Training.
| | 00:08 | In this course I'll teach you how to
create a dynamic and engaging iBook that
| | 00:12 | readers can enjoy on an iPad.
| | 00:14 | We'll begin by setting up the structure of
our book and customizing our page layouts.
| | 00:20 | Next, we'll add static contents, such
as text, images, tables, and charts.
| | 00:25 | We'll then enhance our book by
adding interactive widgets, such as image
| | 00:29 | galleries, Keynote presentations, 3D
objects, HTML5 dashboard widgets, and
| | 00:36 | self-assessing review questions.
| | 00:38 | Finally, we'll pre-flight our book and
then publish it to the Apple iBookstore
| | 00:42 | using iTunes Producer.
| | 00:44 | Now, let's get started with
iBooks Author Essential Training.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a Premium member of the
lynda.com online training library or if
| | 00:05 | you're watching the tutorial on a DVD-ROM,
you have access to the exercise files
| | 00:10 | that are used throughout this title.
| | 00:12 | The exercise files are arranged with
one folder for each of the chapters that
| | 00:16 | we'll be covering throughout the title.
| | 00:18 | If you open up a folder, you'll find the
starting and finished files for our Explore
| | 00:22 | California Travel Guide that we'll
be building throughout that chapter.
| | 00:26 | You'll also find all the additional
files that you need to complete all the
| | 00:30 | exercises that we do throughout the chapter.
| | 00:32 | Now, a feature that's brand-new in
Mac OS X Lion is the ability for applications
| | 00:38 | to regularly auto-save directly into
your Time Machine backup, and this is a
| | 00:43 | great feature that Apple has added, but
it can't create an issue inside of some
| | 00:48 | of the exercise files.
| | 00:50 | Let me show you what I'm talking about.
| | 00:52 | Inside of the chapter 05 exercise files,
I'm going to go ahead and open up the
| | 00:57 | EC_05_start file by simply double-clicking it.
| | 01:02 | The file will go ahead and open up properly.
| | 01:04 | I'll go ahead and click on any page,
go ahead and click anywhere inside of the
| | 01:07 | text, and go ahead and type in the spacebar.
| | 01:10 | As soon as I make a change to this
document, a sheet may appear asking if you
| | 01:15 | would like to unlock this file, cancel,
or duplicate, because this file has not
| | 01:20 | been opened in at least the last two weeks.
| | 01:23 | So, you can either choose to simply
unlock the file by clicking the Unlock
| | 01:28 | button or you can prevent this from
happening on all of the exercise files by
| | 01:32 | simply clicking the Cancel button,
close your iBooks Author document, go up to
| | 01:37 | the Apple menu, and go
down to System Preferences.
| | 01:40 | In System Preferences, go over and
find your Time Machine preference and then
| | 01:45 | click on the Options button
for your Time Machine disc.
| | 01:49 | When the Options sheet pulls down,
you want to uncheck the box that says Lock
| | 01:54 | documents 2 weeks after the last edit.
| | 01:57 | With this item unselected while
you're working on the exercise files used
| | 02:01 | throughout this title, uncheck the Lock
Documents button and then click the Save button.
| | 02:06 | By unchecking this option, Time Machine
will no longer warn you about documents
| | 02:12 | that have not been opened
in a recent amount of time.
| | 02:14 | We'll go ahead and close the System Preferences.
| | 02:17 | I'll re-open my EC_05_start document.
| | 02:20 | I'll click inside of any page. And now
when I go ahead and try and make a change
| | 02:25 | to my text, you'll notice that
we don't get that pulldown sheet.
| | 02:28 | So, you can handle this either way:
either by changing the system preference so
| | 02:33 | your system doesn't ask you at any
point or you can just simply choose to
| | 02:36 | unlock each document.
| | 02:38 | Either way will work just
fine throughout the training.
| | 02:41 | I'll go ahead and close this document.
| | 02:44 | In some of the earlier chapters you'll
find additional files included, one for
| | 02:49 | each of the movies as we cover it.
| | 02:50 | Now before you begin any chapter,
be sure to open up that chapter's folder and
| | 02:55 | look and see if there is a
pictures folder included.
| | 02:58 | If you find one, be sure to open up
iPhoto on your computer and then drag that
| | 03:04 | chapter's entire pictures folder and
drop it into iPhoto to import all the
| | 03:10 | pictures that we're going
to be using for that chapter.
| | 03:13 | This way they'll automatically be
available to you inside of iBooks Author when
| | 03:17 | we go to use them in the training.
| | 03:19 | There'll be one more file that's
available online for free to all users, and
| | 03:24 | that's the Explore_California.iBooks file.
| | 03:27 | This is the finished book that we'll be
building throughout the training title.
| | 03:31 | The best way to view this document is
to navigate to this course on the online
| | 03:35 | training library with your iPad and
click on the link and open it up in iBooks.
| | 03:40 | That way, you can browse the finished
version of our book directly in your
| | 03:44 | iBooks application on your iPad.
| | 03:46 | If you don't have access to the
exercise files, you can follow along from
| | 03:50 | scratch or with your own assets.
| | 03:53 | You can always access the Explore
California iBook file for free on the web site.
| | 03:58 | Let's get started.
| | Collapse this transcript |
|
|
1. Getting StartedInstalling iBooks Author| 00:00 | In order to install iBooks Author,
we need to make sure that we're running
| | 00:04 | Mac OS 10.7 or later.
| | 00:06 | To check this, simply go up to the
Apple menu in the upper left-hand corner of
| | 00:10 | your screen and select About This Mac.
| | 00:13 | You'll see the version number right here
in the middle, and you need to make sure
| | 00:16 | that you're running at least version 10.7.
| | 00:18 | Mac OS X Lion is the code name for it.
| | 00:22 | I'm running 10.7.2, so we're good to go.
| | 00:24 | We'll go ahead and close that window.
| | 00:26 | And then down on our Dock,
we should find a copy of the App Store.
| | 00:30 | We'll go ahead and launch the App
Store and we'll search for iBooks Author in
| | 00:34 | the upper right-hand corner.
| | 00:35 | Simply type in "iBooks Author" and hit
Return, and the App Store should come back
| | 00:41 | and show you the iBook Author app.
| | 00:42 | If you want to go ahead and click on
the link, we can see a little bit more
| | 00:47 | information about iBooks Author,
including the current version number.
| | 00:50 | I'm going to be installing version 1.1.
| | 00:52 | This is a free app, so simply click the Free
link, and click the link that says Install App.
| | 00:58 | You may be prompted to type in your
password for your App Store account, so go
| | 01:03 | ahead and type that in and
click the Sign In button.
| | 01:06 | iBooks Author should begin
automatically installing onto your system.
| | 01:11 | Once iBooks Author finishes installing,
we can go ahead and add the icon down to our dock.
| | 01:16 | We can do that by simply clicking
anywhere on our desktop, getting rid of
| | 01:19 | the App Store by closing that window,
and then go up to the Go menu and
| | 01:24 | select Applications.
| | 01:27 | You can then hit the I button on your
keyboard to jump down to any applications
| | 01:30 | that start with the letter I. We find
iBooks Author right there. Then go ahead
| | 01:34 | and click and drag that application
down into our Dock and go ahead and drop it
| | 01:38 | so that it's nice and
convenient for us to be able to access.
| | 01:42 | We can then close our Applications folder.
| | 01:43 | Now, we're ready to get
started using iBooks Author.
| | Collapse this transcript |
| Installing iBooks on an iPad| 00:00 | To use your iPad with iBooks Author,
you'll need to install a copy of
| | 00:04 | iBooks onto your iPad.
| | 00:06 | iBooks is a free application, so all you
need to do is touch on the link on your
| | 00:11 | iPad for App Store, and when the App
Store loads, touch on the Search field in
| | 00:16 | the upper right-hand corner and type in "iBooks."
| | 00:19 | iBooks usually comes up as the
first link within the search results.
| | 00:24 | Simply touch the Install button and
then when prompted, type in your Apple ID
| | 00:28 | password, and touch OK.
| | 00:31 | The iBooks application should then
download and install on your iPad.
| | 00:36 | When iBooks finishes installing,
you can then move the iBooks application onto
| | 00:41 | your iPad's Dock for easy access.
| | 00:44 | To do this, simply touch and hold on
the icon for iBooks and then drag the icon
| | 00:50 | down into your Dock and drop it in place.
| | 00:54 | Then when you're finished, touch your
Home button and your iBooks application is
| | 00:58 | now in your Dock and ready for
you to use throughout the training.
| | 01:02 | Anytime you go to preview your iBooks
document, make sure you have iBooks already
| | 01:07 | opened up on your iPad.
| | Collapse this transcript |
| Creating a new document| 00:00 | When you open up the iBooks Author
application, you're first presented with the
| | 00:04 | Template Chooser, to select from one
of the pre-defined templates that Apple
| | 00:08 | ships with iBooks Author.
| | 00:11 | To select a template, simply double-
click on any of the templates on the screen.
| | 00:16 | This will open up a brand-new document,
and it shows you all of the different
| | 00:21 | configurations that
Apple has pre-defined for us.
| | 00:24 | If we look over on the left-hand column,
we can see a sample of what some of the
| | 00:27 | pages will end up looking like.
| | 00:29 | Simply click on the individual pages to
jump down between the various different views.
| | 00:35 | Oftentimes, depending on your screen
resolution, you may not be able to see all
| | 00:40 | of the document on the main screen.
| | 00:43 | To adjust this, simply go down to the
bottom and click the little dropdown
| | 00:47 | menu where you see 100%, and scroll down to
the bottom until you find the Fit Page link.
| | 00:53 | This will display the
entire page within your screen.
| | 00:57 | Now when you go to the next page,
you can still see all of the layouts there.
| | 01:02 | Another thing to check when you're
evaluating the various different templates
| | 01:05 | is to look and see the various different
styles that ship with that particular template.
| | 01:10 | To look at the styles, you can click the
small gear icon down in the bottom and
| | 01:14 | then select from the Paragraph Style
or Character Style links on the bottom.
| | 01:19 | Here you can see a WYSIWYG, or
What-You-See-Is-What-You-Get, view of what the
| | 01:25 | different styles that are used
throughout this template look like.
| | 01:30 | Let's go ahead and close this
document and look at another template.
| | 01:34 | Simply click the red close ball in
the upper left-hand corner and then click
| | 01:38 | the File menu and you can either
choose New or New from Template Chooser;
| | 01:42 | either one will do the same thing.
| | 01:44 | Next, let's go ahead and
look at the Classic view.
| | 01:46 | I'll double-click on Classic
and that opens up this template.
| | 01:50 | Here you can see there's
a slightly different view.
| | 01:53 | I'll go ahead and adjust my page size
so we can see the entire page again.
| | 01:58 | As we click down through the various
sections and pages, we can see the basic
| | 02:03 | layout differences between
this and the basic template.
| | 02:08 | Again, let's go ahead and click on the
gear and look at the Paragraph styles to
| | 02:12 | see the basic styles of the text
that's used throughout this template.
| | 02:16 | Let's go ahead and close this
document and let's choose File, and this time
| | 02:21 | I'll select New from Template Chooser. And we
can see that it takes us back to the same place.
| | 02:26 | For this training title,
we're going to go ahead and use the
| | 02:29 | Contemporary template.
| | 02:30 | So I'll click one time on it and this
time instead of double-clicking on a
| | 02:33 | Contemporary template, I'll go
ahead and click the Choose button in the
| | 02:37 | lower right-hand corner.
| | 02:38 | This does the exact same
thing as double-clicking.
| | 02:42 | Once more, we'll reset our page view
so that it fits within the page and then
| | 02:47 | we'll go ahead and look at
the various different pages.
| | 02:50 | It's a pretty simple layout, but I like the
starting fonts and the basics of this template,
| | 02:54 | so we're going to go ahead and
use this one for the training.
| | 02:58 | To save the document, simply go up to
the File menu and choose Save. And you can
| | 03:02 | save the document wherever you'd like.
| | 03:04 | I'm going to go ahead and save mine
into my Documents folder and I'm going to
| | 03:08 | call the document EC for
Explore California, EC_01_ start.
| | 03:14 | I'll go ahead and click the Save
button, and now we can see that my document
| | 03:18 | name is appearing up here in the top of
my document and I'm ready to proceed on
| | 03:23 | with the next task.
| | Collapse this transcript |
| Understanding the interface| 00:00 | Now let's have a look at the
iBooks Author user interface.
| | 00:04 | If you've ever used Keynote or
Pages, you're going to feel right at home
| | 00:08 | inside of iBooks Author.
| | 00:09 | It follows a lot of the same general
workflows and principles that both of
| | 00:14 | those applications do.
| | 00:15 | On the left-hand side you have a sidebar
that has an outline of your entire book.
| | 00:21 | Here you can click on individual
pages, such as your book title, the intro
| | 00:25 | media, the table of contents, the glossary,
and all of the individual pages of your book.
| | 00:32 | We already saw on the last movie where
we can change the default view of our
| | 00:37 | book to fit within a page.
| | 00:39 | We can also navigate between pages
using the arrows at the bottom to navigate
| | 00:44 | forward and back within the pages of a
particular chapter. And we saw where we can use the
| | 00:49 | gear icon to preview all of the
individual paragraph styles and chapter styles.
| | 00:54 | At the top of your window
you'll find the main toolbar.
| | 00:57 | Here you're able to add individual
chapters, sections, or pages to your book.
| | 01:04 | Next, you can control the overall view.
| | 01:07 | The default view is for page
thumbnails to be displayed in the sidebar.
| | 01:12 | You can also choose to
view your book as an outline.
| | 01:15 | I like being able to get a preview of
my different pages, so I'll leave my view
| | 01:19 | set to page thumbnails.
| | 01:21 | Next, you can choose a variety of
additional tools to be able to show while
| | 01:25 | you're working in iBooks Author.
| | 01:27 | I really like having the Show
Layout Boundaries tool turned on.
| | 01:31 | This way, every single one of my
objects onscreen--be it text, images, or any
| | 01:37 | other object that I add--there's
bounding boxes that show me where the edges
| | 01:41 | of that object are located. That way I
can control my layouts a little bit better.
| | 01:47 | The next tool here on the
toolbar controls the orientation view.
| | 01:51 | By default, many users are probably going
to be looking at your book in Landscape view.
| | 01:56 | However, since the iPad supports
rotation, it's possible for your users to turn
| | 02:01 | their iPad vertical and have
a portrait view of your book.
| | 02:04 | You can change the views by simply
clicking on the Orientation link.
| | 02:08 | You'll notice that when you do,
that the overall view of your book
| | 02:12 | completely changes.
| | 02:13 | As we're going through building our
documents within iBooks Author, we're going
| | 02:17 | to want to make sure that we're
constantly checking the various different
| | 02:20 | orientations to make sure that our book
looks the way that we think it's going
| | 02:24 | to look in each different view.
| | 02:26 | Next, we have a series of controls
here at the top to add various types of
| | 02:31 | objects to our page.
| | 02:33 | We see the common tools that we've seen
in applications such as Keynote, such as
| | 02:37 | the text box, shapes, tables, and charts.
| | 02:41 | A new one that you may not be
familiar with is called widgets.
| | 02:44 | Widgets allow our users to be able
to interact with media on our pages.
| | 02:49 | The next section of the toolbar allows
us to preview our books directly on our
| | 02:53 | iPad--we'll cover that in the
later movie--and we'll be able to later
| | 02:57 | publish our book directly to the iBookstore.
| | 03:00 | On the far right-hand side of our
toolbar, we have some additional tools that
| | 03:05 | we're going to be using a
lot throughout the training.
| | 03:07 | The first is the Inspector.
| | 03:08 | The Inspector allows us to find all
of the specific properties about any
| | 03:13 | particular object that we
have selected onscreen.
| | 03:15 | Since we're going to be using the
Inspector so often, you may want to remember
| | 03:19 | the keyboard command, which is
Command+Opt+I. By pressing this keyboard command
| | 03:25 | you can turn the Inspector on or off.
| | 03:27 | The next Inspector is the Media Inspector.
| | 03:29 | Here, we can access photos
from inside of our iPhoto Library,
| | 03:33 | we can access movies that have been placed
inside of our user account's Movies folder,
| | 03:39 | and we can also access audio that's
been placed inside of our iTunes Library.
| | 03:43 | We're going to go ahead and leave
the Media Window selected to Photos.
| | 03:48 | Next, is the Colors palette.
| | 03:50 | Here, we have a standard color picker
where we can choose our colors in a variety
| | 03:55 | of different formats that are
standard on the Mac OS operating system.
| | 03:59 | I like leaving the Colors
tool set to the colors wheel.
| | 04:04 | Next, we have the Fonts window where
we can select and control all of the
| | 04:08 | various different parameters about a
particular font that we have displayed onscreen.
| | 04:13 | You can hide any of these windows by
simply clicking the Close button or by
| | 04:17 | toggling the window on or off by
clicking on the selector up in the toolbar.
| | 04:22 | One last interface element,
and that's the formatting bar.
| | 04:25 | The formatting bar allows us to
control additional elements when we have them
| | 04:30 | selected down in our document, so we
don't have to pop up one of the heads-up
| | 04:34 | display to access a variety
of the different parameters.
| | 04:37 | Now that we have a good overview of the
user interface for iBooks Author, let's
| | 04:42 | go ahead and get started building our
document, and we'll start by building
| | 04:46 | the title page.
| | Collapse this transcript |
| Creating a book cover| 00:00 | Let's get started by building our
Explore California Travel Guide book cover.
| | 00:05 | To begin, simply come over to the
sidebar and click on Book Title.
| | 00:09 | The Book Title template will appear and
now we can begin customizing our book.
| | 00:14 | Let's start with the title.
| | 00:15 | To begin editing the title, simply click
on the Book Title, then click again to
| | 00:21 | get your cursor to appear inside of it,
and I will go ahead and select the title.
| | 00:25 | I'm going to type in, using All
caps, "EXPLORE," space, "California."
| | 00:31 | Now, California, I'm only going to capitalize
the C and the rest of it will all be lowercase.
| | 00:35 | Then we'll go ahead and change the font.
| | 00:38 | So let's go ahead and select that
entire line of text again and we'll come up
| | 00:43 | here to our Formatting toolbar, click
the dropdown menu, and I'm going to select
| | 00:47 | Palatino as my font.
| | 00:48 | It looks a little bit better.
| | 00:50 | Now, we'll go ahead and shrink
down the text for just EXPLORE.
| | 00:54 | So I'll just select the text for EXPLORE
and I'll change the font size here to 72.
| | 00:58 | I'll make it a little bit
smaller and clean up a little bit.
| | 01:02 | Now we'll adjust the spacing that we
have between the EXPLORE and California.
| | 01:07 | We'll do that again in the Formatting
palette, using the Choose the line spacing
| | 01:11 | tool, and we'll click the
dropdown menu and change it to 0.6.
| | 01:16 | That'll tighten up those two
lines of text a little bit.
| | 01:19 | Now let's go ahead and add a background image.
| | 01:22 | So to do that, simply come over to the upper
right-hand corner and click on the Media tool.
| | 01:27 | Make sure you're in the
Photos tab and you're in iPhoto.
| | 01:30 | You may need to go to Events and find
the first event, that is, all of the images
| | 01:36 | that we imported for this chapter.
| | 01:37 | Next, go ahead and scroll down until
you find the file cover_image, and just
| | 01:42 | simply click and drag that cover_image file
and drop it into the main part of the book.
| | 01:48 | You can see the image is
automatically set as the background for this file.
| | 01:53 | To edit the image, simply
double-click on it and it becomes selected.
| | 01:57 | We can click and we can drag the image
so that we can get the exact alignment
| | 02:02 | that we're looking for.
| | 02:03 | I want to make sure that I've got the
image so that the right-hand edge of the
| | 02:07 | image is aligning over here on the
right-hand side of my file and I've got the
| | 02:12 | coverage all the way down to the bottom.
| | 02:14 | You may need to make sure that you
change your view so that Fit to Page is
| | 02:18 | selected so you can see all of the file.
| | 02:21 | Now we have a nice
background image for our cover.
| | 02:23 | Let's go ahead and edit some more text here.
| | 02:25 | We'll go ahead and change the Lorem
Ipsum text that's at the top by clicking on
| | 02:30 | it and then selecting it.
| | 02:32 | And now let's call this our 2012 TRAVEL GUIDE.
| | 02:36 | I'm going to do this in all caps as well.
| | 02:39 | Let's make another text change.
| | 02:41 | Instead of the author down here at the
bottom, we'll go ahead and select that,
| | 02:44 | and now we'll type in the web address
for Explore California, which is simply
| | 02:49 | www.explorecalifornia.com.
| | 02:55 | When we click off of that URL we'll
see that the URL highlights and becomes
| | 03:00 | an active web link.
| | 03:01 | On the book cover, we don't
necessarily want this to be an active web link.
| | 03:06 | We'll click to the right of the web
address to select the box and then we'll
| | 03:10 | double-click inside of
the box to select the text.
| | 03:13 | Next, we'll open up our Inspector and
we'll go over here to the right-hand side
| | 03:18 | of the Inspector to the Link Inspector.
| | 03:21 | And with that link selected, we can
uncheck the box for Enable Hyperlink.
| | 03:26 | Now, our EXPLORE California is simply some
text that's appearing inside of our document.
| | 03:32 | Our page is looking a little bit
better, but let's add a few more things.
| | 03:36 | Let's go ahead and close our
Media Browser and let's add in our
| | 03:39 | Explore California logo.
| | 03:41 | You could of course add the logo
from the Media Window, as we did with our
| | 03:44 | background image, but I want to show
you another way of adding an image.
| | 03:48 | I'm going to go ahead and jump over
to my Finder where I already have my
| | 03:51 | chapter 01 exercise files folder opened up,
and I've got it opened up to the pictures folder.
| | 03:57 | Here I've got my logo_final.gif.
| | 04:00 | I'm going to simply drag that logo
icon and I'm going to drop it over here on
| | 04:04 | the right-hand side to the right of my page.
| | 04:06 | I don't want to drop it into the middle
of my page because in it it's going to
| | 04:10 | set that image as a background.
| | 04:11 | I'm going to drop it to the right-hand
side and I'm going to close my window,
| | 04:15 | and you can see I've got a small
selection here, but there's nothing showing up.
| | 04:19 | But if I click and simply drag that selection
now onto my page, my logo shows up onto my cover.
| | 04:25 | I'm going to place my logo here in the
upper right-hand corner and I'm going to
| | 04:30 | grab the lower left-hand corner of it,
and I'm going to drag it up until my logo
| | 04:35 | is about 125 pixels wide,
and then I'm going to release.
| | 04:41 | Next, let's add a little more
interest to our layout here.
| | 04:45 | Let's add a footer element down at the bottom.
| | 04:47 | To do that, we'll come up here to the
Shapes, we'll click the dropdown menu, and
| | 04:51 | we'll simply add a box shape.
| | 04:53 | And I'll go ahead and stretch that box
shape out so it's quite a bit wider than
| | 04:58 | needed, but its height is going
to remain at about 100 pixels.
| | 05:03 | We'll go ahead and take and drag that
box all the way down towards to the bottom
| | 05:07 | so that it snaps right to the bottom of my page.
| | 05:11 | Now in my Inspector I'm going to go
over here to my Graphics Inspector and I'm
| | 05:15 | going to change my fill for
this box to be a color fill.
| | 05:20 | Then we need to choose the color.
| | 05:22 | We'll go ahead and click the color chip
and it's going to automatically open up
| | 05:26 | our Color palette for us.
| | 05:28 | I've got a lot of different colors that
I could choose from, but I think what I
| | 05:31 | want is I want to grab one of these
nice yellow hues out of the image itself.
| | 05:35 | So I'll click on the little
magnifying glass and then come over and I'll
| | 05:40 | hover right over the top until I find
one of these nice golden colors that's
| | 05:42 | right here in the rock.
| | 05:45 | I'll select that, and now so that I can
save that color, I'm going to simply grab
| | 05:49 | the color and I'm going to drag it
down here into my color chips so I can get
| | 05:51 | back to that color at a later time.
| | 05:53 | A solid color is pretty nice, but it
would be nice to have a little bit of transparency to this.
| | 05:59 | So with the box still selected,
we're back here in our Graphics Inspector.
| | 06:03 | I'll go ahead and drag the
Opacity down to about 50%.
| | 06:08 | That's looking much better.
| | 06:09 | But now my text is hidden behind the box.
| | 06:13 | That's not a problem.
| | 06:14 | We'll simply come up here to the
Arrange dropdown menu, and there is an option
| | 06:19 | for send backwards or we could send it
all the way to the back and then move it
| | 06:24 | forward a little bit.
| | 06:26 | So we'll just go ahead and start with
the Send Backward and we'll note the
| | 06:28 | keyboard command of Command+Option+
Shift+B. So if we moved it back once, it
| | 06:34 | didn't quite make it there, so we'll do
Command+Option+Shift+B, and we'll press
| | 06:40 | that a few times until the Explore
California web address just appears over top.
| | 06:46 | Now we can select that web address
and drag it down so that it's centered
| | 06:51 | inside of the yellow bar.
| | 06:54 | That's looking a lot better.
| | 06:56 | Let's go ahead and move our EXPLORE California
title down towards the bottom of our page also.
| | 07:01 | You'll notice as I move the object
around that I'm getting alignment guides that
| | 07:05 | are snapping to show me
when I have text aligned.
| | 07:08 | If I pull my text down too far, you'll see
that it gets hidden behind the yellow box.
| | 07:12 | So you're going to move it up until it's
just displaying properly, and then release.
| | 07:17 | Let's add a little bit more
interest to the EXPLORE in California.
| | 07:22 | So to do that, I'll simply click
inside of the text and select EXPLORE.
| | 07:27 | We'll go ahead and we'll treat
this text with another custom color.
| | 07:31 | Select the word "EXPLORE" and then in
our Inspector click on the Text Inspector
| | 07:38 | and click on the color chip to change the
color of this particular selection of text.
| | 07:44 | Since our Color palette is already
open, again, we're going to use the
| | 07:48 | magnifying glass to select a
color out of our existing image,
| | 07:51 | only this time we're going to
select the golden color out of our
| | 07:55 | Explore California logo.
| | 07:57 | So just hover the magnifying glass
over top of that color and we'll get the
| | 08:01 | color appearing, and once more we'll
drag that color chip down into the bottom
| | 08:06 | so we can reuse that color
anytime we want throughout our book.
| | 08:10 | Let's make one more color change.
| | 08:11 | Let's come up here to the
top where our TRAVEL GUIDE is.
| | 08:15 | We'll go ahead and select the TRAVEL
GUIDE, click and select it. Again, in
| | 08:19 | our Text Inspector click the color chip so
that it's active, click the magnifying glass.
| | 08:25 | Now we'll select one of the nice dark
brown colors out of this moss that's
| | 08:29 | growing on the rock lower down in our image.
| | 08:32 | That's looking much better.
| | 08:33 | Our cover is looking
pretty good now at this point.
| | 08:36 | Let's make one more adjustment.
| | 08:37 | We want to make sure that the top of our 2012
Travel Guide aligns with the top of the image.
| | 08:43 | But as we click and drag that portion
of the image, we see that our alignment
| | 08:47 | guides are not helping us out here.
| | 08:49 | So let's remedy that.
| | 08:50 | If we go up to the iBooks Author menu
at the top and then select Preferences
| | 08:55 | and then click on the Rulers tab, we can
check the box to Show guides at object edges.
| | 09:02 | When we close the Preferences and now move
our TRAVEL GUIDE, we can see that the
| | 09:07 | left-hand side of our TRAVEL GUIDE is
aligning with our text at the bottom,
| | 09:10 | and when we snap to the top it aligns
with the top of our Explore California logo.
| | 09:15 | So now our page has a much cleaner
look to it, all of our elements are
| | 09:20 | aligning with each other, and we're
ready to move on to the next step of
| | 09:24 | building our book.
| | Collapse this transcript |
| Adding an intro video| 00:00 | The next step in building our book is
to add an intro video or image to our
| | 00:04 | books so that when a user opens our
book in iBooks on their iPad they're
| | 00:08 | presented with a small intro piece.
| | 00:11 | To add the intro piece, simply
click in the sidebar on Intro Media.
| | 00:16 | Here, we'll simply drop in a movie.
| | 00:18 | Before we drop in our movie,
let's talk a little bit about how to actually
| | 00:22 | prepare our video in the file
format that it needs to be in.
| | 00:26 | I'm going to go ahead and go over to my
exercise files to the chapter 01 folder,
| | 00:30 | and I've got the EC_Intro.m4v file.
| | 00:34 | Now the video that you add in o the
intro needs to be in the .m4v video format.
| | 00:40 | If you have a video that you need to
get into this format, you can simply open
| | 00:44 | the video up in the QuickTime player
that ships with Mac OS X Lion, go up to the
| | 00:49 | File menu, and choose Export.
| | 00:53 | The default setting for Format
should be iPad, iPhone 4 & Apple TV.
| | 00:59 | Go ahead and select this setting and
simply hit the Export button and your
| | 01:03 | video will be compressed into the correct
format to add directly into iBooks Author.
| | 01:09 | We've already gone ahead and done that,
so I'll go back into iBooks Author and
| | 01:13 | then I'll access my video from my Media window.
| | 01:16 | By simply clicking on Media window,
now I can click on the Movies tab, and
| | 01:21 | because I added that movie into my
Movies folder on my computer, I can now simply
| | 01:27 | drag the EC_Intro video and drop it
directly into the main view of my book.
| | 01:33 | I'll go ahead and close the Media
Window and then click the Play button--
| | 01:36 | (audio playing)
| | 01:42 | --to be able to preview my video.
| | 01:44 | And that's all there is to being able
to add your intro video to your book.
| | Collapse this transcript |
| Creating chapters| 00:00 | The next step in building our Explore
California Travel Guide book is to break
| | 00:06 | up our content into a series of chapters.
| | 00:08 | In our book, we're going to
have nine separate chapters:
| | 00:11 | one for each of the eight major tours
that we have, and then one that's going to
| | 00:16 | be an introduction chapter.
| | 00:18 | To begin, when we created our new
document within our template, we were given
| | 00:22 | chapter 1 already set up for us, but
let's go ahead and customize chapter 1 and
| | 00:27 | then build the other eight chapters.
| | 00:29 | To title our chapter, we simply double-
click on the text that says "Untitled" at
| | 00:33 | the top and type in "Introduction."
| | 00:36 | Next, we can go ahead and enter in some
text that describes what the users are
| | 00:40 | going to find in this chapter.
| | 00:43 | To save us time, I've gone ahead and
typed out a lot of text already for us.
| | 00:48 | I'll go ahead and open up that file.
| | 00:49 | It's in the chapter 01, exercise files
folder, and it's called Chapter Text.txt.
| | 00:55 | All the text that we'll be using
through this movie is located here.
| | 00:58 | So if you need to pause the video
and go ahead and type it in, you can go
| | 01:01 | ahead and do that now.
| | 01:03 | So let's go ahead and select the text
here for the introduction and copy it
| | 01:07 | using Command+C or Ctrl+C on our keyboard.
| | 01:10 | Then we'll go back to iBooks Author,
double-click on the text description,
| | 01:14 | and paste the text using Command+V.
Next, we want to change the placeholder
| | 01:19 | image that was provided to us by the template
to something that's a little more appropriate.
| | 01:25 | We'll go up here to the Media window.
| | 01:27 | We'll go into Photos > Events, and
then double-click on the chapter 01
| | 01:32 | event that we have.
| | 01:34 | We're looking for the image
for the Introduction chapter.
| | 01:37 | Scroll down and you can find it.
| | 01:39 | And we'll simply drag that
image and drop it right here.
| | 01:41 | I'll move the Media window off to the
side so we can still see our whole page.
| | 01:47 | Let's go ahead and add some additional chapters.
| | 01:50 | To add a new chapter, simply go up to
the Add Pages plus button in your toolbar,
| | 01:55 | go down to the chapter
listing, and select chapter.
| | 01:59 | A new chapter is added for us.
| | 02:01 | The next chapter that we're going to
have is called Desert to Sea, and we'll go
| | 02:06 | back over to our text file and get
the text description for that one.
| | 02:10 | Again, copying with Command+C, and
then we'll click back into iBooks Author,
| | 02:14 | double-click on the text, and paste it in.
| | 02:17 | We'll next add in the Desert to Sea
image background, drop that into place.
| | 02:21 | Let's create our next chapter.
| | 02:25 | The next one is going to be
called Taste of California.
| | 02:27 | We'll get our text, copy it with
Command+C, paste with Command+V. We'll drop
| | 02:37 | in the Taste image.
| | 02:38 | We'll add another chapter.
| | 02:42 | This one is called Nature Watch.
| | 02:46 | Go ahead and get that text. There we are.
| | 02:56 | Grab the Nature Watch, drop that image in.
| | 02:59 | Now, when we drop the Nature Watch image
in, we'll notice that the pelican image
| | 03:03 | is showing up so that it's a
little bit too far over to the right.
| | 03:07 | Let's go ahead and make a
slight adjustment to that.
| | 03:09 | If we double-click on the image,
we can bring up the Edit Mask tool.
| | 03:14 | Then we can move our slider to the
right to zoom in just a little bit to expand
| | 03:18 | that out, and then we click again on the image.
We can drag it a little bit over to the right
| | 03:24 | So we can position the image where it
looks a little bit better for our layout.
| | 03:28 | Go ahead and close the Media Browser for
a second so we can make sure that we're
| | 03:33 | seeing the wing and see where
we've got the feathers coming in at.
| | 03:35 | That's looking a lot better.
| | 03:37 | Let's add the next chapter.
| | 03:40 | The next chapter is called Snowboard California.
| | 03:43 | And we'll go ahead and get our text,
and we'll double-click and paste that in.
| | 03:50 | We'll bring back up our Media Browser.
| | 03:53 | Here's our snowboard image.
| | 03:54 | I'll go ahead and drop that in.
| | 03:56 | Now, when we look at the snowboard
image, we see that the snowboarder is
| | 04:00 | oriented so that he's jumping and
he's completely behind the text here, and
| | 04:04 | that's not quite what we'd like to see.
| | 04:06 | It would be better if the
image was flipped horizontally.
| | 04:09 | To do that, we'll simply click
one time on the image to select it.
| | 04:13 | We'll go up to our Inspector.
| | 04:15 | Then we'll go down and select the Metrics tab.
| | 04:18 | At the bottom of the Metrics tab,
there's a Flip horizontal left to right, and
| | 04:23 | we can click that one time
and the snowboarder flips over.
| | 04:26 | We'll go ahead and add another chapter.
| | 04:30 | The next one is Cycle California.
| | 04:32 | And we'll get the text, copy it, and go
back in here, double-click, and paste.
| | 04:42 | Let's get our Media Browser back up.
| | 04:44 | There's our Cycle image.
We'll just drag that and drop that in place.
| | 04:50 | We'll go ahead and add another chapter.
| | 04:53 | The next one is called California Calm.
| | 04:55 | We'll get our text for that, copy it
with Command+C, double-click, and paste,
| | 05:07 | drop in the California Calm image.
| | 05:09 | Let's go ahead and zoom this
image in just a little bit.
| | 05:12 | So again, we'll double-click it,
| | 05:14 | we'll drag our slider to the right just
a little bit, and then we'll click the image
| | 05:18 | and drag it up just a little bit.
| | 05:20 | And we want to make it so that the
candles up here at the top are not quite off
| | 05:24 | the screen and we have a little bit
of the front edge of the shelf showing.
| | 05:30 | Let's go ahead and add another chapter.
| | 05:33 | The next one is Backpack California.
| | 05:35 | So we'll double-click, and we'll go
over to our text, and we'll select the
| | 05:41 | Backpack California text, and copy it.
Double-click and paste, and we'll
| | 05:48 | come back over here.
| | 05:51 | We'll drop in our Backpack chapter image.
| | 05:53 | Let's go ahead and close the Media Browser
for a second so we can get a full view of this.
| | 05:59 | That one looks pretty good.
| | 06:00 | Although this one, the top of the rock
face is going off the page, so let's go
| | 06:04 | ahead and double-click that and pull
the image down just a little bit so we get
| | 06:10 | a little tiny bit of sky peeking
out at the top. That looks better.
| | 06:14 | Let's go ahead and add one more chapter.
| | 06:17 | And the last chapter is called Golden Gate.
| | 06:19 | And we'll get the text for that, copy it,
go back over, double-click, and paste.
| | 06:28 | Let's go ahead and open up our Media.
| | 06:31 | Here's the Golden Gate image.
We'll drop that in place.
| | 06:36 | Now, the Golden Gate image, when we're
looking at this, the bridge itself is
| | 06:41 | going down on an angle like this.
| | 06:44 | I think it would be nice to have
that straightened out a little bit.
| | 06:47 | So let's go ahead and open our
Inspector again. And again, we're on the Metrics
| | 06:51 | tab, and with the image selected,
we can adjust the rotation of the angle, and
| | 06:58 | you can do this by simply clicking and
dragging around a little bit or you can
| | 07:03 | use the up and down
arrows to rotate incrementally.
| | 07:06 | And we'll just use the horizontal
line here as an indicator to let us know
| | 07:10 | when we're about level.
| | 07:12 | So that looks pretty good right there
about three degrees' rotation.
| | 07:18 | Now, when we did that though, our image
is showing a little bit of extra white
| | 07:22 | space around the edges.
| | 07:24 | So we'll go ahead and zoom that in.
| | 07:26 | I'm going to go ahead and hit the
green ball so I fill my screen again.
| | 07:30 | We can see our little
handles over here of the image.
| | 07:33 | I can click and drag that image just a
little bit bigger and move it up into
| | 07:38 | place so that we get all four
corners completely filled with the image.
| | 07:44 | And so now we've been able to straighten
out that image a little bit and drop it
| | 07:48 | in place so that it looks pretty good for us.
| | 07:51 | Now when we look at our book, we have
all of the different major chapters set
| | 07:56 | up, and next we need to start adding
in the sections of text that go along
| | 08:00 | with each chapter.
| | Collapse this transcript |
| Creating sections| 00:00 | Let's add some additional structure
and organization to our book by adding
| | 00:05 | sections underneath of our chapters.
| | 00:07 | Our chapters represent the various
different tours that we offer at Explore
| | 00:11 | California, and we have a variety of
different packages for each of those tours.
| | 00:17 | Let's begin by simply
adding a section to this chapter.
| | 00:20 | To do this, we simply go up to the
Add Pages icon at the top, go down to
| | 00:25 | Section, and click the Section button.
| | 00:28 | A new section is added to our chapter.
| | 00:30 | We can of course title the section,
Big Sur Retreat, and then we can begin
| | 00:35 | editing the text that's in here.
| | 00:37 | However, before we get started doing
that, there is a change that I want to
| | 00:41 | make to our template.
| | 00:43 | We'll notice that the template has a
sidebar here with some Lorem Ipsum text
| | 00:48 | and a numbered list.
| | 00:49 | Each of our tours has a tour
overview, but it's not an ordered list.
| | 00:54 | So let's go ahead and edit the template so we
can save ourselves some time in building this.
| | 00:58 | To edit the template, come up here to
the top of the Book sidebar, to the two
| | 01:03 | little grabber handles, and pull
down and you can expose out the various
| | 01:07 | different templates.
| | 01:08 | Let's go ahead and scroll down
until we get to the first section.
| | 01:12 | When we select the section in the top part,
now we're editing the actual template.
| | 01:18 | So we can click inside of this first
bit of text, double-click the title, and
| | 01:23 | we'll type in "Overview."
| | 01:25 | Then we'll click in the bottom and
instead of having an ordered list, we'll come
| | 01:30 | up to the Formatting toolbar and
select None from the dropdown menu.
| | 01:34 | Now, our text is just going to be
plain text and the word "Overview" will
| | 01:39 | already be written for us.
| | 01:41 | We can see that these
changes have not been applied yet.
| | 01:44 | We can then apply the changes by simply
clicking the red button over in the top
| | 01:49 | of the sidebar, and then grab the
handles and close up the template section.
| | 01:54 | Now when we click back in our section,
we can see that we're in the correct Big
| | 01:58 | Sur Retreat section and
we're ready to add our text in.
| | 02:01 | We can go ahead and shrink our
window down a little bit, and again, I've
| | 02:05 | included a text file in the exercise
files called Section Text.txt, which
| | 02:09 | you see onscreen, which has all
the text that we're going to be using
| | 02:13 | throughout this movie.
| | 02:14 | However, instead of copying and pasting
all of the text over and over, let's use
| | 02:18 | a slightly different technique
that's a little bit faster, in my opinion.
| | 02:22 | We'll come down to the bottom right-
hand corner and we'll drag our window so
| | 02:25 | that it's much narrower.
| | 02:28 | Then we'll move our window over to the
one side of our screen so we can see all
| | 02:33 | of our text and we can still
see our iBooks Author page.
| | 02:36 | Next, we're going to select the first
paragraph of text and then click and drag
| | 02:41 | and drop that text directly into the overview.
| | 02:44 | We can then select the main body of the
text, drag it, and drop it into our story.
| | 02:50 | Then go back up to iBooks
Author and add a new section.
| | 02:55 | We'll go ahead and type in the title of
this section: In the Steps of John Muir.
| | 03:03 | And then once again, we'll drag and
drop the text into the various sections.
| | 03:08 | We'll add a new section, type in its
title: The Death Valley Survivor's Trek.
| | 03:15 | Then we'll go ahead and drag and
drop our text. And just two more.
| | 03:22 | Add another section.
| | 03:24 | This one is The Mt. Whitney Climbers Tour.
| | 03:28 | Drag and drop our text.
| | 03:33 | And add one final section: Channel
Islands Excursion. And we'll select that text
| | 03:41 | and drop it into place.
| | 03:46 | And now we've created a section
for each of the packages within our
| | 03:49 | Backpack California Tour.
| | Collapse this transcript |
| Creating pages| 00:00 | There's one more major structural
element that we need to add to our book and
| | 00:04 | that's to add some pages.
| | 00:06 | Adding a page is exactly like
adding a chapter or a section.
| | 00:09 | You simply come up to the Plus icon for
Add Pages in the upper left-hand corner
| | 00:14 | of your toolbar, select Pages, and then
you can choose from any of the different
| | 00:18 | available templates.
| | 00:19 | I'm going to choose the 2 Column layout.
| | 00:23 | A new page is added for
me with some filler text.
| | 00:27 | As before, I've included in the
exercise files a text file, this time
| | 00:32 | called Backpack Text.txt.
| | 00:35 | If you need to, go ahead and
pause the video and copy the text.
| | 00:39 | Go ahead and select all the text, copy
it to your clipboard using Command+C, and
| | 00:43 | then come back to iBooks Author,
select the filler text, and press Command+V
| | 00:49 | to paste the text in.
| | 00:50 | Now, the text came in with no formatting at all.
| | 00:53 | And we notice that we've got a couple
of headers here and we've got a block
| | 00:57 | quote that we need to format.
| | 00:58 | So to add some formatting to these,
I'm going to use the Styles tools.
| | 01:03 | Now, my favorite way to use the Styles
is to go up to the View menu and come
| | 01:08 | down to the bottom, where I
can select Customize Toolbar.
| | 01:11 | Then take the Style tool and
click and drag it up to your toolbar.
| | 01:15 | I'd like to place mine up here next to
the Text Box, where it's easy to get at.
| | 01:20 | Go ahead and click the Done button.
| | 01:21 | Select Backcountry Adventures, go up
to the Style menu, and scroll down until
| | 01:27 | you find Heading 1.
| | 01:30 | Do the same thing for Walking
Among Giants and Hiking in the Stars.
| | 01:37 | For the first paragraph of text,
we'll simply select the first paragraph, go
| | 01:44 | back up to Style, and select Block Quote.
| | 01:47 | Now, the default style for this has a
little bit of extra space in between the lines.
| | 01:51 | While this block quote is still
selected, simply come up to the line spacing
| | 01:56 | adjustment, click the dropdown, and choose 1.1.
| | 02:00 | That will tighten that text up just a little
bit and make it a little bit nicer to read.
| | 02:06 | The new page is looking pretty good,
but we should probably add some images to
| | 02:10 | this page to add some visual interest
to the documents, and we'll do that in
| | 02:14 | the next movie.
| | Collapse this transcript |
| Adding visual interest| 00:00 | We're working on our new page
that we've created in our chapter 8
| | 00:04 | Backpack California, and we're going
to add some visual interest by adding
| | 00:08 | a couple of images.
| | 00:09 | We're first going to add an image of
a tree that's going to span from this
| | 00:12 | column across to this column,
in between the two pages.
| | 00:16 | To help us with this, let's go ahead
and click the Zoom tool at the bottom of
| | 00:20 | our screen and change our page down to 50%.
| | 00:23 | That way we can clearly see
both pages at the same time.
| | 00:27 | Next, we'll open up the Media Browser
and in the Photos tab, scroll down until
| | 00:31 | we can find the Redwood image.
| | 00:33 | Go ahead and click and drag that onto
the first page and close our Media Browser.
| | 00:39 | Next, we'll take the image and we'll
drag it so that the upper left edge of the
| | 00:43 | image is overlapping over
top of the first column.
| | 00:46 | Then we'll take and grab the lower
right-hand edge of the image and we'll drag
| | 00:51 | it until the blue bar at the top shows
that our image is larger than the entire
| | 00:58 | first column on the second page.
| | 01:00 | We'll next go ahead, and with that
image selected, press Command+C on
| | 01:04 | your keyboard to copy the image and then
Command+V to paste another copy of the image.
| | 01:10 | Then take and click and drag to the
right with the image and you can see that we
| | 01:14 | have two copies of the image side by side.
| | 01:18 | We want one on one page
and one on the other page.
| | 01:21 | Next, on the image on the right-hand page,
click and drag the image a little bit
| | 01:26 | to the right until you can get the
images to overlap, and you'll get a blue
| | 01:31 | crosshairs when the two images snap together.
| | 01:34 | You'll also get a blue bar at the bottom
indicating that the images are aligned perfectly.
| | 01:38 | Next, we just need to mask out the
edges of both of these images so that the
| | 01:42 | text will properly flow over each column.
| | 01:46 | You can get to the Masking tool
from the Formatting tool palette.
| | 01:50 | It's this icon right here with the two boxes.
| | 01:52 | Go ahead and click the tool, and
then make sure you click on the smaller
| | 01:58 | highlighted box in the middle so
that you select the area of the image
| | 02:01 | that's going to be masked.
| | 02:03 | Then drag that out until you're able
to completely fill the top, bottom--and
| | 02:12 | drag it over to the left-hand side so that
the first image is completely masked properly.
| | 02:17 | We'll deselect, click on the left-hand
image, use the Mask tool again, and this
| | 02:24 | time repeat the process, making sure
that the image appears all the way to the
| | 02:32 | top, all the way to the bottom, and
then fills all the way over the middle of
| | 02:36 | the gap of the two pages.
| | 02:38 | When you deselect and the user is able
to swipe their finger to go from one page
| | 02:43 | to the next, this image will span both
of the pages and will show up partially
| | 02:48 | on each of the pages.
| | 02:50 | Next, let's go ahead and
make one more modification.
| | 02:53 | Scrub your slider to the right-hand side,
click on the last page where your text
| | 02:58 | is located, and let's change the layout
of this one from a 2 Column layout down
| | 03:03 | to a 1 Column layout.
| | 03:05 | To do this, go over to your sidebar
where that page is selected, click the
| | 03:10 | dropdown menu next to it, and scroll down in
the list until you find the 1 Column layout.
| | 03:15 | Now we can see that we can apply
different page layouts to each individual page
| | 03:20 | within our document.
| | 03:22 | Let's go ahead and add one more image
down here to fill up this space here.
| | 03:26 | So go ahead and bring up your Media
Browser and you should find an image
| | 03:29 | called hiking path.
| | 03:30 | Go ahead and click and drag the
hiking path image back onto your page and
| | 03:34 | close the Media Browser.
| | 03:35 | Once again, let's go ahead and drag
the image. Stretch the image so that it
| | 03:44 | fills the space at the bottom of our page.
| | 03:51 | Drag the image up, and let's go
ahead and mask the edges of the image.
| | 03:55 | Again, we'll use the Masking tool.
| | 03:57 | We'll drag the bar this time to
the bottom of the row of text.
| | 04:00 | We'll make sure that the top of the
image is going to be cropped just underneath
| | 04:07 | of where our text is going to flow and
fill up the page that we're on. And drag
| | 04:11 | the left-hand slider over until we get
the blue bar indicating that we're at the
| | 04:15 | edge of the page. And same thing to the right.
| | 04:19 | Now when we deselect, you may have
ended up with an extra page that's shown up
| | 04:24 | over here on the right-hand side.
| | 04:25 | If so, just simply click over there,
hit the Delete key once or twice to get
| | 04:30 | rid of any extra characters that you may have
copied, and the page should snap in properly.
| | 04:35 | Now when we look at our document,
we'll start off with the title page for
| | 04:40 | this chapter, and then as the user begins to
read, they'll be able to swipe across the pages.
| | 04:45 | They'll have a nice image that spans two
pages and then another image that's on
| | 04:51 | a page that has a different layout.
| | Collapse this transcript |
| Customizing the table of contents| 00:00 | Let's take a few minutes and
clean up our table of contents.
| | 00:03 | We're in chapter 8, Backpack California, and if we scroll
down, we can see that the sections that we
| | 00:08 | created, the one at the bottom, section 5,
if it were alphabetically ordered, it
| | 00:13 | should be up here as section 2.
| | 00:16 | So simply click on the icon for
section 5 and drag it up into the correct
| | 00:20 | location and drop it down.
| | 00:23 | You'll notice the section automatically
renumbers to be section 2 instead of section 5.
| | 00:29 | Next, go ahead and scroll all the way up
to the top of your sidebar and click on
| | 00:34 | Table of Contents, and then change
the Orientation view to Portrait view.
| | 00:38 | Here, we can see that some of our
chapters are not quite in alphabetical order.
| | 00:42 | It would be nice to have that set up.
| | 00:44 | So we'll simply scroll down
in our sidebar, grab chapter 8
| | 00:48 | Backpack California, and drag it up until
the blue line shows just above chapter 2.
| | 00:53 | When we drop it in place, chapter 8
now becomes the new chapter 2, and all of
| | 00:59 | the other chapters are renumbered as well.
| | 01:02 | We can do the same thing with
California Calm, changing it to be chapter 3, and
| | 01:08 | Cycle California, making it chapter 4.
| | 01:11 | Go ahead and scroll back up to the top of your
sidebar and click again on Table of Contents.
| | 01:17 | Next, let's turn our
attention to the header graphic here.
| | 01:20 | The first thing we want to do is
adjust the text EXPLORE California.
| | 01:24 | We'll go ahead and double-click
California, then hold down the Shift key on your
| | 01:27 | keyboard, and click just to the left of
the E in EXPLORE in order to select the
| | 01:32 | entire line of text.
| | 01:34 | We'll change the font so that it matches
the font on our cover page to Palatino.
| | 01:39 | We'll change it from bold to regular, and
then we'll change the size down to 64 points.
| | 01:46 | Next, let's change the color of
EXPLORE by double-clicking on EXPLORE, click
| | 01:51 | the Inspector button, click on the
Text tab, and then on the color chip, and
| | 01:57 | we'll select the same gold color that we
chose earlier out of our Explore California logo.
| | 02:03 | Click off of the text to deselect it.
| | 02:05 | Next, let's go ahead and
replace the placeholder image.
| | 02:09 | To do that, bring up your Media window
and find the cover image and drag that
| | 02:14 | and drop it into the placeholder image.
| | 02:17 | Next, click one time on the cover image
and drag it over to the left-hand side
| | 02:21 | so you can leave a small area of white
space over here to the right-hand side.
| | 02:26 | That's just enough space for us to
add our logo and drop it into place.
| | 02:31 | And then drag it around until you get
the grid lines so that it snaps in place.
| | 02:35 | Then click one time on our cover image
and drag it back over to the right-hand
| | 02:40 | side, until it snaps back into alignment.
| | 02:43 | If you double-click on this cover
image and drag it up and down, you can
| | 02:47 | find just the right portion of the
image that's going to add the right
| | 02:51 | amount of visual interest.
| | 02:52 | Next, let's zoom in our page so
it's a little bit easier to work with.
| | 02:57 | Let's zoom up to 100%, and now let's
add a gold transparent bar down at the
| | 03:03 | bottom by clicking on Shapes and the Box tool.
| | 03:07 | Then move the box so that it aligns
with the bottom of the image, grab the top
| | 03:12 | of the box, change the height of the box
down, and stretch the box out so that it
| | 03:18 | fills the space
underneath of EXPLORE California.
| | 03:22 | The top of the box should align at
approximately the same height as the top of
| | 03:27 | this portion of our logo.
| | 03:29 | Then if we go back to our Inspector
and we go to the Graphic tab, change the
| | 03:34 | Fill Pattern to Color Fill, click the
color chip, and select the same bright
| | 03:40 | yellow color that we chose in an earlier movie.
| | 03:43 | We can then change the Opacity
down to 50% and hit Enter or Return to
| | 03:49 | accept that change.
| | 03:50 | Things are looking a lot better.
| | 03:52 | Let's go ahead and add a text box and
then select the text inside of the text
| | 03:56 | box and type in "2012 Travel Guide."
| | 04:02 | Select the text and change the font
size to 18 points, and the color to white.
| | 04:10 | Then deselect the text box and click once on
the text to make a selection of the text box.
| | 04:16 | Drag the text box so that it's
appropriately sized, but make sure you drag the
| | 04:20 | right-hand side of the text box out a
little extra to leave a little bit of
| | 04:24 | extra room over here to the right-hand side.
| | 04:26 | Next, grab the text box and drag it and
place it above the Explore California logo.
| | 04:33 | With the text box still selected, go ahead and
check the link for Shadow to add a drop shadow to that text.
| | 04:40 | Then press Command+C on your
keyboard to copy it, Command+V to paste it,
| | 04:45 | and then move that new copied text
down so that it's centered inside of the
| | 04:50 | gold transparent bar.
| | 04:52 | We can then select this text
and type in our web address:
| | 04:55 | www.explorecalifornia.com.
| | 05:03 | Deselect the text and you'll notice
that the text becomes a hyperlink again.
| | 05:08 | Since we stretched out the text box a
little bit further, if we double-click
| | 05:12 | in that text box, then it will
automatically select the text inside of the text box.
| | 05:19 | We can then come back over to our Link
tool in our Inspector and uncheck the box
| | 05:24 | for Enable hyperlink.
| | 05:26 | One more text treatment. Let's go
ahead and click on the text box for
| | 05:30 | EXPLORE California,
| | 05:32 | go back to the Graphics pane, and turn
on the shadow for EXPLORE California.
| | 05:37 | We can deselect and now we have a nice
cleaned-up header that's nicely laid out
| | 05:42 | for our table of contents.
| | Collapse this transcript |
| Creating a glossary| 00:00 | A great feature of iBooks Author is
the ability to create and add a glossary
| | 00:04 | directly to our book.
| | 00:06 | By adding a glossary, it will
automatically create an index of terms that will
| | 00:11 | be hyperlinks directly
into our pages of our book.
| | 00:14 | To create a glossary, you want to make
sure that you have the Glossary toolbar open.
| | 00:19 | You can open this by going up to
the View option in the toolbar and
| | 00:23 | selecting Glossary Toolbar.
| | 00:25 | Your Glossary toolbar will appear
underneath of your Formatting toolbar.
| | 00:29 | To add a term into the glossary,
simply navigate to the page on your document
| | 00:34 | and select the text that you
want to have added to the glossary.
| | 00:38 | As soon as you select the text,
the new glossary term is automatically listed
| | 00:42 | inside of the Glossary toolbar.
| | 00:44 | You simply click the button that says Add
Term and the term is now added to the glossary.
| | 00:49 | When you add a term, the text that you
selected is also bolded to show the user
| | 00:55 | that they can interact with the
text to get access to the definition.
| | 00:59 | But only the first term that you
select is highlighted. Any additional times
| | 01:04 | where this term appears on the
same page or any subsequent pages,
| | 01:08 | they're not highlighted automatically.
| | 01:09 | For instance, down here later in the page
is another instance of the word John Muir.
| | 01:16 | For this I can create what's called a
link to this glossary term, by simply
| | 01:21 | selecting the text and then going up to
the my Glossary toolbar and clicking the
| | 01:26 | button that says Add Link.
| | 01:28 | Since the text automatically matches,
the Index dropdown menu is already
| | 01:33 | selected to the proper term.
| | 01:36 | Let's go ahead and click on the term
John Muir and we can access our glossary.
| | 01:41 | Next, we'll need to add
a definition to the term.
| | 01:45 | I've included a text file in
the chapter 1 exercise files
| | 01:49 | called glossary.txt.
| | 01:50 | If you don't have access to the files,
you can go ahead and pause the video
| | 01:54 | and copy down the text.
| | 01:56 | Let's go ahead and select all of these
texts using Command+A on our keyboard and
| | 02:00 | then Command+C to copy it to our clipboard.
| | 02:02 | We can then close the file, click on
the definition inside of our glossary, and
| | 02:08 | paste the text using Command+V.
| | 02:10 | If you'd like to add an image or
video to your definition, you can do so by
| | 02:14 | simply dragging those into the page.
| | 02:17 | If we look further down in the
definition for this term, we can see that at the
| | 02:20 | bottom of the page we have our Index.
| | 02:23 | Currently, there are two listings in
here, indicating the two separate listings
| | 02:27 | where we've selected the term
and linked them in our document.
| | 02:31 | If we click on the second term, we'll be
taken directly back to our In the Steps
| | 02:35 | of John Muir page and the link that
we clicked on from the index has been
| | 02:39 | automatically highlighted for us.
| | 02:42 | By adding a glossary of terms to your
documents, you're able to increase your
| | 02:46 | readers' access to information,
both throughout your document and cross
| | 02:50 | reference information by providing
additional definitions and resources to
| | 02:55 | your users.
| | Collapse this transcript |
| Previewing your work on an iPad| 00:00 | We've done a lot of work on our
Explore California book already.
| | 00:04 | Now, let's go ahead and
preview our work on the iPad itself.
| | 00:09 | To begin, make sure your iPad is
plugged into your computer's USB port via the
| | 00:14 | dock connector cable.
| | 00:15 | Then touch on the iBooks icon to
launch the iBooks application on your iPad.
| | 00:22 | Now, back in iBooks Author, go ahead and
click the Preview button up in your toolbar.
| | 00:27 | The entire iBook that you've created
will need to be compiled and then loaded
| | 00:32 | onto your iPad so you're able to test it.
| | 00:36 | (music playing)
| | 00:48 | After your iBook opens for the first
time, it should play your intro video and
| | 00:54 | then take you to the Introduction chapter.
| | 00:56 | You'll notice that we're in a
title slide view of this chapter.
| | 01:00 | We can swipe over to the next chapter by
simply dragging our finger over to the right.
| | 01:05 | You can see all of the content that's
associated with this chapter underneath it.
| | 01:10 | By touching on the bottom page,
you can now swipe from page to page
| | 01:14 | throughout our book.
| | 01:15 | Here we have our tree image that we
added in an earlier movie, and you can see
| | 01:19 | as we swipe over from one page to the
next, we get a seamless integration.
| | 01:24 | Our text is nicely laid out.
| | 01:26 | We can swipe over to the next page.
| | 01:28 | Here's our image at the
bottom with our other layout.
| | 01:31 | On these pages we haven't
changed the header template layout.
| | 01:35 | We can swipe over to some of these
next pages, and then we're able to swipe
| | 01:39 | through the various chapters that we've come to.
| | 01:41 | If we look at the Cycle California page,
you'll notice that I've got a small
| | 01:45 | white bar above and below my image.
| | 01:47 | That indicates that I need to
stretch the image out a little bit more to
| | 01:51 | fully fill that screen.
| | 01:52 | It's hard to tell this from
the iBooks Author application.
| | 01:56 | You really need to preview your book on the
iPad so you can notice small things like this.
| | 02:01 | Let's go over to the next page. Desert to Sea,
| | 02:05 | that one is looking pretty good.
| | 02:07 | Taste of California, also
looking pretty good. Nature Watch.
| | 02:11 | This one looks good in this view, but
if we pinch on this page, then it will
| | 02:16 | drop us down to the Table of
Contents view for this particular chapter.
| | 02:20 | You'll notice that the bird is not
showing up in the same alignment.
| | 02:24 | In an earlier movie, we moved the
placement of the bird on the chapter page,
| | 02:29 | but we didn't move the placement of the bird
on the Table of Contents page for that chapter.
| | 02:33 | If we scrub over to the next, we can
see our Snowboard California, and if
| | 02:38 | we look at the title page for this
one, we see our snowboarder in the
| | 02:42 | correct orientation.
| | 02:44 | But again, when we pinch out, the
snowboarder is not in the correct orientation here.
| | 02:49 | If we turn the iPad up into a vertical
orientation and we go back to Snowboard
| | 02:53 | California, you'll notice that the
title page for this image is also not in the
| | 02:58 | correct orientation.
| | 02:59 | If we turn our iPad up to the Portrait
view and then pinch in, we're taken to
| | 03:04 | our Table of Contents page.
| | 03:06 | The Table of Contents is looking pretty good.
| | 03:08 | All that hard work on our
header is really paying off.
| | 03:11 | We can click the small dropdown menu
next to Backpack California and we not
| | 03:15 | only see the listings of all the
different sections, but you notice those items
| | 03:19 | that we made heading 1s,
| | 03:21 | those became their own listings inside
of the Table of Contents, so users are
| | 03:26 | able to very quickly jump
directly to that section of our book.
| | 03:29 | It's a very helpful tool.
| | 03:31 | As we're still looking in the Portrait
view, we'll notice there are some other
| | 03:34 | alignment issues that we'll need to deal with.
| | 03:36 | You need to make sure that when you're
testing your apps on the iPad, you look at
| | 03:40 | every single page, in both the portrait
and the landscape perspective, and you
| | 03:45 | pinch out to look at the table of
contents for each of the individual pages.
| | Collapse this transcript |
|
|
2. Working with TemplatesUnderstanding templates| 00:00 | Apple ships iBooks Author with a
variety of different templates to get you up
| | 00:04 | and running with your book right away.
| | 00:06 | And we've already had a look at those
templates in a previous movie, but in
| | 00:09 | this movie I'd like to take a deep
dive into all the component elements that
| | 00:14 | make up a template.
| | 00:16 | If you want to follow along with me,
I've got just a blank contemporary template
| | 00:20 | opened up onscreen.
| | 00:22 | Templates are all composed of three major
types of layouts, and we've seen these before.
| | 00:28 | The three types of layouts are
chapters, sections, and pages.
| | 00:33 | All templates also have a variety of
predefined styles for all of the text elements.
| | 00:40 | And you can access the styles by
hitting little Styles button here on the
| | 00:43 | toolbar and you'll have a sidebar that
will pull out that will show you all of
| | 00:48 | the different paragraph styles,
character styles, and list styles that are used
| | 00:52 | throughout the template.
| | 00:53 | Finally, templates also have some
common book structural elements, such as the
| | 00:59 | book title and the table of contents.
| | 01:02 | Elements such as the table of contents
are even defined by the styles that are
| | 01:08 | used throughout the template.
| | 01:09 | If you go up to the Inspector,
you can see in the Document Inspector
| | 01:13 | there's a Table of Contents, or a TOC,
tab and here, you're able to select all of
| | 01:19 | the different styles that are going to
show up inside of your table of contents.
| | 01:23 | And all this is defined in the template itself.
| | 01:26 | So how do we get in and
look at one of these templates?
| | 01:29 | Well, there's two ways.
| | 01:30 | You can of course come up to the View
menu and select Show Layouts and that will
| | 01:36 | show you the layouts here in the top.
| | 01:38 | I'll go ahead and hide the layouts.
| | 01:40 | And the other way to access them is to
simply use the little grabber here at the
| | 01:43 | top of the sidebar, pull that all the
way down, and now you can see all of the
| | 01:48 | chapter layouts, the section layouts,
and the page layouts are below that.
| | 01:53 | Go ahead and scroll back up here to the top.
| | 01:55 | And let's take a deeper look
at one of the section layouts.
| | 01:58 | So we'll just select the first section layout.
| | 02:00 | And there's three major types of content
elements that go into one of these layouts.
| | 02:07 | There's placeholder elements such as
placeholder text and the styles that
| | 02:12 | are defining that text.
| | 02:14 | A lot of times you'll see Lorem Ipsum
text that's just text to be able to let
| | 02:19 | you know that you can take more
text and drop it in place and it will
| | 02:22 | automatically have the
styles applied to that new text.
| | 02:27 | There's also images that are
placeholders as well, such as this top header
| | 02:32 | image, that allow you to simply grab an
image out of your media browser and drop
| | 02:36 | it directly on top of the image
placeholder and that placeholder will
| | 02:40 | automatically change.
| | 02:41 | The second type of element that we have
are called auto-updating elements such
| | 02:46 | as the page numbers that are down at
the bottom of the page or the section or
| | 02:50 | chapter numbers that are
automatically labelled for us.
| | 02:53 | And the third type of element are simply
layout elements or design elements such
| | 02:59 | as this horizontal line that separates
the section number from the section name.
| | 03:04 | Throughout this chapter,
you're going to learn how to modify these
| | 03:07 | existing layouts, create your own
layouts, work with major page layout
| | 03:12 | elements, and you'll even learn how
to save a custom template to use in
| | 03:16 | your own future projects.
| | Collapse this transcript |
| Creating a blank layout| 00:00 | I've heard from a lot of designers that
say that they want to create their own
| | 00:04 | custom layouts and their own custom
templates completely from scratch and they
| | 00:07 | don't want to have all of the extra
stuff that Apple has already added into the
| | 00:11 | layout to get started with.
| | 00:12 | Well, in this movie, I'm going to show
you how to create your own blank template
| | 00:17 | so you can begin with a clean slate.
| | 00:19 | To get started, I've opened up a brand
new document based on the basic template.
| | 00:23 | The first thing I'm going to do is I'm
going to go into the book title, select
| | 00:28 | on an element, and then press
Command+A to select all of the elements on the
| | 00:29 | page and then press the Delete button.
This gets rid of all of these elements.
| | 00:34 | You can do that for other
elements such as the table of contents.
| | 00:37 | Next, let's turn our attention
to the individual layout pages.
| | 00:42 | If we pull down the sidebar,
let's start off with the chapter layout.
| | 00:46 | Go ahead and click on the chapter
layout then click on any element in the page,
| | 00:50 | press Command+A, and
then press the Delete key.
| | 00:53 | You'll notice that many of the
elements disappear but not all of them,
| | 00:57 | in particular this vertical bar.
And you'll notice the vertical bar is
| | 01:01 | still selected and it's got this
small X up here at the top and there's one
| | 01:05 | at the bottom as well.
| | 01:06 | This indicates that this is a locked element.
| | 01:09 | To unlock the element, all you need to
do is go up to the Arrange menu and go
| | 01:13 | down and select Unlock. The Xs go away.
| | 01:16 | You can now press the Delete key
and that element goes away as well.
| | 01:20 | Make sure you scroll over to the right-
hand side, because many of these layouts
| | 01:25 | have two pages defined.
| | 01:28 | Let's go ahead and press Command+A
to select all the elements on this page,
| | 01:32 | hit the Delete key, and once again
we'll need to unlock that vertical line by
| | 01:36 | going to Arrange > Unlock.
| | 01:39 | And then we can press the
Delete key to get rid of it.
| | 01:41 | We can then apply those changes down to
any existing documents within our document.
| | 01:47 | If we want to get rid of an entire
layout, such as the preface, because we're
| | 01:51 | not going to be using it within our
document, we can right-click or Ctrl+
| | 01:54 | Click on that layout and
then simply select Delete.
| | 01:59 | Now, we have a chapter that
has no content in it whatsoever.
| | 02:03 | You can repeat that process for all of
the elements within sections as well.
| | 02:08 | If you scroll down further,
| | 02:10 | you can see below that, we have our pages.
| | 02:13 | I would suggest going ahead and leaving
the pages in place as they are because
| | 02:16 | it's just some basic layouts.
| | 02:18 | If you, for instance, knew that you
were never going to have a one-column
| | 02:22 | layout, you could simply right-click
or Ctrl+Click on the element and delete
| | 02:25 | it as well to get rid of it.
| | 02:29 | The pages layouts always
include a blank page layout already.
| | 02:33 | So if you wanted to, you can get rid of
all these layouts that are just text if
| | 02:37 | you knew you were just going to be
starting off with just plain documents.
| | 02:40 | When you're finished making all of the
changes to your layout, you can simply
| | 02:44 | scroll back up to the top, go up to the
File menu, and choose Save as Template.
| | 02:50 | You can give your template a name, such
as Blank, and the correct location, which
| | 02:56 | is My Templates, is already selected for you.
| | 02:58 | To learn where this location is,
simply scroll over to the left-hand side and
| | 03:02 | you'll notice that in your Library
folder, under Application Support/iBooks
| | 03:09 | Author/Templates/My Templates is
the location where your new template is
| | 03:14 | going to be created.
| | 03:16 | Go ahead and click the Save button and
then when you close that document, you
| | 03:20 | don't need to save it, and you can go
up to the File menu and choose New from
| | 03:24 | Template Chooser, and when you scroll
down in the list, you will find your new
| | 03:28 | blank yemplate that you can open
up and you can begin working with.
| | 03:32 | Since we didn't get rid of the rest of
these elements, they're still here in this one.
| | 03:36 | But you could go through and build your
own blank template if you want to do a
[00:0339.14]
complete layout from scratch.
| | Collapse this transcript |
| Modifying existing layouts| 00:00 | Let's modify an existing layout to
our Explore California Travel Guide.
| | 00:05 | In chapter 2 for Backpack California,
we've already created a variety of
| | 00:09 | different sections, and it would be
nice if there was a custom layout
| | 00:12 | specifically for these sections.
| | 00:15 | To do this, simply go up to the top of
the side bar and pull down the little
| | 00:19 | handle to reveal the layouts.
| | 00:22 | Scroll down until you find the layouts for
each section, and select the Section Layout.
| | 00:28 | This is the layout that's currently
applied to those default sections.
| | 00:31 | The first thing we want to do is we want
to duplicate this section so we
| | 00:35 | have a custom layout just for this chapter.
| | 00:39 | So right-click or you can
Ctrl+Click on this layout and then select
| | 00:43 | Duplicate from the dropdown menu.
| | 00:46 | A new copy of this layout is created
for us, and we can customize its name by
| | 00:51 | double-clicking on Copy and
simply typing in "Backpack."
| | 00:56 | Then with that layout selected, we
can begin making customizations over in
| | 01:01 | the right-hand side.
| | 01:02 | The first thing we want to do is we
want to get rid of the auto-updated text
| | 01:06 | that lists out the Section number.
| | 01:08 | So simply click on Section 1 and
press the Delete key on your keyboard.
| | 01:12 | The next element that we want to
get rid of is this horizontal rule.
| | 01:15 | Go ahead and click on the horizontal
rule, but notice that the two ends of the
| | 01:20 | line have an X on them.
| | 01:23 | This indicates that this is a
locked element on the template.
| | 01:27 | To get rid of this element, all we
need to do is go up to the Arrange menu at
| | 01:31 | the top and select Unlock.
| | 01:33 | As soon as we select Unlock, the Xs are
now replaced with boxes, indicating this
| | 01:38 | is an editable element.
| | 01:40 | Now we can simply press the Delete key on
our keyboard to get rid of that element.
| | 01:44 | The next thing we want to do is
customize the text for the section title.
| | 01:47 | But before we do that, let's go ahead
and open up our Styles sidebar so we can
| | 01:52 | see the styles that are being applied.
| | 01:54 | Double-click on the section
title and then we'll change the font.
| | 01:58 | Click the dropdown menu and select
Palatino, then change the font to Regular, and
| | 02:04 | change the Size to 48.
| | 02:07 | Let's add two more elements to this text.
| | 02:10 | If we go up to the Inspector, we can
make sure that we're on the Graphics tab
| | 02:13 | and then check the box for Shadow to
apply a drop shadow to our text, and then
| | 02:18 | click on the Text tab and select the
color chip and select the same yellow color
| | 02:23 | that we chose in an earlier movie.
| | 02:25 | We can then go ahead and
close our Colors window.
| | 02:29 | You'll notice that as we've made
these changes to our text, that in the style
| | 02:33 | sidebar next to our Section Designation,
the dropdown arrow has changed from the
| | 02:38 | normal color to red, indicating that
there is a style that is outside of the
| | 02:43 | normally defined styles
for this particular document.
| | 02:47 | Go ahead and click on that dropdown
menu and now we can choose whether or not
| | 02:51 | we want to create a brand new paragraph
style from the selection or if we want
| | 02:55 | to redefine the style for all elements
within our template as we have it laid out here.
| | 03:01 | Let's go ahead and choose the
Create Paragraph Style from Section.
| | 03:05 | A dropdown sheet should appear,
allowing us to redefine a title for our new style.
| | 03:11 | Instead of being called Section
Title 4, I'm going to change mine to
| | 03:14 | Section Title Backpack.
| | 03:16 | I'm going to leave the check box for
Apply the new style on creation and click OK.
| | 03:23 | Our new style then
appears in our Styles sidebar.
| | 03:26 | Let's go ahead and deselect the Section
text, then click on it one time to select
| | 03:31 | the text box, and drag it up until
it's centered within our header.
| | 03:35 | Let's go ahead and apply this
new layout to our existing pages.
| | 03:40 | If we scroll down in our sidebar
and select one of our sections, we can
| | 03:44 | click the small dropdown menu next
to it and now choose our new custom
| | 03:48 | layout: Section Backpack.
| | 03:51 | That new layout is instantly applied
to that page, but you'll notice the
| | 03:55 | additional pages have not
had that layout applied to it.
| | 03:58 | We can go ahead and apply that layout to
each of the different sections one by one.
| | 04:05 | Next, we want to make a couple of more
changes to our Section Backpack layout.
| | 04:09 | So click on the Section Backpack
layout in the top of the sidebar to
| | 04:14 | reactivate the layout.
| | 04:15 | Next, we're going to go up and open up
our Media browser and then our chapter 02
| | 04:21 | images, we should have a file called header.
| | 04:23 | Grab that header file and drag it and
drop it into our placeholder image at
| | 04:28 | the top of the page.
| | 04:30 | That image is now applied to our layout,
and you'll notice that in our Layouts
| | 04:34 | sidebar, we now have a red
button that says Apply Changes.
| | 04:38 | By clicking on this button, that change
is instantly applied to all of the pages
| | 04:43 | within our document that are using this layout.
| | 04:47 | Let's make one more change, and we'll
add in the Backpack CAL logo directly onto
| | 04:52 | the layout, dragging the logo down to the
lower left-hand corner of the page, and
| | 04:57 | then sizing it so that it appears
at an appropriate size for our page.
| | 05:03 | We can once again apply the changes
and now when we look at all of our
| | 05:06 | individual pages, they have all of
the layout modifications that we've made so far.
| | Collapse this transcript |
| Creating a custom layout| 00:00 | Let's begin creating our own custom
layout for Explore California Travel Guide.
| | 00:06 | For each of our tours, it would be
great to include a photo collage of images
| | 00:11 | that have been submitted from
various people who have taken our tour.
| | 00:14 | Let's create a custom template that will
make this process easier for us in the future.
| | 00:19 | To begin, make sure you have your
layouts visible and scroll to the bottom of
| | 00:24 | the Pages section and find the Blank layout.
| | 00:27 | Then right-click or Ctrl+Click on
the blank layout and choose Duplicate.
| | 00:33 | Then change the name to Photo Collage.
| | 00:37 | Make sure the Photo Collage is selected
and then click inside the main window.
| | 00:42 | We'll begin by opening up our Media
browser and grabbing a placeholder image
| | 00:46 | out of our photos collection and
simply dropping it on to our page.
| | 00:50 | Any photo here will do.
| | 00:51 | I'm using one out of the chapter 2
exercise files called Placeholder.
| | 00:56 | Next, we want to create a small footer
to the image so we can have a place to
| | 01:01 | put in our Explorer's name.
| | 01:02 | To do this, simply come up to the top and
select Shapes, and we'll select the box shape.
| | 01:06 | Then we'll resize the box so that
it's the same width as our image and
| | 01:12 | approximately 50 pixels high.
| | 01:15 | We'll then make sure we move that box
into place so that it snaps to the very
| | 01:19 | bottom of our image.
| | 01:22 | We can then open up our Inspector and
on the Graphics tab, change the fill for
| | 01:27 | the box to Color Fill, click on the
color chip, and change the color to black.
| | 01:36 | We can then change the Opacity of this
box down to 40% and now we have a nice
| | 01:43 | place to put our text.
| | 01:45 | Next, we'll go up and select the
Text Box tool to create a new text box.
| | 01:50 | We'll double-click on the text
and simply type in "Explorer's Name."
| | 01:57 | We'll select that text and change the color
of the text to white and the size to 24 points.
| | 02:05 | We'll deselect the text and then move
the text box into place and resize the
| | 02:11 | text box so that it's
centered in the bottom of our image.
| | 02:16 | We want to define this text as its own style.
| | 02:19 | To do this, simply click on the text
box to select it, and then at the bottom
| | 02:24 | of your style sheet, click the plus and
choose Create Paragraph Style from Selection.
| | 02:31 | A sheet will pull down, and we can define
this new paragraph style as Explorer's Name.
| | 02:37 | We'll click the OK button and now
Explorer's Name is a new paragraph style.
| | 02:43 | Next, we'll add another text box.
| | 02:48 | In this text box, simply type in a 1 and we're
going to use this text box for our page numbers.
| | 02:54 | Go ahead and select the text and
click the right-hand Justify tool.
| | 03:01 | Then resize your text box and drag it
down into the lower right-hand corner of
| | 03:06 | the page. Then select the text box one
more time, and we need to define this
| | 03:12 | text as being a member of our footer.
| | 03:17 | This will automatically apply
the footer's style to this text.
| | 03:21 | Next, we'll create one more text box, and
we'll add the text "Photos from the" and
| | 03:30 | we'll type in all caps "CHAPTER TOUR."
| | 03:35 | Next, we'll go ahead and resize the
text box and drag it into place, making
| | 03:41 | sure we fill the bottom of the page.
And then we're going to define this text
| | 03:45 | box as being a heading 1.
| | 03:49 | Our layout is looking pretty good now.
| | 03:51 | We'll need to do a little more work
on the image and we'll do that in the
| | 03:55 | next movie.
| | Collapse this transcript |
| Defining placeholder media| 00:00 | We're still working on building our
custom layout of a photo collage for our
| | 00:04 | Explore California Travel Guide.
| | 00:06 | Our layout is coming along nicely.
| | 00:08 | The next thing we need to do is define
our image as a placeholder image so that
| | 00:12 | when this layout is used on a
subsequent page, we'll be able to drop an image
| | 00:18 | directly on top of it.
| | 00:19 | To do this, simply click on the image
to select it, then go up to the Format
| | 00:24 | menu at the top, and go down to the Advanced menu,
and then select Define as Media Placeholder.
| | 00:31 | Just because that image is defined as
a media placeholder though, doesn't
| | 00:35 | mean that our users will
be able to edit the image.
| | 00:37 | To do that, we need to go up to the
Inspector and make sure we're on the Layout
| | 00:42 | tab and check the box for
Editable on pages using layout.
| | 00:46 | If we wanted to give this image a
custom tag, we could do that here.
| | 00:50 | We're going to leave this off because we're
going to duplicate this image in a later movie.
| | 00:55 | Our image is complete.
| | 00:57 | In the next movie, we'll go
ahead and define the placeholder text.
| | Collapse this transcript |
| Defining placeholder text| 00:00 | We're still working on our custom
photo collage layout for our Explore
| | 00:04 | California Travel Guide.
| | 00:06 | The next step is to define the
explorer's name as placeholder text and make sure
| | 00:11 | that it's editable in future pages.
| | 00:14 | To do this, simply click on the text
box for the Explorer's Name and go up to
| | 00:19 | the Format menu and go down to Advanced.
| | 00:22 | Then select Enable Placeholder Text Authoring.
| | 00:26 | We then need to go to the Inspector and
go to the Layout tab and check the box
| | 00:31 | for Editable on pages using this layout.
| | 00:36 | We can then close the layout window.
| | 00:38 | Our text is now fully set up.
| | 00:41 | You'll notice that we do have some more
text down here at the bottom: the Photos
| | 00:44 | from the CHAPTER Tour and the page number.
| | 00:47 | And we'll address those in the next movie.
| | Collapse this transcript |
| Adding auto-updating text| 00:00 | Our custom photo collage layout for
our Explore California Travel Guide is
| | 00:05 | coming along nicely.
| | 00:06 | The next thing we need to do is
to define some auto-updating text.
| | 00:10 | Down here in the bottom,
we have Photos from the CHAPTER Tour.
| | 00:14 | Well, let's go ahead and double-click
CHAPTER and go up to the Insert menu and
| | 00:20 | select Section Title.
| | 00:22 | A box had been placed around the text
and it's now called EXPLORE California.
| | 00:27 | When we double-click on that box,
a new pop-up window opens up and it's asking us
| | 00:33 | to define what auto text
that we want to have in here.
| | 00:37 | Let's go ahead and select Current
chapter because we're going to have one of
| | 00:40 | these photo collages for each of our chapters.
| | 00:43 | Let's also go ahead and make one minor
modification to this whole text box by
| | 00:47 | adjusting the width so it's over just a
little bit, so it's not tight up against the edge.
| | 00:52 | Now, let's go ahead and add
auto text to add our page number.
| | 00:56 | Double-click to select the page
number that we created, go up to the Insert
| | 01:00 | menu, and choose Page Number.
| | 01:03 | Now, our page will automatically be
defined by the correct page number where
| | 01:08 | it's added into our book.
| | 01:10 | The final step in creating our photo
collage is to actually build the collage
| | 01:14 | itself, and we'll do that in the next movie.
| | Collapse this transcript |
| Creating a photo collage layout| 00:00 | Let's go ahead and finish building
our custom photo collage layout for our
| | 00:04 | Explore California Travel Guide.
| | 00:07 | To begin, click and drag a selection
around all of the elements of our image.
| | 00:11 | We can then go up to the Arrange
menu and select Group, so we can make a
| | 00:15 | grouping of all of those elements,
| | 00:17 | copy using the Command+C keyboard on
your keyboard, and then paste a new copy
| | 00:22 | using Command+V. We can then
resize this image, we can move it to a new
| | 00:30 | location, and if we open up the
Inspector and we go over to the Metrics tab,
| | 00:36 | you can adjust the rotation of
that image and move it into place.
| | 00:41 | Repeat this process several times
until you get a layout that works for you.
| | 00:45 | I'm going to add just a few copies of my
layout here and we'll add one more down
| | 00:52 | here in the corner. We'll rotate it
up, drop that guy into place.
| | 00:57 | It will be very helpful to have this
image pushed further back in the stack, so
| | 01:02 | we'll go up to the Arrange menu
and we'll select Send to Back.
| | 01:06 | We can then take our initial image,
drag it down a little bit, and then we
| | 01:11 | have a pretty good layout that has our
images looking pretty much like a photo collage.
| | 01:15 | Feel free to add additional images or
play with the layout to get something
| | 01:19 | that appeals to you.
| | 01:20 | Once you have a layout that works for you,
press Command+A on your keyboard to
| | 01:25 | select all the elements on your layout.
| | 01:28 | Then go up to the Arrange menu and
select Ungroup to ungroup all of the
| | 01:32 | various different elements.
| | 01:34 | Now, we'll need to go to the Layout tab
of our Inspector and one by one click on
| | 01:39 | each of the images and recheck the box
for Editable on pages using this layout.
| | 01:45 | Even though we made this selection in
an earlier movie, as soon as we made
| | 01:49 | the groupings and then ungrouped the images,
all of a sudden the text became uneditable.
| | 01:55 | So we'll simply go through, click on
each image, and click on each box of text
| | 02:02 | and reset the Editable tag.
| | 02:04 | Now, we're all finished with our layout.
| | 02:06 | We're ready to go and apply this to a new page.
| | 02:09 | To do this, simply click on the
Explore California chapter, go up to the Add
| | 02:13 | Pages button, go down to Pages, and then
select Photo Collage from the dropdown menu.
| | 02:20 | The new photo collage layout appears.
| | 02:24 | We can then open up the Media browser and
we can begin adding images onto our layout.
| | 02:32 | As we drop the images in, one by one,
we're able to drop them into place and
| | 02:42 | then we can go in and title each
of the images for the explorer that
| | 02:45 | submitted the image.
| | 02:46 | We can simply double-click and
then select the text and then type in
| | 02:51 | the explorer's name.
| | 02:55 | For text that's highly rotated, you'll
notice that the text rotates to allow us
| | 02:59 | to type, and then as soon as we click
away, the text rotates back into place.
| | 03:06 | Be sure to type in the name and then click
away to have the text completed in place.
| | 03:12 | And there we go.
| | 03:13 | We've been able to
create a custom photo collage.
| | 03:16 | You'll also note that down at the
bottom, our Cycle California chapter text
| | 03:20 | has been entered automatically for
us and the page has the correct page
| | 03:24 | number on it.
| | Collapse this transcript |
| Sharing a custom template| 00:00 | Before we wrap up this chapter on
customizing templates in iBooks Author, I'd
| | 00:05 | like to share one more tip with you,
and that's how to share a customized
| | 00:09 | template that you've saved and exported.
| | 00:11 | In an earlier movie, we showed
how to save a blank template.
| | 00:15 | Now, let's go ahead and share that
template to another user that may want to use it.
| | 00:20 | To do this, make sure you're in your
Finder and then go up to the Go menu and
| | 00:26 | select Go to Folder.
| | 00:28 | You then want to type in a tilde, which
is the Shift and the key usually just to
| | 00:33 | the left of the number 1--it's that
little squiggle sign--/Library.
| | 00:43 | Then click the Go button and your
Finder window should automatically open to a
| | 00:48 | hidden folder in your Mac OS X Lion account.
| | 00:51 | You then want to go to Application
Support/iBooks Author/Templates/My
| | 00:58 | Templates, and you should find
the blank template located there.
| | 01:03 | If you hold down the Option key on
your keyboard, you can then click and drag
| | 01:07 | that template out to your desktop.
| | 01:09 | You'll notice the green ball with the plus
icon indicating that we're going to make a copy.
| | 01:14 | When you release, a copy is created
and your blank template is left in place.
| | 01:20 | You can go ahead and close the Finder window.
| | 01:23 | You can then hold down the Ctrl key or
right-click on that blank template and
| | 01:27 | select Compress Blank.
| | 01:30 | This will create a zip file of the template.
| | 01:34 | You can then email this zip file, if
it's small enough, or you can simply copy
| | 01:38 | it to your local network or use some
other method to be able to transfer the
| | 01:42 | file to another user.
| | 01:44 | All they need to do then is simply
double-click the file to decompress it and
| | 01:48 | then copy that file into the same
location that we just got the file from.
| | Collapse this transcript |
| Creating a portrait-only book| 00:00 | New in iBooks Author 2 is the
addition of new Portrait Only templates.
| | 00:05 | These templates are similar to the
regular templates that we've already seen and
| | 00:09 | will be using throughout the
rest of this video training series.
| | 00:12 | However, there are a few key differences.
| | 00:15 | So let's have a look at them now.
| | 00:17 | The Portrait Only layouts are located
here at the bottom of the Template chooser.
| | 00:22 | To select a layout, simply double-click on
the icon for the templates you want to preview.
| | 00:27 | In this case, let's double-
click the Photo Book layout.
| | 00:32 | When the template opens up, you'll
notice that everything looks fairly similar
| | 00:36 | to the landscape book layouts that
we have been working with so far.
| | 00:40 | However, if we look up here in the
toolbar, at the Orientation option,
| | 00:45 | you'll notice that we no longer have
the ability to switch our view between
| | 00:49 | the Landscape and Portrait views, as we saw in
the "Customizing Your Table of Contents" movie.
| | 00:54 | You are now locked into only laying
out your book in the Portrait view, which
| | 01:00 | more resembles a traditional book and is
how your reader is likely to be holding
| | 01:04 | their iPad when reading your book anyway.
| | 01:07 | Let's have a quick look at some of
the other key features of this template.
| | 01:10 | If we start over here in the left-hand
column, you will notice that all of the
| | 01:14 | common elements that we've
seen thus far are present.
| | 01:18 | Items such as the Book Title, the Intro
Media, the Table of Contents and the Glossary.
| | 01:25 | In fact, we can even come up here and
still grab the small Grabber handle and
| | 01:29 | pull down in order to access
the layouts for this template.
| | 01:34 | Here, we can see all of the layouts for
the Chapters, Sections and individual
| | 01:41 | pages for this template.
| | 01:46 | We still have the ability to click on
the individual pages of our book down here
| | 01:50 | in the bottom and edit the Chapter
page, the Section page, or the individual
| | 01:55 | pages inside of our book.
| | 01:58 | In fact, we can even click the small
dropdown menu still and change the layout
| | 02:03 | for a particular page right
here in the left-hand column.
| | 02:07 | In fact, everything about the
functionality of a Portrait Only layout works
| | 02:11 | exactly the same as it does in a landscape view,
with the exception of the Table of Contents.
| | 02:17 | In a landscape book, you need to the
Portrait view to edit the Table of Contents
| | 02:22 | as we saw in the previous movie.
| | 02:24 | But in the Portrait Only template, you
simply just edit the Table of Contents.
| | 02:30 | The Portrait Only templates are a
great addition to iBooks Author 2 and I
| | 02:35 | encourage you to explore the additional
templates on your own and perhaps build
| | 02:40 | your next book in this new format.
| | Collapse this transcript |
|
|
3. Adding TextDragging and dropping plain text| 00:00 | iBooks Author is a fantastic
application for building dynamic, interactive,
| | 00:05 | beautifully designed books.
| | 00:08 | But at the core of every single book is the
text that the user is going to be reading.
| | 00:13 | And in this chapter, we're going to
explore the three basic ways of importing
| | 00:17 | text from other document types
directly into our iBooks Author project.
| | 00:22 | And let's begin that with the most basic
type of document, a plain text document.
| | 00:27 | Now, if you're following along, I'm in
EC_03_start, and we're going to start off
| | 00:32 | in chapter 7, Nature Watch.
| | 00:34 | In the exercise files, I've
included a few files for us.
| | 00:38 | The first one is called Nature Text.
| | 00:40 | We'll go ahead and bring that file up
so you can see it here on the screen.
| | 00:44 | If you need to, you can pause the video
and copy this text into a plain text file.
| | 00:48 | We're going to import this
directly into iBooks Author.
| | 00:50 | We've already seen how we can select
the text, copy it, and paste it into a
| | 00:54 | layout, but let's explore
another way of doing this.
| | 00:57 | I'm going to go ahead and close my document.
| | 00:59 | I'm going to start off in iBooks Author
with chapter 7 Nature Watch selected,
| | 01:04 | and then I'm going to go up to the
Add Pages tool in the upper left-hand
| | 01:08 | corner and select Pages.
| | 01:09 | And we're going to choose the 2 Column layout.
| | 01:12 | This is going to add the filler
pages for us with the base text.
| | 01:16 | Go ahead and click inside of that
text and then press Command+A on your
| | 01:20 | keyboard to select all of that text,
and then simply press the Delete key.
| | 01:24 | Now, I'm going to jump over to my Finder where I
can see my text file here on my exercise files.
| | 01:30 | I'm then going to simply take the
text file, drag it, and drop it directly
| | 01:34 | into iBooks Author.
| | 01:35 | When I do, the text is
automatically added to the page.
| | 01:39 | The next thing we need to do
is go ahead and format the text.
| | 01:42 | The easiest way to begin formatting
the text is simply to click inside of the
| | 01:46 | text and then press Command+A on
your keyboard again to select all of that
| | 01:50 | text. And then simply define this
text as body text by clicking on the Body
| | 01:55 | style in our Style sidebar.
| | 01:58 | Now, we can easily see all of the
individual paragraphs of our text.
| | 02:03 | Let's go ahead and add the
additional formatting to our text here.
| | 02:07 | The first paragraph of text we want to
define as a block quote, so we'll select
| | 02:11 | the text and then click Block
Quote in our Paragraph Styles panel.
| | 02:15 | We can next select The Fossil Tour
and define it as a heading 1, Coastal
| | 02:22 | Experience also as a heading 1, and
then if we move over to the second page, we
| | 02:29 | can find our Endangered Species
Expedition. We'll go ahead and select that and
| | 02:33 | also define that as a heading 1 tag as well.
| | 02:37 | We scrub back to the first page, let's
go ahead and open up our Media window and
| | 02:41 | in the chapter 3 Images folder, we have
a nature baby sea lion image. We can go
| | 02:47 | ahead and drag that into our layout,
close our Media window, and then simply drag
| | 02:52 | the image and scale it
into the desired location.
| | 02:57 | I've also included in the chapter 3
exercise files a Desert to Sea text that if
| | 03:02 | you would like to, you can add that
text with the included image from the Media
| | 03:07 | folder into the Desert to
Sea chapter on your own.
| | 03:11 | And in the next movie, we'll look at
adding a Pages document directly into
| | 03:15 | our layout.
| | Collapse this transcript |
| Inserting text from Pages| 00:00 | We're still importing text into
our Explore California Travel Guide.
| | 00:04 | And in the last movie, I had you
insert a text file, and this is what my text
| | 00:08 | file ended up looking like for my Desert to Sea.
| | 00:11 | This was the first page of it
and then the second page of it.
| | 00:15 | So you can go ahead and
check your work against mine.
| | 00:17 | Next, let's go ahead and
import a Pages document.
| | 00:20 | For this document, we are going to go
down to the last chapter, chapter 9, and
| | 00:25 | insert the text for the Golden Gate tour.
| | 00:27 | I'm going ahead and open up the Pages
document that we're going to be importing
| | 00:31 | so we can have a look at it before we import it.
The formatting is very simple.
| | 00:36 | In the first paragraph, I've defined
this paragraph to be a block quote.
| | 00:40 | And notice that I've named my
paragraph style Block Quote exactly as the
| | 00:44 | paragraph style is defined
inside of our iBooks Author document.
| | 00:49 | The body text is also defined as Body in
the Pages document, just as it's defined
| | 00:55 | as Body inside of our iBooks Author document.
| | 00:59 | And our Headers are defined as Heading
1 just ah they are defined as Heading 1
| | 01:06 | in the iBooks Author document.
| | 01:09 | The other interesting thing about this
document is that we've also included an
| | 01:13 | image inside of the Pages document that
we're going to import directly into our
| | 01:17 | iBooks Author document.
| | 01:20 | So go ahead and close the Pages document
and then back in iBooks author, with the
| | 01:25 | chapter 9 selected, we'll go up to the
top and select the Insert menu and choose
| | 01:30 | Chapter from Pages or Word document.
| | 01:33 | We'll then go into our chapter 3
exercise folder and look for the
| | 01:36 | Golden_Gate.pages document and click Insert.
| | 01:40 | A new sheet will pull down asking us to
choose the type of layout that we want
| | 01:45 | to use as we import this new chapter.
| | 01:48 | Now notice this is going to import
an entire new chapter, even though we
| | 01:51 | already have chapter 9, Golden Gate defined.
| | 01:55 | By bringing in the Pages or a Word
document, it's going to create that
| | 01:58 | new chapter and then we'll have to
do some manipulation inside of our
| | 02:01 | document afterwards.
| | 02:02 | You want to also check the box that says
Preserve document paragraph styles on import.
| | 02:09 | This way all of the styles that we
defined inside of our Pages document will
| | 02:13 | import with the labels, and since our
labels will match, it will make our life
| | 02:18 | easier for adjusting the formatting.
| | 02:20 | So go ahead and check the
box and then click Choose.
| | 02:23 | A pop-up window will appear giving
us a warning that we may have some
| | 02:28 | font substitutions.
| | 02:29 | When you import a Pages document or a
Word document, any types of mismatches
| | 02:35 | between what the iPad will support and what
your Pages document is defined will appear here.
| | 02:40 | Some of them will give you a chance
to replace a font, while others will
| | 02:43 | automatically do that.
| | 02:45 | And that's what's happened here.
| | 02:46 | We'll simply go ahead and click on
that item and hit Clear to get rid of it.
| | 02:50 | Then we'll go ahead and close the document,
and let's look and see what got imported.
| | 02:55 | The name of our pages document got
included as the chapter name for this new chapter.
| | 03:00 | Notice it's chapter 10 and our
Golden Gate chapter is chapter 9.
| | 03:03 | Let's go ahead and scroll down and have
a look at the text that it brought in.
| | 03:08 | It brought in the text all right.
| | 03:09 | The formatting is not quite right,
but it did also bring in our image.
| | 03:14 | So let's do a little formatting now.
| | 03:15 | We'll first, deal with the body text.
| | 03:18 | So go ahead and click inside the body
text and you'll notice in your Paragraph
| | 03:22 | Styles in the right-hand side, the
small triangle to the right is indicating
| | 03:26 | that we have a mismatch.
| | 03:27 | Go ahead and click the dropdown menu and
then choose the option Select All Uses of Body.
| | 03:33 | This way all of the body text that
got imported will all be selected.
| | 03:38 | Now, we can either click the dropdown
menu and choose Revert to Defined Style to
| | 03:43 | have our iBooks Author style
definitions automatically applied here or we can
| | 03:49 | use another method that we'll look at now.
| | 03:52 | If you click inside of the Block Quote
paragraph and then go over and you see
| | 03:56 | the dropdown menu again, here we can
Select All Uses of Block Quote, in case
| | 04:01 | there are any additional ones.
| | 04:03 | And then instead of clicking the dropdown
menu again, this time simply click Block Quote.
| | 04:08 | That will apply the style automatically.
| | 04:11 | Let's do this one more time by
clicking inside of our header text, and now we
| | 04:15 | can select the dropdown menu to Select
All Uses of Heading 1. And notice if we
| | 04:20 | scrub over to the right-hand side, it
selected all of those headers. And then
| | 04:24 | we'll simply click Heading
1 to apply our actual style.
| | 04:28 | Go ahead and scrub back to the first
page, and now let's deal with our image.
| | 04:32 | Go ahead and click on the image and
drag it over into the upper right-hand
| | 04:36 | corner where we want it to be,
and then we can go ahead and resize it so it
| | 04:40 | fills the top part of our column.
| | 04:42 | Now that we have all of our
text, there's one more step.
| | 04:45 | We need to move all of this
text into the appropriate chapter.
| | 04:49 | Because we've already defined our
chapter and we've already done the work of
| | 04:52 | adding the Header image, let's go
ahead and simply move this text into place.
| | 04:56 | So click inside the text and then press
Command+A on your keyboard to select
| | 05:00 | all the text, then Command+C on your
keyboard to copy the text. Then we'll go
| | 05:04 | into the Golden Gate chapter,
| | 05:06 | click the dropdown menu to add a page,
and we'll add the 2 Column page layout.
| | 05:11 | We'll click inside of that text, press
Command+A on your keyboard to select
| | 05:14 | all, and then simply press Command+V to paste.
| | 05:18 | That will paste all of our text over.
| | 05:20 | Now, let's go ahead and grab our image.
| | 05:22 | We can come back down here to chapter 10,
| | 05:25 | click one time on your image, and press
Command+C on your keyboard to copy it.
| | 05:29 | Then come back into chapter 9, click
your mouse in, and press Command+V on your
| | 05:34 | keyboard to paste the image.
| | 05:36 | And now when you go to move it, notice
that the image doesn't quite move smoothly.
| | 05:40 | It's moving, but it's not quite going properly.
| | 05:43 | The text isn't wrapping correctly.
| | 05:45 | And that's because when we pasted the
image over, it came in as an inline image
| | 05:49 | rather than a floating image.
| | 05:51 | So with the image selected, simply
click the Floating button and now our text
| | 05:55 | re-wraps around the image properly and our
image is floating into place where we want it.
| | 06:01 | We can then simply click on the Golden
Gate-1, chapter 10 and press the Delete
| | 06:06 | key on our keyboard, and it's going to
ask us, Are we sure we want to get rid of
| | 06:11 | this chapter? And we can simply say yes.
| | 06:13 | And now we have imported our Pages
document into an existing chapter and had it
| | 06:17 | bring in most all of the formatting.
| | 06:19 | As part of the exercise files,
I've included another Pages document for you
| | 06:24 | to try on your own.
| | 06:25 | It's called Snowboard California.
| | 06:27 | Inside of this document, I've used
the same text definitions as we had in
| | 06:32 | the other document.
| | 06:34 | And I'll go ahead and
scroll down a little bit further.
| | 06:37 | And here, I've also included an
image in this document as well.
| | 06:39 | So go ahead and import this Pages
document and go ahead and add it to the
| | 06:43 | Snowboard California chapter.
| | 06:45 | And then in the net movie, we'll look
at doing the same process but using a
| | 06:49 | Microsoft Word Document.
| | Collapse this transcript |
| Inserting text from Microsoft Word| 00:00 | In this chapter, we've been importing
text documents directly into our Explore
| | 00:04 | California Travel Guide made in iBooks Author.
| | 00:08 | In the last movie, I left you with
being able to add the Snowboard California
| | 00:11 | pages document directly into chapter 8.
| | 00:14 | Here's what my solution looked like.
| | 00:17 | I've got my page laid out in here,
| | 00:18 | I have got the image moved into
place, and there's the second page.
| | 00:23 | All the text is laid out quite nicely.
| | 00:25 | Now, let's go ahead and turn our
attention to importing a Microsoft Word document.
| | 00:29 | And for this case, we're going to
use the California Calm chapter.
| | 00:33 | Let's go ahead and first take a look
at the Word document and here's the Word
| | 00:37 | document up onscreen.
| | 00:39 | If you need to, you can pause
the video and copy down the text.
| | 00:43 | What I did differently in this Word
document when I was setting it up, is I used
| | 00:47 | the default styles as they're
defined here inside of Microsoft Word.
| | 00:52 | So for the first paragraph, where
normally our iBooks Author document would be
| | 00:56 | called a Block Quote,
| | 00:58 | this time it simply just called a Quote.
| | 01:00 | You can see the other
headings that we've also used here.
| | 01:03 | Instead of Body, we've use
the standard Normal definition.
| | 01:06 | And as we go ahead and scroll down,
we have included an image. For our headers, though,
| | 01:13 | they're called Heading 1, very similar
to how our headers in iBooks Author are
| | 01:18 | also listed as Heading 1.
| | 01:21 | Let's go ahead and import this
document then directly into iBooks Author.
| | 01:26 | So just as what we did before with Pages,
you want to make sure that you click
| | 01:30 | on the chapter that we want to import
the text under, and we'll go up to the
| | 01:35 | Insert menu and we'll select
chapter from Pages or Word document.
| | 01:38 | The sheet will pull down, and again,
we're in the chapter 3 exercise files and
| | 01:42 | we're going to select the
CaliforniaCalm.docx document.
| | 01:46 | We'll go ahead and click the Insert
button and then a sheet pulls down asking us
| | 01:51 | to choose which layout that we
want to use for this text document.
| | 01:55 | We'll go ahead and use
the standard chapter layout.
| | 01:58 | We'll make sure we have the check box
set for Preserve document paragraph styles
| | 02:02 | on import, and then we'll click Choose.
| | 02:05 | We're then given some warnings to let us
know that a font substitution has taken place.
| | 02:10 | This is fine. We can simply click the button at
the bottom that says Clear All, all the
| | 02:14 | warnings go away, and we'll go
ahead and close the document.
| | 02:18 | Now, when we brought in our Word
document, it did not bring our Word document
| | 02:21 | directly into our California Calm chapter.
| | 02:23 | It created its own chapter instead.
| | 02:26 | And you'll notice that it titled
this new chapter, California Calm-1.
| | 02:31 | It picked this name up
from the name of our document.
| | 02:33 | We can go ahead and scroll down a little bit
further and then go ahead and click on the page.
| | 02:38 | We can also see that it brought in
our image just fine, and that's looking
| | 02:42 | good. And our text all came in, and you can
see that it tried to apply some styling to it.
| | 02:47 | Let's go ahead and fix that now.
| | 02:50 | So go ahead and first click inside
of one of our paragraphs and then in
| | 02:54 | our Styles panel on the side,
we can see that it's got this text
| | 02:58 | designated as Normal.
| | 03:00 | Well, go ahead and click the dropdown next
to Normal and choose Select All Uses of Normal.
| | 03:05 | This will select all of the paragraphs in this
chapter that have been defined as Normal text.
| | 03:12 | We can then scroll up in our
paragraph styles until we find Body and then
| | 03:16 | simply click on Body.
| | 03:18 | This will redefine all of those
paragraphs using the Body heading.
| | 03:22 | But you'll notice that there's a small
red arrow next to the Body tag indicating
| | 03:27 | that there's a mismatch in styles.
| | 03:29 | All it did is redefine the name of the style;
| | 03:31 | it didn't actually redefine the style itself.
| | 03:34 | So we'll click the dropdown menu and
choose Revert to Defined Style, and now all
| | 03:39 | of our text has the correct
style information applied to it.
| | 03:43 | Let's go ahead and do the same thing to the
first paragraph, which initially in the
| | 03:46 | Word document was designated as a Quote.
| | 03:49 | So we'll click inside of there, we'll
again click the dropdown menu for Quote
| | 03:54 | and Select All Uses of Quote in case
there are some additional locations
| | 03:58 | where it's defined later.
| | 04:00 | We'll scroll up to the top and click
Block Quote and then click the dropdown
| | 04:05 | menu and Select Revert to Defined Style.
| | 04:08 | We'll do this one more time on the headers.
| | 04:11 | Go ahead and click inside the heading,
and you'll notice that this time the
| | 04:14 | heading, even though it's got the
same name, Microsoft Word defined it as
| | 04:19 | heading with a lower case h instead of a
capital H. So iBooks Author picked this
| | 04:24 | up as a style mismatch.
| | 04:25 | We'll go ahead and follow the same procedure.
| | 04:28 | Click the dropdown menu, Select All
Uses of Heading 1, click on Heading 1 to
| | 04:33 | change the definition, then click the
dropdown menu, Revert to Defined Style,
| | 04:38 | and now all of our text from our
Word document is properly defined.
| | 04:42 | We'll go ahead and move the image
into place and resize the image, and
| | 04:47 | everything is looking good.
| | 04:48 | We have one more step, though.
| | 04:50 | Because our text is now defined in
this new chapter, but we want it to
| | 04:53 | actually be inside of our main chapter,
all we need to do is click inside of
| | 04:57 | our text, press Command+A on our
keyboard to select all of the text, and then
| | 05:01 | Command+C to copy.
| | 05:04 | Then click on the California Calm,
chapter 3, go up to Add Pages, and go down to
| | 05:10 | the 2 Column layout.
| | 05:11 | We'll then click inside of the text,
press Command+A and then Command+V to
| | 05:16 | paste, and then we'll go back to our chapter 4.
| | 05:20 | We'll click one time on the image to
select it, copy it using Command+C on our
| | 05:24 | keyboard, then go back up to page 14 in
our layout, click anywhere inside of our
| | 05:30 | layout, and paste using Command+V.
| | 05:33 | You'll notice that when the image
came in, it's no longer a floating image.
| | 05:37 | So we're not able to easily drag it
around and place it where we want it.
| | 05:41 | So all we need to do is click one time
on the image to select it and go up to
| | 05:45 | the Formatting toolbar and select Floating.
| | 05:49 | Now, we can grab the image and we can
drag it into place and drop it into the
| | 05:53 | location that we wanted.
| | 05:55 | We can then click on California Calm-1,
chapter 4 and simply right-click or
| | 06:00 | Ctrl+Click on that chapter and say
Delete chapter, confirm that we want to
| | 06:05 | delete it, and now our California Calm
chapter is laid out with the text that we
| | 06:11 | imported directly from Microsoft Word,
using the styles that Microsoft Word had
| | 06:16 | defined rather than matching our
styles specifically to iBooks Author.
| | 06:21 | So that you can practice this,
I've included another Word document inside of the
| | 06:25 | exercise files called Cycle California.docx.
| | 06:30 | This is what the document looks like.
| | 06:32 | You'll notice that
there's an image inside of it.
| | 06:34 | I've included text and laid them out
using the same style information of Quote,
| | 06:39 | Heading 1, and Normal.
| | 06:41 | Go ahead and do the import on your own.
| | 06:44 | So I've gone ahead and added that document in.
| | 06:47 | You'll notice how my layout looks.
| | 06:49 | I've got my block quote defined here.
| | 06:51 | I've got all my text redefined as Body.
| | 06:53 | My image is floating right here in place.
| | 06:57 | And then if I go ahead and scrub over,
you can see my headings have been
| | 07:00 | redefined properly as well.
| | 07:03 | So the Cycle California chapter now
begins with our nice layout, goes into our
| | 07:07 | collage, and then has the text document here.
| | Collapse this transcript |
| Creating linked text boxes| 00:00 | One of the most common questions that
I get asked about working with text in
| | 00:04 | iBooks Author is, how do
you create linked text boxes?
| | 00:08 | It's actually pretty easy to do,
but Apple hasn't made it very obvious.
| | 00:14 | If you're following along, I have a
blank document open to a blank layout page.
| | 00:18 | It's important to note that creating
linked text boxes only works on layout
| | 00:23 | pages and will not work on a page that
has already been inserted into your book.
| | 00:29 | All you need to do is first create a
text box by clicking the Text Box button.
| | 00:33 | I'll go and move the text
box over here to the side.
| | 00:36 | Then we'll go ahead and select
the text inside of the text box.
| | 00:40 | And we'll go up to the Format menu, we're
going to come all the way down to the
| | 00:45 | bottom to Advanced, and make sure
Define as Placeholder Text is checked.
| | 00:49 | And then you also want to check
Enable Placeholder Text Authoring.
| | 00:54 | Then you want to make sure that your
Inspector is open to the Layout tab.
| | 00:58 | Come down to the Layout Object and
check the box that says Editable on
| | 01:02 | pages using this layout.
| | 01:04 | You then click the dropdown
menu for Tag and select Body.
| | 01:09 | As soon as you do, you'll notice
there's two small arrows, one in the
| | 01:12 | lower-right and one in the upper-left
that have appeared as part of our text box.
| | 01:17 | We can then click on that arrow and a pop
-up window appears letting us know that
| | 01:22 | we can now click and drag to create a
new text box, and that text box also has
| | 01:27 | the link text arrow.
| | 01:29 | We can click on that and then click and drag
in another location to create a third text box.
| | 01:36 | We can make as many of these as we want.
| | 01:38 | We can even create another text box
that would flow text into the first box.
| | 01:43 | Now that we have these set up, let me
just go ahead and resize this text box
| | 01:47 | just a little bit, and I'll go ahead,
| | 01:50 | Type to enter text into this box and have
it flow into the next. And there you go.
| | 01:57 | That's you all you need to do.
| | 01:59 | Just make sure that you set all those
parameters and you can create text that
| | 02:03 | flows from one location to
another inside of a page layout.
| | Collapse this transcript |
|
|
4. Formatting TextUnderstanding how to format text| 00:00 | In this chapter, we're going to take
a deeper look at how to format text
| | 00:04 | inside of iBooks Author.
| | 00:05 | If you're following along, I'm in EC_04_start,
and I'm in the Section 1, Big Sur Retreat page.
| | 00:12 | When you go to format text inside of
iBooks Author, the first thing you need
| | 00:15 | to do is make a selection of your text,
and you can do this in a variety of different ways:
| | 00:19 | you can simply click and drag to
select some text, you can double-click on a
| | 00:24 | word in order to select it, or you can
triple-click inside of a paragraph to
| | 00:28 | select the entire paragraph.
| | 00:30 | Once you've made your selection,
the next thing you need to do is apply some
| | 00:34 | formatting to that text
from one of three locations:
| | 00:38 | either from the Format bar, the
Inspector, or the Format menu.
| | 00:42 | If you don't have your Format bar showing,
simply go to the View menu and select
| | 00:46 | Show Format Bar to turn it on.
| | 00:49 | The Format bar is arranged so that you
can control the styles of your text over
| | 00:54 | here on the left-hand side.
| | 00:56 | Then you can control specific parameters
of your font here in the center section.
| | 01:01 | Over here on the right, you can
control specific formatting for paragraphs or
| | 01:06 | blocks of text. And finally, you
can control formatting for lists.
| | 01:10 | The second location that you can control
your formatting for your text is inside
| | 01:14 | of your Inspector and
inside of the tab for Text.
| | 01:19 | The Text Inspector is
arranged in a series of tabs as well.
| | 01:23 | The first tab allows you to control
parameters about the paragraph and alignment of text.
| | 01:28 | The next tab allows you to control
lists, then you can control your tabs, and
| | 01:33 | then there is a More setting which has
some more advanced controls for text.
| | 01:37 | The final location to be able to access even
more text controls is up under the Format menu.
| | 01:43 | And it's under these two
submenus for Font and Text.
| | 01:47 | The Font submenu allows you to
control the specific formatting of your
| | 01:51 | font, while the Text submenu
allows you to control the formatting of
| | 01:55 | paragraphs or blocks of text.
| | 01:57 | Now that you know the general location
to be able to find the formatting, let's
| | 02:01 | go in and apply some
specific formatting to our text.
| | Collapse this transcript |
| Formatting text| 00:00 | Let's go ahead and apply some formatting
to our text here in the Big Sur Retreat
| | 00:04 | section of our Explore California Travel Guide.
| | 00:08 | Let's start with this first paragraph of text.
| | 00:10 | To select it, we need to triple-click
anywhere inside of the text to select
| | 00:14 | the entire paragraph.
| | 00:15 | Then let's go ahead up to the Format bar
and look at some of the options that we
| | 00:19 | have available to us.
| | 00:21 | The first one we can do
is choose our font family.
| | 00:23 | At the top of the menu, you can see all
of the recently chosen fonts that you've
| | 00:28 | used while using iBooks Author.
| | 00:30 | Below that, you can see all of
the fonts that are available on an
| | 00:33 | iPad specifically.
| | 00:34 | Now, you may have additional fonts
installed on your system, but they won't be
| | 00:38 | listed here if they're not available on an iPad.
| | 00:41 | This way, you're only able to choose
fonts that are going appear correctly on
| | 00:45 | the iPad when you export your final iBook.
| | 00:48 | All of these fonts are arranged in
alphabetical order and they're displayed in
| | 00:52 | the actual font face, so you
can see what they look like.
| | 00:55 | If you want to choose a font that's
not displayed, you can simply move your
| | 00:59 | mouse to the bottom of the screen to
scroll down in the list, or you can type the
| | 01:03 | first letter of the font, which is T,
to jump down to the T section and then
| | 01:09 | begin to find the font
that you're interested in.
| | 01:11 | Let's go ahead and select Times New
Roman and see what that looks like.
| | 01:14 | As soon as you select the font, the font
face changes on your paragraph of text.
| | 01:20 | You can then go back to the Font menu
and you'll notice that that font has now
| | 01:23 | been added to our recently used fonts.
| | 01:25 | I'm going to go ahead and stay
with Helvetica Neue for my font face.
| | 01:29 | Next, we can choose the typeface for
this particular font in the next menu.
| | 01:35 | These are all the available typefaces
that are available for each individual font.
| | 01:39 | For this block of text I'm going
to go ahead and choose Bold Italic.
| | 01:43 | You can choose whatever font face that
you would like and then we can go ahead
| | 01:47 | and select the size of the font.
| | 01:49 | Now for the size of the font, there is
a variety of different sizes that are
| | 01:52 | predefined as part of the font
itself that we can choose from.
| | 01:55 | So, say we wanted to choose 24.
Well that looks a little bit big.
| | 01:59 | And we can come back down to
a little bit smaller size, 18.
| | 02:02 | That's still looking a little bit large.
| | 02:04 | So let's go ahead and
type in our own custom size.
| | 02:07 | So we'll simply select the size of 18
and we'll type in 15 over top of that and
| | 02:11 | then hit Return on your
keyboard to accept that change.
| | 02:14 | That's looking pretty good.
| | 02:15 | Next, we can choose the font color.
| | 02:18 | Click the color swatch and you can see
the initially selected color is highlighted.
| | 02:23 | We can then choose a slightly
darker color to apply a little bit darker
| | 02:27 | highlight to this text.
| | 02:28 | The next block allows us to choose
the background color for our text.
| | 02:33 | So let's go ahead and choose something
nice and contrasty like one of these red
| | 02:35 | colors, and deselect so
you can see that applied.
| | 02:39 | Now, that's not the effect that we're
looking for here, so we'll go ahead and
| | 02:42 | triple-click inside of our paragraph of
text to reselect it and then click the
| | 02:46 | background color, and then if we click
this first square, which is the white box
| | 02:51 | with the line through it,
that chooses no background color.
| | 02:55 | If we deselect our text, we can see
that the background color is removed.
| | 02:58 | Okay, go ahead and triple-
click again to reselect the text.
| | 03:01 | Now since I chose my font face of
being Bold Italics, the next section here
| | 03:05 | already shows bolding and italics of my font.
| | 03:09 | If I also wanted to add an underline,
I could click the Underline and then the
| | 03:12 | text would be underlined as well.
| | 03:14 | I can turn that off by simply clicking on
it one more time to turn off the underline.
| | 03:19 | The next section here in the Format bar
allows us to choose the alignment of our paragraph.
| | 03:24 | By default, the alignment is set to left align.
| | 03:27 | We could also choose to center align
our text, right-hand justify, or set up
| | 03:32 | a justification so that both the
right and left side of our text shows up
| | 03:37 | tight along this edge.
| | 03:38 | That's looking a lot better
for this first paragraph of text,
| | 03:41 | so we'll go ahead and
leave it set to Justification.
| | 03:43 | Now let's turn our attention to
the Inspector in the Text tab.
| | 03:47 | You can see that our new font color is
already selected here for us and that our
| | 03:51 | alignment is also set.
| | 03:53 | To look at how the alignment within
the text cell works, let's go ahead and
| | 03:57 | click inside of our other paragraph of
text over here on the right-hand side.
| | 04:02 | Since we're going to apply this
formatting to the entire text box, all we need
| | 04:05 | to do is just select inside of the text.
We don't need to have anything else selected.
| | 04:10 | The first option here allows us to set
the alignment to the top of the text box.
| | 04:14 | Now if you notice, the text box is this
outlined box around our text, and it's
| | 04:19 | right now aligned to the top.
| | 04:21 | The next option allows us to
center that text within the text box.
| | 04:25 | And the final option allows us to align
the text with the bottom of the text box.
| | 04:29 | I'll go ahead and leave this set up
here to the top of the text box alignment.
| | 04:32 | Let's go ahead and reselect our first
paragraph of text under the overview and
| | 04:37 | triple-click to select that entire paragraph.
| | 04:40 | The next part of our Text Inspector
allows us to control the specific spacing of
| | 04:44 | the letters and words within our paragraph.
| | 04:47 | We can see this effect a little
more drastically by dragging the slider
| | 04:51 | for Character first.
| | 04:53 | We'll first drag it to the right.
| | 04:55 | You can see that the spacing is
greatly increased in between each character.
| | 05:01 | If we drag it to the left, then the text
is tightened up and the spacing between
| | 05:05 | the letters is greatly reduced.
| | 05:07 | I like to increase the default spacing
between my characters just a little bit more,
| | 05:12 | so I'll go ahead and move this up a little bit.
| | 05:14 | And if I want to type in a precise
amount, I can either use the up and down
| | 05:18 | arrows to the right of the text box or
simply select the box and type in a value,
| | 05:22 | such as 7, and then hit Enter
or Return to accept that change.
| | 05:27 | That opens that text up a little bit
further and makes it a little bit easier to read.
| | 05:32 | Next, we can control the
spacing between the lines.
| | 05:35 | Again, to practice this, simply grab
the slider and drag right and left to see
| | 05:40 | what the effect looks like.
| | 05:42 | I like a line spacing just a little
bit more opened up, so I'll go ahead and
| | 05:46 | type in a value of 1.1, and hit Enter or
Return on my keyboard to open that text
| | 05:51 | up a little bit more there as well.
| | 05:53 | The next parameter is Before Paragraph,
and if we drag this slider over, we
| | 05:57 | can see that what it's doing is it's moving
the space that appears before the paragraph.
| | 06:02 | We can move it back over here to
the left to close that space back up.
| | 06:06 | The After Paragraph text does a
similar thing, only it controls the alignment
| | 06:10 | after the paragraph.
| | 06:11 | I'm going to go ahead and leave this
set back down to the default as well.
| | 06:16 | The final control for our text inside of the
Text Inspector is to control the Inset Margin.
| | 06:21 | Now to control the Inset Margin,
I'm going to deselect my text and then just
| | 06:25 | click one time on the entire sidebar text box.
| | 06:29 | Now when I go ahead and increase the
Inset Margin, you can see that what it's
| | 06:33 | doing is it's creating a
buffer around the entire text box.
| | 06:37 | I'd like to leave my Inset
Margin set to only about 5 points.
| | 06:41 | That way I get just a little
bit of extra buffer off the edges.
| | 06:45 | Now that our text is starting to take
shape, let's make a quick modification to
| | 06:49 | our layout and add a solid
color background to our sidebar.
| | 06:54 | To do this, let's go ahead and pull down
our Layouts and scroll around until you
| | 06:58 | find the Section Backpack layout
that we're using for these pages.
| | 07:03 | Then come on up to Shapes
and select the box shape.
| | 07:06 | We're then going to simply drag the box
shape directly over top of our sidebar
| | 07:11 | and drag the lower right-hand
corner until it is the exact same size.
| | 07:15 | We'll then go ahead and go up to the
Arrange menu and select Send to Back.
| | 07:20 | This will put the background
color of the sidebar behind the text.
| | 07:25 | Let's go ahead and
choose a better color though.
| | 07:28 | We'll go over to our Graphics
Inspector and instead of a Gradient Fill, let's
| | 07:32 | choose Color Fill, click on the color
square, and then click on the magnifying
| | 07:37 | glass, and let's choose one of the
lighter colors out of our Backpack
| | 07:41 | California logo. There,
that's looking pretty good.
| | 07:44 | Now, we can close our Color window and
we can apply those changes by clicking
| | 07:49 | Apply Changes to our layout.
| | 07:50 | And now when we look at all of our
other sidebars, they all have a nice
| | 07:54 | solid color that matches our logo and it's
applied to all of the different section layouts.
| | 07:59 | In the next movie, we'll turn our
attention to these featured items for the tour
| | 08:04 | and convert them into a list.
| | Collapse this transcript |
| Creating lists| 00:00 | Now let's turn our attention to the
sidebar and apply some formatting to the
| | 00:04 | features for our specific tour.
| | 00:07 | These features that are listed here are
currently listed as separate paragraphs,
| | 00:10 | but it would look much nicer if
they were formatted as a list.
| | 00:14 | To do this, click one time on the
sidebar to select it. Then click once at the
| | 00:19 | beginning or at the end of those list
of items and then click and drag to
| | 00:23 | select all of the paragraphs of text.
| | 00:26 | To convert all of these separate
paragraphs into one single list, simply come up
| | 00:31 | to the Formatting menu, click the
dropdown menu, and select from one of the
| | 00:36 | different types of lists.
| | 00:37 | I am going to go ahead and choose Bullet.
| | 00:40 | The bulleted list applies a text bullet
out in front to the beginning of each of
| | 00:45 | the different paragraphs of texts.
| | 00:47 | It also then adds a little bit of space
between the bullet and all of the lines of text.
| | 00:52 | We could also choose an ordered list if
we wanted, by clicking the dropdown menu
| | 00:56 | and selecting something such as Legal.
| | 00:58 | When you select something like Legal,
if you select the second item and then
| | 01:02 | press the Tab key, you can see that
you can have ordered lists then have
| | 01:06 | additional sublists underneath of
them, so in this case 1 and then 1.1.
| | 01:12 | If I click at the end of that second
paragraph and simply hit Return, a new
| | 01:17 | bulleted item is automatically created
for me with the second item as 1.2 and I
| | 01:22 | could type in some text directly in there.
| | 01:25 | Let's go ahead and hit Command+Z on our
keyboard a couple times in order to get
| | 01:29 | back to our ordered list.
| | 01:31 | Then we'll simply click and drag to
select our whole list again and change it
| | 01:36 | back to a bulleted list.
| | 01:38 | To apply additional formatting to
our list, we can make sure we have our
| | 01:41 | Inspector open and go over to the
Text tab and then select the List tab
| | 01:47 | underneath of there.
| | 01:48 | The first item here is for Indent
Level, and when we have our bulleted list
| | 01:53 | where everything is just a single item,
then those are all Indent Level 1.
| | 01:57 | If we, for instance, click on the
second item and press the right-hand arrow,
| | 02:02 | that converts it to an Indent Level 2,
which is the same as hitting the Tab key.
| | 02:06 | I'll convert this back to an Indent
Level 1 and reselect my bulleted list to
| | 02:12 | continue adding formatting.
| | 02:14 | The next set of options allow us to control
exactly how our bullets and our list appears.
| | 02:19 | The default here is set for Text Bullets,
but if we click the dropdown menu, we
| | 02:24 | have a variety of other
different options to choose from.
| | 02:27 | Let's go ahead and select Image Bullets.
| | 02:29 | iBooks Author ships with a variety of
different images that can be used as bullets.
| | 02:35 | Here is a 3D Bullet, and you can see a
small slider here on the right-hand side
| | 02:39 | of the image that if you click down
below the small dot, it will allow you to
| | 02:43 | scroll down through the various
different options and then you can choose a
| | 02:47 | different bullet by simply clicking on it.
| | 02:49 | Here we can see a box with the check mark.
| | 02:52 | If you want to apply some formatting
to these bullets, you can adjust the
| | 02:56 | alignment of the bullet, meaning where
the bullet itself aligns with the text.
| | 03:01 | To see what this does, we'll simply
click the up arrow a few times next to
| | 03:05 | Alignment, and we can see that the
bullet itself is moving up vertically in
| | 03:10 | front of the first line of text.
| | 03:12 | If we use the down arrow then we can move
the bullets down below the first line of text.
| | 03:18 | I'm going to go ahead and reset this
value back to 0 and then hit Enter or
| | 03:22 | Return on my keyboard.
| | 03:23 | The next parameter is Size, and here
we can adjust the scaling of the bullet,
| | 03:28 | which is defaulted to 100%, and we can
shrink it down by typing in a percentage.
| | 03:33 | I'll go ahead and type in 80% and then
hit Enter or Return and we can see that
| | 03:38 | the bullets shrink down to a much nicer size.
| | 03:41 | If you have the next option checked of
Scale with Text, as you change the size
| | 03:45 | of the text here, the bullets will
automatically have the correct scaling
| | 03:49 | applied so everything
stays in correct proportion.
| | 03:52 | Let's go ahead and change our image
bullets to a custom image by selecting the
| | 03:56 | dropdown menu and choosing Custom Image.
| | 03:59 | Now we're asked to choose which image
that we want to apply as our bullet.
| | 04:03 | In the chapter 04 exercise files I've
included a star_bullet.png file, which is
| | 04:09 | a 16 x 16 pixel PNG file that has a
transparent background and a simple red
| | 04:15 | star in the middle.
| | 04:16 | I'll go ahead and select that item
and Click Open, and we can see a custom
| | 04:20 | bullet has been applied using our desired image.
| | 04:24 | And you can see that the size and
scaling has automatically been retained.
| | 04:28 | The next set of options here controls
the bullet indent, or how far from the edge
| | 04:33 | of the text box the bullets begin appearing.
| | 04:36 | The default is set to 0, which puts the
bullet out pretty tight to the outside edge.
| | 04:41 | I'd like to have my bulleted list show
up indented a little bit further, so I'll
| | 04:45 | go ahead and change my Bullet Indent by
clicking the up arrow a few times until
| | 04:50 | I get to 16. That moves my entire
bulleted list in from the outside edge,
| | 04:57 | creating a nice text effect.
| | 04:59 | The Text Indent then shows how much
spacing is between the bullet itself and the
| | 05:04 | text that is appearing tied to that bullet.
| | 05:07 | The default right now is set to 12
points, but I'll go ahead and increase that
| | 05:11 | up to 16 as well to add a
little bit of extra spacing in here.
| | 05:15 | That cleans things up even better.
| | 05:17 | Our bulleted list is coming along
quite nicely, but we have other several
| | 05:21 | sections that would be nice to have
these formats applied, and for that, we'll
| | 05:25 | use some custom styles and we'll
create those in the next movie.
| | Collapse this transcript |
| Creating custom styles| 00:00 | Now that our text is coming along in our
sidebar, let's go ahead and create some
| | 00:04 | custom styles to really see some of
the power behind the iBooks Author.
| | 00:09 | In order to work with our styles,
we want to make sure that we have our Styles sidebar out.
| | 00:13 | So if you don't have it, go ahead and
click on the button here in your toolbar
| | 00:17 | and make sure that it brings out to the side.
| | 00:19 | Next, we'll go ahead and create a custom
style for our first paragraph of text here.
| | 00:23 | This is going to be our sidebar description.
| | 00:26 | So I'll click one time on the Sidebar
and then click one time to have my cursor
| | 00:30 | appear inside of the first paragraph of text.
| | 00:33 | I don't have to have the
entire paragraph of text;
| | 00:36 | I just need to have my cursor
somewhere inside of that paragraph.
| | 00:39 | Then if we look over in our
Paragraphs Styles sidebar, we can click the
| | 00:43 | dropdown menu next to Objectives 2.
The default styling for this text is
| | 00:48 | automatically selected.
| | 00:50 | It's got a red dropdown menu,
indicating that there is a style mismatch.
| | 00:54 | If we click that dropdown menu, we can
then choose to create a new paragraph
| | 00:58 | style from the selection.
| | 01:00 | We'll go ahead and choose that option,
and for the Paragraph Style, we'll call
| | 01:04 | it our Sidebar Description.
| | 01:08 | We'll then click the OK button to
create a brand-new paragraph style.
| | 01:13 | To see how we would use this paragraph style,
we can simply click into the next section,
| | 01:18 | click your mouse on the text box, and
then click one time to drop your cursor
| | 01:23 | somewhere inside of the first paragraph.
| | 01:25 | Then simply scroll down in your
Paragraph Styles until you find your Sidebar
| | 01:29 | Description and click one time on it.
| | 01:32 | The Sidebar Description
style is automatically applied.
| | 01:36 | Let's go back to Section 1 and
let's create a style for our list.
| | 01:40 | Now with our List Style, there's two
types of styles that are being applied here.
| | 01:45 | One is the style that's being applied
just to the list itself, and the second is
| | 01:51 | a paragraph style describing all of
these paragraphs together as a grouping.
| | 01:56 | Let me show you what I mean.
| | 01:58 | Go ahead and click and drag a
selection to select your entire list.
| | 02:03 | You'll notice then over on your
selection sidebar, there is two red arrows:
| | 02:07 | one for the List Style which is Bullet,
and the other for the Paragraph Style
| | 02:12 | which is Objective 2.
| | 02:14 | Let's begin down at the
bottom with the List Style.
| | 02:17 | Click the red arrow and select
Create List Style from Selection.
| | 02:21 | When we do that, we'll get a sheet that
we'll pull down, and we're going to call
| | 02:26 | this our Sidebar Bullet List.
| | 02:30 | We'll go ahead and click OK and a
new Sidebar Bullet List is created.
| | 02:35 | Notice that there is our custom
star icon that's already been applied.
| | 02:40 | But when we look up at the top for
our Paragraph Styles, we can see that
| | 02:44 | Objective 2 still has its red arrow.
| | 02:46 | So we'll go ahead and click the dropdown
menu for the red arrow and create a new
| | 02:50 | paragraph style from that selection as well.
| | 02:53 | Now we're going to call this
one our Sidebar List Paragraph.
| | 02:58 | We'll go ahead and click OK and that
new paragraph style has been created.
| | 03:04 | Now, how do these two work
in concert with each other?
| | 03:07 | Well, let's say we've got the
paragraphs aligned here, but we would like to
| | 03:11 | tighten up the spacing that
shows up in between the paragraphs.
| | 03:15 | With all of those paragraphs selected,
we can come up to our Formatting menu and
| | 03:20 | under this option, instead of having our
Line Spacing set at 1.1, let's go ahead
| | 03:24 | and set it down to 0.8. That tightens
up the line spacing, and if we notice in
| | 03:30 | our sidebar over here that our
Sidebar List Paragraphs has the red arrow
| | 03:34 | indicating that we've changed the
paragraph style, but we've not changed our
| | 03:39 | Sidebar Bullet List.
| | 03:40 | So we'll go ahead and click the
dropdown menu here and Redefine Style from
| | 03:44 | Selection, and now our selection has
that new line spacing applied to it.
| | 03:49 | Let's go ahead and apply that
line spacing to the next section.
| | 03:52 | We'll go ahead and click in the next
section, we'll click once on the text box
| | 03:56 | to select it, then we'll click our
mouse inside and then click and drag a
| | 04:00 | selection over top of all the text.
| | 04:02 | We can then simply come up to the top,
scroll down to our Paragraph Style, and
| | 04:07 | select Sidebar List Paragraph.
| | 04:09 | We'll click one time on that and
we'll apply both styles at one time.
| | 04:14 | Here, we've applied the paragraph
style which has things like the line
| | 04:18 | spacing between the paragraphs, and
because that paragraph style had the list
| | 04:22 | style applied within it, we're
also getting our Sidebar Bullet List
| | 04:26 | parameters as well.
| | 04:28 | Let's go back to Section 1 and let's
deal with our bottom sidebar details.
| | 04:33 | Go ahead and click inside the text box,
then click once in front, and then click
| | 04:38 | and drag to select all of the details.
| | 04:42 | We'll notice that once again,
we have a mismatch of our styles.
| | 04:45 | So we'll click the red dropdown menu
for Objective 2, and we're going to create
| | 04:49 | a new paragraph style, and we're going to
call this our Sidebar Details, and click OK.
| | 04:57 | Now with our Sidebar Details style
created, we can go ahead and select all of
| | 05:01 | that text and apply a change that will
affect our style. So we can come up here
| | 05:06 | to the top and change the Line
Spacing from say down from 1.1 down to 0.6.
| | 05:11 | That will tighten up the line
spacing in between those items.
| | 05:15 | Now, it would be even better if we had
some differentiation between our labels
| | 05:20 | and the text description for
those labels in our Details section.
| | 05:24 | So to do this, we use a character style.
| | 05:27 | So select the first label,
which is Tour Difficulty:--
| | 05:31 | and don't forget to include the colon.
And then we'll go up to the top and we'll
| | 05:35 | simply change the color of that text.
| | 05:37 | We'll click on the color swatch, we'll
click on the color changer, and then we'll
| | 05:41 | select maybe this nice red color.
| | 05:43 | With that whole line still
selected, you'll notice that we have a
| | 05:46 | character style mismatch.
| | 05:48 | We can click the dropdown menu here and
create a new character style from this selection.
| | 05:53 | A character style allows us to
control text within another style.
| | 05:58 | So now we'll set the name of this
character style to Sidebar Details Label, and
| | 06:07 | we'll go ahead and click OK.
| | 06:09 | Now we can apply that character
style to the other labels within our
| | 06:13 | Sidebar Details section.
| | 06:15 | So we'll go ahead and select the next
one, scroll down, apply the Sidebar Label
| | 06:19 | Details, and repeat that
for the other detail labels.
| | 06:24 | Now let's go ahead and
apply these styles to Section 2.
| | 06:27 | We'll go ahead and click on Section 2
and then we'll click one time in our text
| | 06:31 | box, then click a second time to drop
our cursor at the end of the text, and then
| | 06:35 | click and drag to select
the entire Details section.
| | 06:39 | We'll then come up to the Paragraph
Styles, scroll down until we find our
| | 06:42 | Sidebar Details, click once
on that to apply that style.
| | 06:46 | Now it looks like our line spacing
didn't apply, so we'll need to make sure that
| | 06:51 | our line spacing is set correctly.
| | 06:53 | So we'll click the dropdown menu here,
we'll change it back to 0.6, and now
| | 06:57 | with our Sidebar detail mismatch, we'll
click the dropdown and Redefine from Selection.
| | 07:02 | That will make sure that our first
paragraph is still set correctly.
| | 07:07 | Now we'll go ahead and apply the
character style to each of our labels.
| | 07:10 | So we'll click inside of the text box
and then select our first label and then
| | 07:15 | go ahead and apply our Sidebar labels.
| | 07:18 | Now here's where the power of using these
character styles really comes into play.
| | 07:23 | If all of a sudden we decide that we
don't like the red color on all of these
| | 07:27 | labels, we don't need to go back and
reapply a color change independently to
| | 07:31 | every single one of these labels.
| | 07:32 | We can simply click inside any one of
the labels, then we can go up to our color
| | 07:37 | picker and change the color to
maybe this darker gray color.
| | 07:42 | We'll see that we have a
character style mismatch.
| | 07:44 | We can click the dropdown menu and
choose the Redefine Style from Selection.
| | 07:49 | And now instantly, all of our labels on
both of our pages are now redefined to
| | 07:55 | use that new color and that new style.
| | 07:57 | Now after we've applied all of these
different styles, our text is looking
| | 08:01 | pretty good, but if we compare the
Channel Islands Excursion text with our Big
| | 08:05 | Sur Retreat text, you'll notice that
there is a difference here. In the Big Sur
| | 08:09 | Retreat text, remember we added an
offset for our text box and applied it so
| | 08:14 | that doesn't show up right
against the edge of the text?
| | 08:16 | But when we go on to the Channel Islands
Excursion, that offset didn't get applied.
| | 08:20 | That's because the offset is applied to
the entire text box, not to an individual
| | 08:24 | paragraph style, character style, or list style.
| | 08:28 | So in order to address that, let's go
back to the Big Sur Section 1, click one
| | 08:32 | time on our text box, and bring up the Inspector.
| | 08:35 | We'll then change our Inset
Margin from 5 points back down to 0.
| | 08:39 | We'll then click to deselect the text box.
| | 08:42 | We'll then go back up to the top and
pull down our layouts and go into the
| | 08:46 | Section Back Pack Layout.
| | 08:48 | We'll then click once on the text box,
and now we'll set our Inset Margin.
| | 08:52 | Let's go ahead and set our
Inset Margin back up to 5 points.
| | 08:55 | That will bring the text just off of
the edges of the box all the way around.
| | 08:59 | We can then apply the changes and then
go down and look and see how it looks.
| | 09:04 | We'll go ahead and move our sidebar
back up and our Big Sur text box has the
| | 09:08 | Inset Margin applied, and so
does our Channel Island sidebar.
| | 09:13 | Go ahead and apply all of these styles to the
rest of the sections inside of this chapter.
| | 09:18 | By using character styles, list styles,
and paragraph styles to control the
| | 09:23 | formatting of your documents inside of
iBooks Author, you'll save yourself a
| | 09:27 | lot of time when you have to format
an entire book and make everything look
| | 09:31 | seamless and work together.
| | Collapse this transcript |
| Controlling tabs| 00:00 | Now let's explore using tabs and tab
stops inside of an iBooks Author document.
| | 00:05 | I'm inside of the Big Sur Retreat
section of our Explore California Travel
| | 00:10 | Guide, and for this example, let's go
ahead and select all of the text inside of
| | 00:15 | the right-hand side of the page.
| | 00:17 | Then make sure your Inspector is open
to the Text tab and then select the Tabs
| | 00:21 | section of that tab.
| | 00:23 | The top three parameters are for the
basic paragraph indents, and we can change
| | 00:28 | these parameters by using the up and
down arrows or by typing in a value, as
| | 00:33 | we've seen in other movies.
| | 00:34 | Let's go ahead and start with the first line.
| | 00:37 | Click and hold the up arrow and
you'll see that the first line of each
| | 00:40 | paragraph becomes indented.
| | 00:43 | You'll also notice that up here in the
Rulers that this small horizontal line,
| | 00:47 | which indicates the first line tab stop,
is moving along with these parameters.
| | 00:53 | You can also change the first-line
indent by simply clicking and dragging this
| | 00:58 | slider and adjusting the first-line
indent to the location that you want.
| | 01:02 | I'll go ahead and drag it back to the
left-hand side, which resets the value
| | 01:06 | over here back to 0.
| | 01:08 | Next, let's look at the Left Indent.
| | 01:11 | Again, I'll use the up arrow to
increase the value of the Left Indent.
| | 01:15 | As I do, you'll notice that the effect
that's created is what's called a hanging
| | 01:20 | indent, where the first line of the
text is still parked out here on the
| | 01:25 | left-hand edge of the text box, but
each additional line past the first line of
| | 01:29 | the paragraph is indented
according to the value that's set here.
| | 01:33 | In the Rulers, we can see that this
small downwards-pointing triangle is what's
| | 01:37 | indicating the left-hand tab stop.
| | 01:40 | We can once again, click and drag
this and it will drag the entire block of
| | 01:44 | paragraph text, and it will keep a relative
adjustment compared to the first-line indent.
| | 01:49 | Let's go ahead and move this back into place
and then reset the value of this back to 0.
| | 01:54 | We'll hit Enter or Return on our
keyboard to accept that new value.
| | 01:58 | The final option for tab stops here in
the Inspector is the right-hand tab stop,
| | 02:03 | and once again if we increase the value
for that one, it's a little hard to see
| | 02:07 | initially, but the right-hand side is moving.
| | 02:10 | We can see this effect a little bit more
dramatically if we fully justify our text.
| | 02:15 | Now, as before, if we move this
triangle at the top, we can see that the
| | 02:19 | right-hand edge is adjusting
along with the values in that area.
| | 02:23 | I'll go ahead and drag it back over
to the right-hand side, which resets
| | 02:27 | the value back to 0.
| | 02:29 | If we add an additional line of text
to the bottom here, by simply clicking in
| | 02:33 | the bottom and hitting Return, and then
hit the Tab key, the default spacing for
| | 02:39 | that first tab stop is indicated
right here by the default tab stop.
| | 02:44 | If we want to control where our default
tab stop is located, we can simply come
| | 02:49 | up here to our ruler and we can click
anywhere in between the first and the
| | 02:53 | ending tab stop and that will
automatically create an initial tab stop.
| | 02:58 | We can adjust where that tab stop
aligns by moving it, and we'll see a
| | 03:03 | vertical line, which indicates where
the tab stop is going to apply that tab
| | 03:06 | to our text down in the bottom.
| | 03:08 | If we want to get rid of a particular
tab stop, we can simply grab it and drag
| | 03:12 | it off of our ruler and when we let go,
the tab stop disappears in a puff of
| | 03:17 | smoke and the tab stop
returns back to the default setting.
| | 03:21 | I'll go ahead and deleted that tab line.
| | 03:24 | The next option here is for Decimal
Tab Character, and that's used to align
| | 03:30 | special characters after a tab has been created.
| | 03:33 | Let's have a look at how to use this.
| | 03:35 | In our Sidebar Details section,
we have some specific values in here for our
| | 03:41 | tour price, our bonus night, and our gift pack.
| | 03:44 | And it will be nice if all of these values
align so that the decimal places all aligned up.
| | 03:49 | I'll go ahead and click inside that
sidebar one time to select it, then click a
| | 03:53 | second time to enter into the sidebar,
and then click and make a selection of all
| | 03:57 | three of those lines of text.
| | 03:59 | Now we'll come over to my Tab Stops
section and I'll click the Plus sign at the
| | 04:03 | bottom to create a brand-new tab stop,
and I'm going to click Decimal as the type
| | 04:08 | of tab stop that I would like to use.
| | 04:10 | If we look up inside of our ruler now,
we can see that there is a new type of
| | 04:15 | tab stop which is this decimal point.
| | 04:17 | We can take and drag that tab
stop over to the right-hand side.
| | 04:21 | We'll move it over to approximately 200 pixels.
| | 04:24 | Now nothing is yet changed because we
don't have tabs indicated inside of our text.
| | 04:29 | But if we click in between of our Tour
Price and the Dollar sign and then simply
| | 04:33 | hit the Tab key, the decimal point is
going to a line directly with the decimal
| | 04:38 | point here in our ruler.
| | 04:40 | We'll repeat that process by inserting
a tab in front of the dollar sign for
| | 04:44 | each of these items and now
our decimal points all line up.
| | 04:48 | If we want to adjust that, we can
simply select all three paragraphs of text,
| | 04:52 | then come up to the top and we grab our
decimal point and we can move the text
| | 04:57 | to any location that we would like, and
then when we're finished making our move,
| | 05:01 | we can release to make
that change to take place.
| | 05:03 | Now something to note: if I move my
Inspector over to the side and I notice
| | 05:09 | that my Sidebar Details has a
Paragraph Style applied to it and there is a
| | 05:14 | paragraph mismatch,
| | 05:15 | if I were to change these paragraphs
settings here to apply the new settings,
| | 05:20 | we would end up removing some of our
character styles that we've applied separately.
| | 05:25 | So we don't want to use
paragraphs styles to replicate this.
| | 05:28 | Unfortunately, you'll need to go down
to each of the additional pages, click
| | 05:32 | inside of the text box and select it,
and apply these custom tab stops to
| | 05:37 | each individual item.
| | 05:39 | We'll go ahead and do one here
so you can see how we're doing it.
| | 05:42 | We'll move our decimal place over
and then we'll insert our tab stops.
| | 05:47 | Go ahead and repeat that
process for the additional sections.
| | 05:50 | In the next movie, we'll finish up
with a little more text formatting.
| | Collapse this transcript |
| More on text control| 00:00 | Now let's have a look at some of the
additional items that you can control
| | 00:04 | with controlling text.
| | 00:06 | To access some of these items,
make sure you have your Inspector open on the
| | 00:10 | Text tab and then go over
to the section for more.
| | 00:13 | Here you'll find a variety of other
different parameters that we can control.
| | 00:17 | The first parameter that we want to
control is going to be the Borders & Rules.
| | 00:21 | And the thing that we need
to fix is here in our sidebar
| | 00:24 | we can see where we have the word
"Overview" and underneath of it there's a very
| | 00:28 | faint horizontal rule.
| | 00:29 | It's really hard to see because the
color of the line is such that it's not
| | 00:33 | contrasting well enough with the
background color that we chose.
| | 00:36 | We can go ahead and fix by pulling
down our Layout sidebar and selecting the
| | 00:40 | Section Backpack layout.
| | 00:43 | We'll then double-click on
our Overview text to select it.
| | 00:47 | And then over in our More tab, let's
begin by changing the color of that line.
| | 00:53 | We'll go ahead and click on the color
chip and then on our Color window, we'll
| | 00:56 | pull the slider all the way down to
the bottom to turn the line black.
| | 01:00 | Now we can see the horizontal rule much better.
| | 01:03 | We'll go ahead and close our Colors
window, and let's explore some of the other
| | 01:06 | options that we have here
for formatting this line.
| | 01:10 | The first option that we have is the
pattern of the stroke of the line itself.
| | 01:14 | We can choose to have no line
whatsoever or we can choose to have either a dashed
| | 01:19 | line or dotted line.
| | 01:22 | I like having just a plain solid line,
| | 01:24 | so I'm going to go ahead and
reselect the Solid Line option.
| | 01:27 | Underneath that, we can choose how we want
the lines to appear around the paragraph.
| | 01:33 | The first option here is to have the
line appear above our line of text.
| | 01:38 | The second option allows us to make
that line appear below the line of text.
| | 01:43 | The third option makes a line appear
both above and below. And of course, the
| | 01:47 | fourth option encloses the paragraph
entirely in the line on all four sides.
| | 01:52 | For this particular treatment of text,
I like simply having the underline there,
| | 01:56 | so I'll go ahead and
reselect the simple Underline.
| | 01:59 | Next, we can control the thickness of
the line by changing this point value here.
| | 02:05 | If we increase the thickness, you'll
that the line gets much darker and thicker.
| | 02:09 | Then if we change that value down to a lower
value, we can get the line to be nice and thin.
| | 02:14 | I like the value set to approximately 0.5,
| | 02:18 | so it adds a nice design element to the
text here and creates a nice separation,
| | 02:23 | but it's not overpowering.
| | 02:24 | Next we can control the Offset of the line.
| | 02:27 | Now the Offset describes the spacing
that's in between the text and the line itself.
| | 02:32 | If we increase that offset, we can
see that we can increase a little bit of
| | 02:36 | extra space in between that text and open it up.
| | 02:40 | Likewise, we can decrease the value to
bring the line up closer to the text and
| | 02:45 | even bring it all the way down so
that the line touches right at the text.
| | 02:49 | I like having the offset of this
to open up just a little bit more,
| | 02:53 | so I'm going to set mine to a value
of +2 and simply type that in and press
| | 02:57 | Enter or Return on the keyboard to accept it.
| | 02:59 | That's going to open up the spacing in
here a little bit more but not so much
| | 03:03 | that it becomes distracting.
| | 03:05 | Let's go ahead and apply those changes
now to all of the rest of our pages that
| | 03:09 | are using this template.
| | 03:10 | We'll click the Apply Changes button
and we'll close up the layout sidebar
| | 03:15 | and now when we look at our work,
we can see that the sidebar has the
| | 03:19 | horizontal rule applied to it.
| | 03:20 | Let's go ahead and click inside of one
of our text fields over here on the right
| | 03:24 | and select the entire first
paragraph of text, so we can explore the next
| | 03:29 | section, which is Background Fills.
| | 03:31 | Background fills can be applied in
one of two formats: either character
| | 03:35 | or paragraph styles.
| | 03:36 | I'm going to go ahead and check the box
for Paragraph Styles and then change the
| | 03:41 | color of that fill to maybe this nice orange.
| | 03:45 | When I deselect the text, we can
see that the entire paragraph of text,
| | 03:50 | from start to finish, is highlighted in the
color that we've chosen for that paragraph.
| | 03:56 | If I select an individual word or a
couple of words inside and then check the
| | 04:02 | box for Character and deselect,
| | 04:04 | you can see that only those words
or those characters are having the
| | 04:08 | background fill applied to it.
| | 04:10 | Let's go ahead and reselect both
of those and uncheck the boxes for
| | 04:15 | character fill and then select the
entire paragraph again, and then uncheck
| | 04:19 | the box for paragraph fill.
| | 04:20 | The next option allows us to set the
type of style that's going to follow the
| | 04:26 | paragraph that we're currently working in.
| | 04:28 | So for instance, with the Following
Paragraph Styles set to Same, if I simply
| | 04:33 | type Return and begin typing, the new
paragraph automatically has the same style
| | 04:39 | applied to it as its preceding paragraph.
| | 04:42 | I'll go ahead and delete that text
and I'm going to change the Following
| | 04:46 | Paragraph Style to something like Block Quote.
| | 04:49 | Now when I hit Return and begin typing,
we can see that the paragraph style
| | 04:56 | of Block Quote has been applied to this new
paragraph and the default setting returns to Same.
| | 05:02 | So if I hit Return again and keep typing,
the new paragraph retains the settings
| | 05:07 | for the Block Quote.
| | 05:08 | I'm going to go ahead and press Command+Z
on my keyboard to undo all of those changes.
| | 05:14 | The next section here allows us here
to control breaking of pages and how
| | 05:18 | they're controlled when we have text
that's going to flow from one page to another.
| | 05:23 | With these options selected, we could
choose to keep the lines of text together.
| | 05:28 | So if we have a grouping of text here
and we have to Keep Lines Together and we
| | 05:34 | add a few extra line returns down here,
as soon as we're ready to go to the next
| | 05:39 | page, if we hit Return one more time,
the entire paragraphs moves down.
| | 05:43 | If I delete one time, that entire
paragraph moves back up, keeping all of those
| | 05:48 | lines of text together.
| | 05:50 | I'll delete those paragraph returns,
reselect my text, and uncheck the Keep Lines Together.
| | 05:57 | We can then choose to select a
particular line of text and choose the option to
| | 06:02 | keep with the following paragraph.
| | 06:05 | So in this case, if I start hitting
Return a few times, we'll notice that these
| | 06:09 | lines of text hang together and all
jump onto the new page at one time.
| | 06:14 | I'll hit Command+Z a few times to undo that.
| | 06:19 | If we select the whole next paragraph
and choose Paragraph Starts on a New Page,
| | 06:23 | that new paragraph will automatically
jump over to the new page, leaving us room
| | 06:28 | to apply some additional
content here inside of this section.
| | 06:32 | I'll go ahead and uncheck
that to move the paragraph back.
| | 06:36 | The last option here allows us to
prevent widowed and orphaned lines.
| | 06:40 | Let's go a little setup here.
| | 06:42 | I'm going to go ahead and select this
last paragraph of text and uncheck the
| | 06:46 | box for Prevent Widow and Orphan Lines.
| | 06:49 | Then I'm going to press Command+C on
my keyboard to copy that paragraph.
| | 06:53 | And at the end of that paragraph,
I'm going to simply hit Return and paste two
| | 06:57 | more copies of the paragraph in place.
| | 06:59 | And then I'm going to scrub back to
the first page, so we can see that all of
| | 07:03 | this text is flowing from one page to the next.
| | 07:06 | In our third paragraph down,
right before the word "If" in "If you're
| | 07:11 | prepared," I'm going to hit a line
return right there as well so that we can
| | 07:16 | break that into a new paragraph.
| | 07:18 | Now I'm going to come up in front of
the first paragraph that we copied and
| | 07:22 | press Return two times.
| | 07:25 | And we can see that this paragraph here
is wrapping so that one line of text is
| | 07:30 | appearing here at the top of the page.
| | 07:33 | If we select all of this text and we
change the option to prevent widowed and
| | 07:38 | orphaned lines then iBooks Author will
keep all of the text on the one line
| | 07:44 | rather than leaving just one line up here.
| | 07:47 | Again, we can toggle it to see what happens
and turn it back on to see that it goes away.
| | 07:52 | So that's what Prevent
Widow and Orphan Lines does.
| | 07:56 | It's very helpful when you
have a lot of text laid out.
| | 07:58 | I'm going to press Command+Z on my
keyboard several times now to get back to the
| | 08:03 | point where I have my text lined out.
And the last time I hit Command+Z my
| | 08:07 | Prevent Widow and Orphan
line should be rechecked again.
| | 08:11 | You can also select the default
language for a particular paragraph, or for an
| | 08:15 | entire document, right from here.
| | 08:17 | By changing the language, you can
set the spell checker and other special
| | 08:20 | characters to be already set
up for that particular language.
| | 08:24 | The next section, Remove Hyphenation
in Paragraphs, is on by default usually.
| | 08:29 | To see this in action, I'm going to go
ahead and increase the zoom up to about
| | 08:33 | 150% and then I'm going to scroll my
page over to the right-hand side and
| | 08:38 | scroll down a little bit so we can see this
right-hand edge of all of our text very clearly.
| | 08:42 | And then, when I have both paragraphs of
text selected and I uncheck the box to
| | 08:48 | Remove Hyphenation, we'll see that
hyphens are automatically inserted into a few
| | 08:53 | places within the document.
| | 08:55 | Simply checking the box again
makes the hyphenation go away.
| | 08:59 | For removing ligatures,
it's helpful to see this also zoomed in.
| | 09:03 | So at the end of my last paragraph, I'm just
going to simply hit Return to start a new line.
| | 09:08 | Then I'm going to change the
font for the new line to Palatino.
| | 09:12 | Ligatures do not appear for all fonts,
| | 09:15 | but they do for certain fonts, such as Palatino.
| | 09:18 | I'm going to type in two characters, just
FI, and I'm going to ahead and zoom that
| | 09:23 | in even further so we can
really see what's going on here.
| | 09:26 | I'm going to zoom in to about 300%, and
then scroll down on the page and scroll
| | 09:32 | over so that we can clearly
see these two letters onscreen.
| | 09:37 | With those two letters selected, if I
check the box for Remove Ligatures, you
| | 09:43 | can see a very slight change that takes place.
| | 09:46 | The bar on the F and the
top of the I become separated.
| | 09:50 | If we uncheck the box, you can see
that the font is tying those two letters
| | 09:55 | together, making a nice clean view of the font.
| | 09:58 | This effect only appears between
certain letters on certain fonts,
| | 10:02 | so it's something that, as a part of
your book, if you'd like to have it appear,
| | 10:06 | you can leave it unchecked.
| | 10:08 | However, if you do want to have the
separation, you can always check the box
| | 10:12 | and see the separation.
| | 10:13 | I'm going to go ahead and
delete those characters.
| | 10:16 | Hit Delete on my keyboard one
more time to take me back to the
| | 10:20 | previous paragraph.
| | 10:21 | And I'm going to change my zoom back out to 75%.
| | 10:24 | Now let's go ahead and look at Baseline Shift.
| | 10:28 | To look at Baseline Shift, we can simply
select any single character in our page
| | 10:33 | and then adjust the Baseline Shift by
moving that character up out of the normal
| | 10:38 | flow of the text or back down.
| | 10:41 | Now where would you actually apply this?
| | 10:43 | Well, I'm going to reset that back to zero.
| | 10:45 | I'm going to come at the end of that
line and hit Return and I'm going to give
| | 10:49 | you a couple of examples.
| | 10:50 | First of all, will be something like
H2, which is the chemical symbol for water.
| | 10:55 | If I go ahead and I select the 2,
I can move the baseline for that character
| | 10:59 | down and have it appear down lower
than what the two characters here are.
| | 11:05 | Likewise, if I typed in something like X2,
I could then select the 2 and move
| | 11:12 | the baseline up to have it
appear higher on the list.
| | 11:16 | Now this is quite helpful when you're
trying to write chemical formulas or
| | 11:20 | you're trying to write math equations.
| | 11:21 | But if you were trying to really write
in an X squared, it would be much more
| | 11:25 | effective to be able to use a
superscript or if you're trying to write H2O, to
| | 11:30 | use a subscript. So to demonstrate that,
I'm just simply going to hit space and
| | 11:34 | type those two things again: H2O, space, X2.
| | 11:38 | Now to make the number 2 in H2O a
subscript, I'll go ahead and select,
| | 11:44 | I'll go up to the Format menu, go down
to Font, and go over the Baseline, and now
| | 11:49 | I can select Subscript to make H2O
both change the font size and be an
| | 11:56 | appropriately sized subscript.
| | 11:59 | Likewise for the superscript of X2, to make
an exponent, I'll go ahead and select that,
| | 12:04 | go up to the Format menu > Font
and select Baseline > Superscript.
| | 12:09 | That will make it an
appropriately size X squared.
| | 12:13 | So with Baseline Shift, you can
manually control the baseline for individual
| | 12:17 | objects if you need to, or you can
use some of the predefined ones, such as
| | 12:20 | Subscript and Superscript, and you
can access those from the Format menu.
| | 12:24 | I'll go ahead and select this line of
text and delete it and hit Delete one more
| | 12:28 | time to return back to my previous line of text.
| | 12:30 | Those of the some other ways that you
can control the layout and the flow of
| | 12:35 | text within your documents.
| | Collapse this transcript |
| Embedding equations with LaTeX| 00:00 | New in iBooks Author 2 is the
ability for you to add beautifully rendered
| | 00:04 | equations to your books, written
with the LaTeX and MathML Markup languages.
| | 00:10 | iBooks Author supports all the common
LaTeX commands that can be converted to
| | 00:15 | MathML with the Blahtex engine.
| | 00:18 | To add an equation to your page, first
select the location where you want to add
| | 00:22 | the text. Then, simply go up to the
Insert menu and select Equation. Or, press
| | 00:30 | Command+Option+E. The Edit Equation
sheet will then pull down and you can begin
| | 00:37 | editing your equation.
| | 00:38 | Now, there's two things to note.
| | 00:40 | First of all, this is not a course on
either of these two Markup languages.
| | 00:45 | But we will step through the process of
creating an equation so you know all of
| | 00:49 | the steps that are required in iBooks Author.
| | 00:52 | The second thing to note, is that
normally when inserting LaTeX code, you would
| | 00:57 | normally need to begin by enclosing
your equation in Markup to indicate that
| | 01:02 | you're entering Math mode.
| | 01:04 | However, in iBooks Author, by going
up to the Insert menu and selecting
| | 01:09 | Equation, you're already in the Math mode.
| | 01:12 | So you can skip this entire part of your Markup.
| | 01:15 | Now, let's go ahead and begin by
adding a fairly common equation.
| | 01:19 | We are going to add the equation x=-b, + or
- the square root of B squared -4AC, over 2A.
| | 01:28 | To create this equation using
LaTeX, begin by simply typing in x=.
| | 01:34 | You'll notice that as we type the
LaTeX commands into the equation at the top,
| | 01:41 | those commands are automatically
rendered in the bottom down here to show us
| | 01:45 | exactly how our equation is going to look.
| | 01:48 | Next, we'll need to add some
curly braces to create a grouping.
| | 01:51 | I always like to add both the opening
and closing braces each time I add one,
| | 01:56 | that way I don't forget to close a curly brace.
| | 01:59 | We'll move our cursor back inside of
those curly braces and we'll type
| | 02:04 | -b\pm for plus or minus.
| | 02:09 | Notice, that at the bottom, we're still
getting our rendering of our equation.
| | 02:13 | Things are looking pretty good.
| | 02:14 | Let's go and add the square root sign.
| | 02:16 | We'll do that by typing \sqrt and
then create a new set of curly braces.
| | 02:24 | Notice as we close our curly brace, the
square root sign appears in the bottom.
| | 02:27 | We'll go inside of those curly
braces and now we'll type in b, the caret
| | 02:33 | symbol, which is usually Shift+6 on your
keyboard, and then the number 2 to raise
| | 02:39 | b to the second power.
| | 02:40 | We'll then add -4ac and all
of that is rendered perfectly.
| | 02:46 | We'll then go outside of that set
of curly braces and we'll continue
| | 02:50 | typing our equation.
| | 02:52 | Let's go ahead and add a space to separate
our equation out, and then type in \over space 2a.
| | 03:00 | Our equation is now complete.
| | 03:02 | We can now go ahead and insert this directly
into our document by pressing the Insert button.
| | 03:07 | Our equation is added to our page.
| | 03:09 | Let's go ahead and hit Return to make
sure that our equation is on its own line.
| | 03:13 | Then, let's apply some formatting to it.
| | 03:15 | Go ahead and click one time on the
equation and go up to the Dropdown menu
| | 03:20 | for Font Size in your toolbar and select a
font size that's appropriate for your document.
| | 03:25 | I'll go ahead and select 36.
| | 03:27 | That looks pretty good.
| | 03:29 | One more tweak, let's go
ahead and center this equation.
| | 03:32 | That's looking much better.
| | 03:33 | Now if we need to make a change to our
equation, all we need to do is simply
| | 03:37 | double-click the equation to
bring back the Edit Equation sheet.
| | 03:41 | We can then go ahead and make a
change such as making this -4B.
| | 03:44 | We'll then click the Update button
and our equation appears beautifully
| | 03:50 | rendered on our page.
| | Collapse this transcript |
| Embedding equations with MathType| 00:00 | New in iBooks Author 2 is the ability
for you to use the MathType application
| | 00:06 | to create equations and have them perfectly
rendered in beautiful type directly in your iBook.
| | 00:12 | To follow along with this movie, you'll
need a copy of the MathType application,
| | 00:17 | which you can download a free
30 day trial of from www.dessci.com.
| | 00:26 | To use MathType to help you create your
equations, you first need to tell iBooks
| | 00:30 | Author that you want to use
MathType 4 Equation editing.
| | 00:34 | To do this, simply go up to the
iBooks Author menu and go down to
| | 00:39 | select Preferences.
| | 00:40 | Then on the General tab, simply come
down to where it says Equations and
| | 00:45 | check the box for Insert and
edit equations with MathType.
| | 00:50 | Then, go ahead and close the Preferences.
| | 00:52 | And now, you can find the location in your
book where you want to insert your equation.
| | 00:57 | Click inside the text to insert your
cursor and then simply go up to the Insert
| | 01:01 | menu and select Equation.
| | 01:04 | You can also press Command+Option+E.
This will automatically open up the
| | 01:08 | MathType Equation editor for you.
| | 01:10 | Now, this is not a training title on
how to use the MathType Equation editor
| | 01:14 | but we'll step through a quick
process of creating an equation and adding
| | 01:18 | it into the document.
| | 01:20 | With MathType, you're able to add an
equation in one of two ways. Either to
| | 01:25 | build it step by step, or to start
with one of these predefined options.
| | 01:30 | Let's go ahead and start
with this option right here.
| | 01:33 | Simply click on the functional group,
and that entire functional group appears
| | 01:36 | down here in the bottom.
| | 01:38 | We can edit this by simply clicking
anywhere inside of the item and then, typing
| | 01:43 | in a number, such as a 2.
| | 01:45 | If we want to create our own
functional group, we can simply click at the end
| | 01:48 | of this text and then, press the + sign on your
keyboard, and now let's add a similar function.
| | 01:55 | To do this, we'll start by adding the fraction.
| | 01:58 | We'll come up here to the second row
and click on this button and then, select
| | 02:02 | the Fraction item, which is the first item.
| | 02:05 | You'll notice that we have two spaces
available for us to begin creating our
| | 02:09 | equation inside the
numerator and the denominator.
| | 02:13 | Let's start in numerator.
| | 02:14 | We'll begin by entering the same
information that we see over here.
| | 02:18 | -2b, to get the plus or minus, you
simply come up here to the top to find that
| | 02:24 | function, select the dropdown menu
and click on the item that you want, in
| | 02:28 | this case plus or minus.
| | 02:30 | Next, we'll add a square root.
| | 02:32 | The square root is located
down here in the third row.
| | 02:35 | Simply click on that, and you'll see
once again, we have the space to be able to
| | 02:39 | edit the information.
| | 02:40 | Let's go ahead and change things
up a bit and we'll make this 3b.
| | 02:45 | Now, we need to make this to the power of 2.
| | 02:48 | We do that by coming up here and
clicking on the Superscript button.
| | 02:51 | We can then type in a 2 and then to
get back down to the lower level of text,
| | 02:55 | we'll simply click at the end of that line.
| | 02:57 | Now, we can continue with the equation, -4ac.
| | 03:02 | Next, we'll add the denominator.
| | 03:04 | So, simply click down in the
denominator field and then we'll add the 2a
| | 03:09 | down there as well.
| | 03:11 | Now, that our equation is setup the way
that we want it, we can go ahead and add
| | 03:15 | this directly into our iBook by
simply closing the MathType window.
| | 03:19 | When we click the Close button, we'll
get a dialog box that will ask us, if we
| | 03:24 | want to save changes to this
equation from iBooks Author.
| | 03:27 | Simply go ahead and click the Yes button
and you'll notice that your equation is
| | 03:31 | added directly into your document.
| | 03:34 | Now, the equation is a little hard to
see, so go ahead and hit Return once to
| | 03:38 | move our text down to the next line
and then click one time on the equation.
| | 03:43 | You'll notice that when we select the
equation, the entire equation is selected
| | 03:47 | as if it's an individual object.
| | 03:49 | We can then change the font size by
coming up here into our toolbar and
| | 03:53 | selecting a new font size.
| | 03:55 | I'll go ahead and select 36;
| | 03:57 | That makes the equation nice
and clear and easy to read.
| | 04:01 | Now, let's say you needed to
make a change to this equation.
| | 04:04 | All you need to do is simply double-
click on the equation itself and the
| | 04:08 | equation automatically re-
opens inside of iBooks Author.
| | 04:12 | Now, we can change a parameter such as
instead of being -2b, we will make it -3b.
| | 04:18 | Once again, we can close the MathType
window or, asked if we want to save the
| | 04:22 | equation, we'll say Yes, and the change is
reflected back in our iBooks Author document.
| | 04:29 | There are many options available to
you, and I encourage you to explore the
| | 04:32 | MathType application.
| | Collapse this transcript |
|
|
5. Working with ObjectsUnderstanding objects| 00:00 | As you lay out your book in iBooks Author,
a key concept that you need to grasp
| | 00:04 | is the use of objects.
| | 00:05 | Now, iBooks Author considers anything
that you place on a layout to be an object.
| | 00:10 | This include shapes, charts or graphs,
photographs, tables of data, interactive
| | 00:17 | widgets that include things such as
movies. Even text boxes are considered to be
| | 00:22 | an object when they're placed on
a page inside of iBooks Author.
| | 00:27 | Now, all objects have a variety of
different properties associated with them
| | 00:31 | that can all be
controlled through the Inspector.
| | 00:34 | And there's three primary
Inspectors that control nearly all objects.
| | 00:39 | The first of these is the Graphics Inspector.
| | 00:42 | The Graphics Inspector controls
properties such as the object's fill, its
| | 00:46 | stroke, any drop shadows that are applied
around the object, and the opacity of the object.
| | 00:53 | The next Inspector is the Metrics
Inspector, and this one controls the size of
| | 00:58 | the object, the position that object is
placed on the page, and even the rotation
| | 01:04 | and orientation of that object.
| | 01:06 | The last inspector that controls
nearly all objects is the Widget Inspector.
| | 01:12 | This controls the metadata
associated with the object, such as titles,
| | 01:18 | captions, a background image for the object, and
even accessibility descriptions for the object,
| | 01:24 | so the object can be
identified via screen readers.
| | 01:27 | The essential thing to know about
objects is that they all behave differently
| | 01:32 | in layouts depending on the type of object they
are and there are three basic types of objects.
| | 01:37 | There are inline objects,
floating objects, and anchored objects.
| | 01:42 | Let's have a look at the next page
so we can get a deeper understanding of
| | 01:45 | these three types of objects
and how they behave in a layout.
| | 01:48 | On this page, we have three objects:
| | 01:52 | an inline object, a floating
object and an anchored object.
| | 01:56 | Each of those are placed
inside of a bunch of text.
| | 02:00 | Let's begin by clicking on the
inline object one time to select it.
| | 02:05 | You'll notice that when we select an
object, the Inline button in our Formatting
| | 02:09 | toolbar is highlighted.
| | 02:11 | Now have a look at the handles that are
located around the outside edge of the object.
| | 02:17 | On an inline object, the three handles
in the lower right-hand corner are all
| | 02:22 | displayed in black, while the other handles
are all displayed in this light-blue color.
| | 02:27 | Inline objects are all
embedded in the normal flow of text.
| | 02:31 | So in order to move an inline object,
you simply click to select and then click
| | 02:36 | and drag to move that object, and as
you do, you'll see the cursor insertion
| | 02:41 | point highlighted behind the object,
and you can simply move it to a particular
| | 02:45 | location and then drop it in that location.
| | 02:48 | Wherever the insertion point is located,
the inline object will embed itself
| | 02:53 | within that normal flow of text.
| | 02:55 | So here I dropped the object in between
the word "Mississippi" and the word "You'll."
| | 02:59 | As the text moves, such as what would
happen if you clicked at the beginning of
| | 03:03 | the first paragraph and simply hit
Return on your keyboard on time to insert a
| | 03:07 | new line, the inline object moves along
with the text and stays placed exactly
| | 03:13 | where it was located in between the two words.
| | 03:15 | Now let's compare that inline to the
floating object that is located over here
| | 03:20 | on the right-hand side.
| | 03:21 | Go ahead and click one
time on my floating object.
| | 03:24 | You'll note that the floating object
button has highlighted inside of our
| | 03:28 | Formatting toolbar, and you'll also note
that the handles all the way around the
| | 03:32 | object are all displayed in black,
indicating that this is a floating object.
| | 03:38 | To move a floating object, I can simply
click and drag that object anywhere that
| | 03:43 | I want it on the page. And it doesn't
drop in the middle of a line of text;
| | 03:48 | it actually allows the text to flow
completely around it anywhere we want it to go.
| | 03:52 | I'm going to go ahead and move my
floating object back over here to the
| | 03:56 | right-hand side and drop it back in place.
| | 03:59 | If we click on the anchored object,
we can notice that the Anchored button is
| | 04:03 | highlighted in our Formatting toolbar,
and the handles appear just like the
| | 04:08 | floating object handles do.
| | 04:10 | In fact, if I go ahead and click and
drag the anchored object, it reacts very
| | 04:15 | similar to how a floating object would react.
| | 04:18 | And I'll go ahead and move it back down
here to the bottom-right of my page and
| | 04:21 | drop it back into place.
| | 04:23 | The thing that's different about an
anchored object is the small blue anchor
| | 04:27 | icon that's located somewhere
inside of your text on that page.
| | 04:32 | This icon indicates at
what location in the text
| | 04:35 | this object is to be anchored or tied to.
| | 04:38 | We can move that anchor by simply
clicking and dragging it to a new location
| | 04:43 | within the text and dropping it in
place, or we can click it and drag it and
| | 04:48 | move it back into the location where we want it.
| | 04:51 | Whatever location this anchor appears
within the text, the anchored object
| | 04:56 | will appear on that same page at the
location that you've placed the anchored object at.
| | 05:02 | To actually see this in practice,
let's go ahead and scrub over to the
| | 05:06 | right-hand side and go the last
paragraph of text that we have here and simply
| | 05:10 | select it by triple-clicking on the
paragraph and copying it to our clipboard
| | 05:15 | using Command+C. We'll then go back to
the previous page and in that first line
| | 05:20 | where we created the empty line break,
| | 05:22 | we'll go ahead and click our mouse
one time and then paste in that text by
| | 05:26 | pressing Command+V on our keyboard.
| | 05:28 | You'll notice that the inline object
continued to move along with the text and
| | 05:32 | is still located in the same place
in the text where we had it before.
| | 05:36 | The floating object is in the same
physical location as it was before and the
| | 05:41 | text has simply moved around it.
| | 05:43 | The anchored object has been moved
over to the next page completely, but it's
| | 05:48 | in the same physical location that it
was on the previous page where we had
| | 05:52 | placed it. And when we click on that
object, we can see that it's moved to this
| | 05:56 | page because our anchor has now been
moved in the text flow over to this page as well.
| | 06:01 | Now there's one more thing to note
about how objects react in iBooks Author, and
| | 06:06 | that is that different objects react
differently depending on the orientation of your document.
| | 06:12 | Currently, we're looking at
this document in a landscape view.
| | 06:16 | But let's go ahead and go into the portrait
view by clicking on that button in orientation.
| | 06:21 | Here we can see that an inline object
is appearing in line in the exact same
| | 06:26 | location of our text as it did
inside of our landscaped orientation.
| | 06:32 | However, neither the floating nor the
anchored objects are appearing, and only
| | 06:37 | some of the objects from the
previous page are appearing.
| | 06:41 | That's because only objects that
have a title or a caption will appear by
| | 06:46 | default in the portrait perspective.
| | 06:49 | To test this, let's go ahead and go
back to our landscape perspective and
| | 06:55 | we'll select our floating object by
clicking on it one time. And then in the
| | 06:59 | Widget Inspector, we'll simply check
the box for Title and under Label, we'll
| | 07:04 | go ahead and select Figure.
| | 07:06 | Notice that the figure is automatically
numbered to be the next figure in our list.
| | 07:11 | We'll go ahead and go back to the
portrait orientation and now, on the
| | 07:15 | left-hand side of our text, we can
see the floating object, Figure 5, is
| | 07:20 | appearing in our sidebar.
| | 07:22 | Having this basic understanding about
how objects work and interact inside of
| | 07:26 | iBooks Author is going to be
absolutely key to your success at making
| | 07:30 | beautiful iBooks.
| | Collapse this transcript |
| Adding objects| 00:00 | In previous movies, we've already seen
that we can add objects directly to our
| | 00:05 | iBooks Author project, by simply going
up to the Media Browser; selecting an
| | 00:09 | event; finding the image that we want to
add, such as this three condors image in
| | 00:14 | our chapter five exercise files folder;
| | 00:16 | and simply drag and drop it
directly on to our layout.
| | 00:20 | We can then grab the object and
move it to a desired location.
| | 00:26 | But in this movie, I want to show you a
couple of other techniques for getting
| | 00:30 | content directly into iBooks Author.
| | 00:32 | And the first is to go up to the
Insert menu and come down to the Choose
| | 00:37 | option and select Choose.
| | 00:40 | Then you can find the file that you want to add.
| | 00:42 | In this case, inside of my chapter
five exercise files folder, I've got an
| | 00:46 | image called condors.jpg.
| | 00:49 | I'll go ahead and click on that image
and click the Insert button to insert that
| | 00:53 | image then directly onto my page.
| | 00:56 | I can then move it to the desired
location that I want to work with the image at.
| | 01:00 | Another way of getting content or
objects directly into iBooks Author is to
| | 01:05 | simply drag and drop a file
directly out of the Finder.
| | 01:08 | So I'm going to go ahead and jump over
to my Finder real quick, where I have a
| | 01:12 | text file called condor.txt.
| | 01:15 | Now, we've seen in other movies where
we could open this file, select the text,
| | 01:19 | copy it, and paste it
directly into iBooks Author.
| | 01:23 | But I want to go ahead and take this
text file and simply drag the entire file
| | 01:27 | and drop it right into iBooks Author.
| | 01:30 | The text file is then automatically
converted into its own text box that I can
| | 01:35 | then begin working with and manipulate.
| | 01:37 | I'll go ahead and park the text
box over here on the right-hand side.
| | 01:41 | Throughout the rest of this chapter,
we're going to be creating a couple of
| | 01:45 | complex objects that are going to
have a variety of different components.
| | 01:49 | So we're also going to need a couple of shapes.
| | 01:52 | And shapes we can simply create right
inside of iBooks Author by going up to
| | 01:57 | the Shapes menu in our tool bar then
come down and select the rounded rectangle.
| | 02:01 | This will create a rounded-rectangle
shape that we can work with on our page.
| | 02:05 | Go ahead and click and drag that up
to the side and then go back up to the
| | 02:09 | Shapes menu and select the rectangle shape.
| | 02:12 | This will create a rectangle
for us to work with this well.
| | 02:15 | Now we have all the key components that
we're going to need to create our callout.
| | 02:19 | We've got some basic shape objects,
we have a text object, and we have some image
| | 02:24 | objects to be able to work with.
| | Collapse this transcript |
| Manipulating objects on a page| 00:00 | Now, let's begin working on our callout
by manipulating some of these objects.
| | 00:05 | Let's first start with the rounded rectangle.
| | 00:07 | Go ahead and grab that object and drag
it into the middle area of your page.
| | 00:11 | The first thing we need to do is resize
this object so that it's approximately
| | 00:15 | 200 pixels wide by 280 pixels tall.
| | 00:19 | And there's a couple of ways we can do this.
| | 00:21 | The easiest is to simply make sure that
your object is selected by clicking on
| | 00:25 | it and then use the handle in the
lower right-hand corner to click and drag.
| | 00:29 | And as soon as you do, at text window
pops up to show you the size of your object.
| | 00:34 | So we can click and drag this object
until we get to our 200 pixels wide and
| | 00:38 | then drag down until we get to 280 pixels high.
| | 00:41 | Now it may take a little bit of
maneuvering in order to get the file exactly right.
| | 00:46 | If you can't get it exactly right,
then the easiest thing to do is make sure
| | 00:50 | that the image is still selected,
then go to the Inspector, go over to the
| | 00:54 | Metrics Inspector, and then you can go to
the Size area and simply use the up and
| | 00:59 | down arrows to dial in to the exact
dimensions that you're looking for.
| | 01:04 | You can then deselect the
image by simply clicking off of it.
| | 01:07 | Let's go ahead and move the image down
just a little bit so that we can then
| | 01:10 | work with the rectangle.
| | 01:12 | Now with the rectangle, what we want to
do is drag that over until the left-hand
| | 01:16 | edge aligns with the left
edge of our rounded rectangle.
| | 01:19 | And then we can use these center handles
to drag the object into the correct size.
| | 01:25 | Notice that it automatically
snaps into the correct dimensions.
| | 01:28 | We can then grab the top dimension and
drag it down until we get our rectangle
| | 01:33 | to be 200 pixels wide by 50 pixels high.
| | 01:37 | Next, let's go ahead and work on the text box.
| | 01:40 | The text box needs to be 200 pixels
wide--and I'll simply go over to the Metric
| | 01:44 | Inspector and type that in: 200--and
the height should be 320 pixels high.
| | 01:51 | So, I'll type that in and hit Enter or
Return on my keyboard and that creates
| | 01:56 | the object to be at the exact size that we need.
| | 02:00 | Now, for the condors picture,
we're going to be going a couple of things here.
| | 02:04 | The first thing is to go ahead and
click on the image and then click and
| | 02:07 | drag the lower right-hand corner and simply
drag it down to a little bit smaller size.
| | 02:12 | We're going to fine-tune this later on
once we get the rest of our callout built.
| | 02:16 | We're also going to want to create a
mask of our objects so we can get just the
| | 02:21 | precise parts of this
object the way that we want them.
| | 02:24 | To create a mask, with the object
selected, simply come up to your Formatting
| | 02:29 | bar and click on this icon here.
| | 02:31 | That's the Mask or Crop Selected Image.
| | 02:35 | When you click on that, a small set of
handles appears inside of your main image,
| | 02:40 | and you can then adjust those handles
so that you're getting just the area of
| | 02:43 | the image that you want to have.
| | 02:45 | When you deselect, the rest of the
outside of the image is cropped away.
| | 02:50 | Again, we'll fine-tune this later
after we get more of our image laid out.
| | 02:54 | We're not going to worry about
the three condors for right now,
| | 02:57 | so let's go ahead and shrink that
down a little bit by clicking on it and
| | 03:00 | then simply dragging it down a little
bit lower to give ourselves a little
| | 03:03 | bit more room to work with.
| | 03:05 | You can move multiple
objects on the screen at one time
| | 03:08 | if you click and drag across to select
multiple objects and then you can drag
| | 03:13 | those together as one unit.
| | 03:15 | The next part of manipulating our
objects that we need to do is to get the
| | 03:19 | correct stacking order of our objects,
| | 03:21 | and we'll do that in the next movie.
| | Collapse this transcript |
| Layering objects together| 00:00 | We can add a lot of visual interest
to our layouts by stacking objects
| | 00:04 | together on our page.
| | 00:06 | Let me show you what I mean.
| | 00:08 | In the layout that we're working on creating
our callout, we've got the image of the condors.
| | 00:13 | If we click and drag that image, we can
see that it is currently behind our two
| | 00:17 | shapes that we created.
| | 00:19 | However, if we click our rounded
rectangle and try and move that up into place,
| | 00:23 | we can see that that is
sitting behind our regular rectangle.
| | 00:27 | In order to bring that up in the
layer stack, all we need to do is make
| | 00:30 | sure that we have our rounded rectangle
selected. Then we can go up to the Arrange menu.
| | 00:35 | From the Arrange menu, we can choose
to bring an object forward one level,
| | 00:39 | we can bring it all the way to the front,
we can send it backward to one level,
| | 00:43 | or we can send it all the way to the back.
| | 00:45 | In this case, we want to bring
our rounded rectangle forward,
| | 00:48 | so we'll simply select Bring Forward
and the rounded rectangle now sits on top
| | 00:53 | of the regular rectangle.
| | 00:55 | Let's go ahead and do the
same thing with our text box.
| | 00:57 | We'll go ahead and click our text box
one time to select it, and then drag it
| | 01:01 | over and get ready to drop it into place.
| | 01:03 | But as you do, you notice that the
text is being obscured by the objects.
| | 01:08 | This can be handled by making sure that
our text box is still selected, going up
| | 01:13 | to the Arrange menu, and this
time we'll choose Bring to Front.
| | 01:17 | That way it will force the text box
all the way to the top of the layer stack,
| | 01:20 | no matter it was initially
inside of the layer stack.
| | 01:24 | Now we can see that it's
going to be in the correct place.
| | 01:27 | We can go ahead and move it off to the
side and we'll come back to moving it
| | 01:29 | into its final location after we've gone
ahead and changed the appearance of the
| | 01:34 | rest of our objects.
| | Collapse this transcript |
| Changing an object's appearance| 00:00 | Now, let's work on changing the
appearance of some of our objects on our page.
| | 00:04 | Let's begin by working with the rectangle.
| | 00:07 | Go ahead and click one time on the
rectangle and then in your Graphics
| | 00:10 | Inspector, let's begin by changing the
fill from a Gradient Fill to a Color Fill
| | 00:16 | and then click inside the color
well to bring up your Color window.
| | 00:19 | Go ahead and drag the slider all the
way down to the bottom to convert the
| | 00:23 | color into a solid black.
| | 00:26 | Now that we've taken care of
the fill, let's address the stroke.
| | 00:30 | The stroke is the small line that goes
around the outside edge of the object.
| | 00:34 | For the top part, we want to get rid of
the stroke all together, so we'll click
| | 00:38 | the dropdown menu and select None.
| | 00:40 | Finally, we want to adjust
the opacity of this object.
| | 00:43 | We can either grab the slider and
simply drag it down to the value that we like
| | 00:48 | or we can type in the value.
| | 00:49 | I'm going to enter in a value of 40
on mine and press Enter or Return.
| | 00:54 | That's going to provide a nice
transparent background to this object, so we'll
| | 00:59 | be able to see through to the image,
but it will provide enough of a contrast
| | 01:04 | for us when we add our title
text directly over top of it.
| | 01:07 | Next, let's turn our
attention to the rounded rectangle.
| | 01:10 | Go ahead and click on that one time
and then go up to the Fill dropdown menu,
| | 01:15 | and again, we'll change it to a color fill.
| | 01:17 | Click on the color well. And this time
we want to convert the color into a mid-
| | 01:22 | tone gray. So we can make sure that the
color is perfectly white by clicking on
| | 01:26 | one of the open cells down in the bottom,
| | 01:29 | and then click the slider and drag the
slider down until you reach the midpoint.
| | 01:34 | That will give us a nice middle gray.
| | 01:37 | For the stroke of this line, we're
going to go ahead and leave the stroke on,
| | 01:40 | but I want to change the size of the stroke
from a half point all the way up to a full point.
| | 01:46 | That will provide a little extra
buffer around the outside edge for us to
| | 01:49 | be able to work with.
| | 01:51 | Go ahead and deselect by clicking Off,
| | 01:53 | and now let's go ahead and work on the image.
| | 01:55 | Click one time on the condor's image.
| | 01:57 | We're going to go and grab that image and
drag it up and a little bit to the right.
| | 02:02 | You want to make sure that the bottom
edge of the image is overlapping over top
| | 02:06 | of where the bottom of the curve
of our rounded rectangle appears.
| | 02:10 | We can then adjust the size down a
little bit to get our image a little bit
| | 02:14 | closer to the size that we want.
| | 02:17 | Then if we click the Edit Mask button,
we can then trim in the crop so that it
| | 02:21 | snaps right to the edge
of our rounded rectangle.
| | 02:25 | If we need to make any adjustments,
we can click one time in the middle so that
| | 02:29 | the outer edges are adjusted and then
either use our mouse to move the image
| | 02:33 | around or we can nudge it around
using the arrow keys on our keyboard.
| | 02:37 | I'm going to go ahead and nudge mine up just a
little bit, and a little bit over to the left.
| | 02:42 | That looks pretty good right there.
| | 02:43 | I'm going to click away to deselect.
| | 02:46 | Now, our image is cropped
nicely directly on top our callout.
| | 02:51 | Finally, let's turn our attention to our text.
| | 02:54 | Go ahead and click and drag the text
window into our callout and align the
| | 02:58 | bottom of the text so that it aligns
with the bottom of the rounded rectangle.
| | 03:03 | Next, we'll focus on the text itself.
| | 03:05 | Let's begin adjusting our text by
adjusting the inset margin first.
| | 03:09 | To do this, click one time on the text to
make sure that the entire text box is selected.
| | 03:15 | And then in the Text Inspector down at
the bottom, there's the Inset Margin.
| | 03:20 | You can go ahead and drag this up to
the desired value or you can type it in.
| | 03:24 | I'm going to set my value to 10 points.
| | 03:27 | That's going to pull the text in from
the outer edge of the text box about
| | 03:32 | 10 points so that we don't have the
text lying right up against the edge of
| | 03:36 | our callout window.
| | 03:37 | Next, let's go ahead and select the
entire top paragraph by triple-clicking on
| | 03:42 | the word "California Condor."
| | 03:44 | And go up to our Format bar, and we
will choose the dropdown menu and we'll
| | 03:48 | select the standard Helvetica Neue
font that we've been working with
| | 03:51 | throughout the training.
| | 03:52 | We'll then change the font
face to a medium font face.
| | 03:56 | We'll change the size to 18 points
and for the color, I'm going to choose
| | 04:01 | this nice yellow color.
| | 04:02 | It's going to make the
text really pop off the page.
| | 04:05 | Over in our Text Inspector, we want to
adjust the spacing after the paragraph.
| | 04:10 | We're going to open up that up a little
bit by dragging the slider over to the
| | 04:13 | right, until we get to 10 points.
| | 04:16 | The text is looking pretty good.
| | 04:17 | Let's go ahead and check our work by
clicking away from the text and we can see
| | 04:21 | how that text really just stands out.
| | 04:23 | Next, let's go ahead and format
the center section of the text.
| | 04:27 | We can do this, again, by triple-clicking
on the first paragraph to select it, then
| | 04:31 | hold down the Shift key and click after
the word "Years" to select the rest of
| | 04:36 | the second paragraph.
| | 04:37 | Once again, we'll go back up to the top,
to the Format menu, and we'll change the
| | 04:41 | font to Helvetica Neue.
| | 04:43 | We're going to leave the font face at Regular
and then change the font size down to 14 points.
| | 04:49 | This is going to make the
text much more readable.
| | 04:52 | We'll change the color to a nice white
color so that it really stands out on
| | 04:56 | that gray background.
| | 04:58 | We'll also change the alignment of
the text so that it's fully justified.
| | 05:01 | This will make the right-hand edge of
our text line up as a nice sharp line.
| | 05:05 | Over in the Text Inspector, we will
adjust the spacing between lines down
| | 05:10 | a little bit, to 1.2.
| | 05:11 | This will tighten up the text just a little bit.
| | 05:14 | We'll also adjust the
spacing after a paragraph up to 14.
| | 05:18 | I'm going to go ahead and select 0 and
type in 14 on my keyboard and hit Enter
| | 05:23 | or Return in order to accept that value.
| | 05:26 | We can deselect to check our work by
clicking away, and now we can see how the
| | 05:30 | text is lining up inside of our callout.
| | 05:33 | The final thing we need to do is work on
the Explore California URL down at the bottom.
| | 05:39 | To select this, triple-click on it to
select it and then we'll go back up to the top.
| | 05:44 | We'll change the font to
Helvetica Neue, the size to 14 points.
| | 05:48 | We'll choose the same yellow color that
we chose for our California Condors header.
| | 05:53 | We'll make sure that we center the
text by clicking on the Center Align tool.
| | 05:58 | And then in our Text Inspector,
let's increase the spacing between the
| | 06:02 | characters from 0% up to about 15%.
| | 06:06 | All right, things are looking pretty good there.
| | 06:10 | We'll go ahead and deselect, and now we
have a nice callout that's ready to be
| | 06:14 | added into our text.
| | 06:16 | But before we do, we want to make one
more final modification and that is to
| | 06:21 | go ahead and click and drag in order to
select all of our text and all of our objects.
| | 06:27 | We are then going to go up to the
Arrange menu and go down to Group, so now
| | 06:31 | all of these objects are now grouped
as one single object that can be grabbed
| | 06:35 | and moved into place.
| | 06:37 | If you need to ungroup objects,
you simply click on the grouping, go up to
| | 06:41 | Arrange, and select Ungroup in order to
access all of the individual objects that
| | 06:46 | are contained within your group.
| | 06:49 | A good thing for you to do right now is
to go ahead and ungroup the objects, then
| | 06:53 | go in and select each of these three
different groupings of text and create a
| | 06:57 | new style like you've already seen how
to do in a previous movie, and create a
| | 07:01 | style for Callout Header,
Callout Body, and Callout Footer.
| | 07:06 | Then regroup the objects and meet me
in the next movie, where we'll go ahead,
| | 07:10 | place our objects within our page,
and apply some additional metadata.
| | Collapse this transcript |
| Adding titles, labels, captions, and descriptions| 00:00 | Now, let's go ahead and finish off
adding our objects onto our page by
| | 00:04 | creating some titles, labels, captions,
and descriptions, and then add them into
| | 00:09 | the correct location.
| | 00:10 | Let's begin by working with
the picture of the three condors.
| | 00:14 | Go ahead and click and drag that
back up onto the page so we can see it a little bit clearer.
| | 00:18 | And with that object selected,
go ahead and go over to the Widget Inspector.
| | 00:23 | Here we can check the box for adding
a title, a caption, and a background.
| | 00:30 | We can also see that we can add in some
accessibility description, which is the
| | 00:34 | text that would be read by a screen
reader when a screen reader would
| | 00:37 | encounter this object.
| | 00:39 | Let's go ahead and apply a little
additional formatting to our title.
| | 00:43 | To do this, next to Label, click the
dropdown menu for None and select Figure.
| | 00:48 | Throughout our Explore California Book,
we want all of our different objects to
| | 00:52 | be labeled as separate figures.
| | 00:55 | And rather than being called
"Figure" with a decimal number, we want it just to
| | 00:58 | have a whole number.
| | 01:00 | So, we'll click the dropdown menu for
Figure one more time and come down and
| | 01:03 | select Edit Label Style.
| | 01:06 | Now we can customize the
style for our particular label.
| | 01:09 | Make sure that Figure is already
selected over in the Edit Label Style.
| | 01:13 | And then for Label Format
click the dropdown menu.
| | 01:16 | Here, we have a variety of different
options we can choose from as to how we
| | 01:20 | want our figures to be labeled.
| | 01:22 | I like to have just a single
whole number, so I'll select Figure 1.
| | 01:26 | For Character Style, I'm going to
leave it set to the Figure Label.
| | 01:29 | So this will pull up any styling
information that has already been applied
| | 01:33 | throughout the rest of the
book for our figure labels.
| | 01:35 | And then click the Done button and we can
see that our figure has been labeled correctly.
| | 01:41 | Next, let's go ahead and edit
the text for the figure title.
| | 01:44 | So, simply click inside of
the box, select the text,
| | 01:47 | and we'll go ahead and
type in California Condors.
| | 01:50 | When we click down in the bottom of
our text, we can see that the title text
| | 01:56 | that we entered has appeared as
the Accessibility Description.
| | 01:59 | If we want, we could add additional
information here or we can simply leave this
| | 02:03 | as Figure 1 California Condors.
| | 02:05 | The screen reader should automatically pick
any captions that we apply next to the image.
| | 02:11 | To apply a caption to the image,
simply triple-click in the bottom to select the
| | 02:15 | entire paragraph, and now let's type in,
"The California Condor is considered to
| | 02:20 | be a critically endangered species."
| | 02:23 | We'll go ahead and click
away to deselect the text.
| | 02:26 | And now our figure is complete, and
it's ready to be moved into the desired
| | 02:31 | location within our layout.
| | 02:33 | To do this, we'll simply grab the figure,
by clicking on it one time, and drag it.
| | 02:37 | And we'll drag over to the left-hand
side until we can drop it at the top-left
| | 02:43 | of the previous page.
| | 02:45 | Now to adjust the layout of this page,
to clean things up a little bit, we'll go
| | 02:48 | ahead and click inside of the text
one time and then up in our Format menu,
| | 02:53 | instead of having a two-column layout,
let's go ahead and change this layout to
| | 02:57 | be a four-column layout.
| | 02:59 | We can then click one time on our
figure and adjust the size of it so that it
| | 03:03 | fills the top of two columns.
| | 03:06 | Next, let's go ahead and move
our callout into place as well.
| | 03:10 | We'll slide our window over just a
little bit, then we'll click one time on
| | 03:14 | our object, and since we grouped our object,
we've selected the entire object all at one time.
| | 03:20 | We can then drag the object over and
drop it at the top of the right-hand column.
| | 03:25 | This will drop it properly into place
| | 03:27 | so that this callout always appears with
the Endangered Species Expedition text.
| | 03:33 | We'll go ahead and convert it from a
floating object to an anchored object.
| | 03:37 | And then we'll simply grab the anchor
and drag it down and drop it right at the
| | 03:41 | beginning of Endangered Species Expedition.
| | 03:44 | That way if that text gets pushed to
another page, this callout will appear on
| | 03:49 | the same page, always in
the upper right-hand corner.
| | 03:54 | Let's go ahead and see how this layout
now looks in our portrait orientation.
| | 03:59 | To do this, go up and click on
Orientation and select Portrait.
| | 04:04 | When we do, we can see that only the first
figure is appearing; our callout is not appearing.
| | 04:10 | And if you remember back to when we
talk about objects, we said that in order
| | 04:14 | for an object to appear in the Portrait
orientation, we needed to have it to be
| | 04:18 | either an inline object or it
needed to have a title or a comment.
| | 04:22 | Let's go ahead and change the orientation back,
| | 04:25 | scrub back over to the next page,
and select one time on our callout.
| | 04:30 | Now we don't necessarily want to add
a large title here or a caption to it,
| | 04:34 | because all of that is
contained within this object.
| | 04:37 | But we can do a little trick here.
| | 04:39 | With the object selected, we can go
ahead and in the Widget Inspector and check
| | 04:44 | the option for Title.
| | 04:45 | That will create a title up there and
we can choose to not have a label on it.
| | 04:50 | Then we can click inside of the title
itself and select the text that was
| | 04:54 | put there by default.
| | 04:56 | We can then simply type a space on our
spacebar. So there's a hidden space right there.
| | 05:01 | Go ahead and just drag your object down
so that it aligns back at the top of
| | 05:05 | our page once again.
| | 05:07 | And now when we go ahead and we preview
in the correct orientation, we can see
| | 05:11 | that our California Condors callout
has been added to our sidebar in the
| | 05:15 | portrait orientation.
| | 05:17 | It's already picking up all the proper
text, but by simply adding a title, we can
| | 05:21 | get it to appear in our other orientation.
| | Collapse this transcript |
| Adding accessibility text to objects| 00:00 | I'd like to take a minute and go back
and have a little bit deeper look at the
| | 00:04 | accessibility description of our figures.
| | 00:07 | Go ahead and click one time on
Figure 1, the California Condors, that we've
| | 00:11 | finished up in the last movie.
| | 00:12 | In the Widget Inspector, under
Accessibility Description, Figure 1
| | 00:17 | California Condors was
automatically filled in for us because it came
| | 00:21 | directly from the title.
| | 00:22 | But a screen reader is going to be able
to read the figure number, the title of
| | 00:26 | the figure, and any of the comments
that are associated with that figure.
| | 00:30 | What a user who needs to use a screen
reader is going to want to know is, what is
| | 00:35 | the image actually of?
| | 00:36 | Well, we need to describe that.
| | 00:38 | So, instead of having Figure 1
California Condors in the Accessibility
| | 00:43 | Description, I'm going to go ahead and
select that and delete it and instead
| | 00:47 | type in "Photograph of Three
California Condors on the side of a hill
| | 00:53 | overlooking Big Sur."
| | 00:54 | Now that is a much better description as to
what a user will be seeing in the photograph.
| | 01:00 | Likewise, let's go ahead and click one
time on our California Condor callout and
| | 01:05 | in the Accessibility Description there,
go ahead and type in the description
| | 01:09 | as to what you're seeing in the image.
| | 01:10 | Now that's a much better description as to
what the user is actually seeing in that image.
| | 01:16 | The text is still going to be read by
the screen reader, so the user using a
| | 01:20 | screen reader would still get all of
the rest of the content, but now they know
| | 01:24 | what the image is as well.
| | 01:26 | Be sure to make your books accessible
by adding accessibility descriptions to
| | 01:31 | all of your objects that are
used throughout your books.
| | Collapse this transcript |
|
|
6. Working with ImagesAdding images| 00:00 | Throughout this title we've been adding
images as part of other exercises, but
| | 00:05 | in this movie we're going to focus entirely on
adding images and doing some manipulation to them.
| | 00:10 | The easiest way to add images is to make
sure that the images are in your iPhoto
| | 00:13 | Library, and then they will appear
automatically in your Media Browser.
| | 00:18 | Inside of the Chapter 06 exercise
folder, I've added a bunch of images that
| | 00:22 | we're going to work with in this chapter.
| | 00:24 | The first image to drag in
is the image called seagull.
| | 00:27 | Simply grab the image
and drag it onto your page.
| | 00:30 | You can then close the Media Browser to get
out of the way while we work with the image.
| | 00:35 | When images are added onto our
document, they take one of three forms:
| | 00:40 | Either an Inline image, a
Floating image, or an Anchored image.
| | 00:43 | I prefer to work with Floating
images while I'm doing my layout.
| | 00:46 | So I'll select Floating image for this image.
| | 00:49 | Then I'll go ahead and move the image
roughly into the correct location, and
| | 00:53 | then I'll resize it by grabbing one of the
handles around the outside edges of the document.
| | 00:59 | If I grab one of the corner handles,
then I can resize both the vertical and
| | 01:03 | horizontal axis of the image at the same time.
| | 01:06 | If I grab one of the handles in the middle,
then I only adjust one axis at a time.
| | 01:12 | In this case, I want to float my image
about in the middle of these two columns.
| | 01:17 | And I want a rough size of about like that.
| | 01:20 | Now let's go ahead and add a couple
of more images, and then we'll apply
| | 01:23 | some treatments to them.
| | 01:25 | So we'll go back up to our Media
Browser, and I'll scroll down on the list,
| | 01:29 | and now I'll go ahead and grab the
image called pelican, drag it onto the
| | 01:33 | stage and drop it in place.
| | 01:34 | And I'll also grab brown_gulls and drag
it on and drop it in place, and go ahead
| | 01:40 | and close the Media Browser
now to get it out of the way.
| | 01:43 | Let's go ahead and resize the
brown_gulls image since it's in the front.
| | 01:46 | I'll go ahead and grab this image and
drag the image down a little bit smaller,
| | 01:50 | and I'm going to move it over into place.
| | 01:53 | It's going to be down here in
the lower portion of our page.
| | 01:56 | I'll go ahead and resize the pelican
image by grabbing its handle and moving it
| | 02:00 | in the same direction.
| | 02:01 | You'll notice as I adjust the image and
get it to snap to the same size as some
| | 02:06 | of my other images, Smart Guides
appear on screen to let me know that I've
| | 02:10 | adjusted the image, and it's at
the same size as my other images.
| | 02:14 | I'll go ahead and let go since now
all my images are roughly the same size.
| | 02:18 | The next thing I want to do is I want
to apply a little bit of a rotation to
| | 02:21 | each of these images so it will end up
looking like a stack of photographs that
| | 02:26 | have just been dropped into place on the page.
| | 02:28 | I'll start with the pelican image.
| | 02:29 | To do this, click on the
Inspector and go to the Metrics tab.
| | 02:34 | Down at the bottom there's an option
for Rotation. You can either rotate by
| | 02:38 | clicking and dragging around the wheel,
you can type in a specific value and
| | 02:43 | then hit Enter or Return, or you can
use the up and down arrows to adjust the
| | 02:47 | angle one degree at a time.
| | 02:49 | I'm going to go ahead and set this image to 357.
| | 02:54 | So it's got a little bit of a
tilt leaning over in this direction.
| | 02:57 | I'll go ahead and then move the image
up so that the pelican's head is pretty
| | 03:01 | close to the top of the page.
| | 03:02 | Next, I'll work with the seagull.
| | 03:04 | Go ahead and click on the seagull one
time to select it, and then this time
| | 03:08 | let's go ahead and set the Angle to be +3 degrees.
| | 03:12 | It's easy enough to just click the up
arrows a couple of times to get to 3 degrees.
| | 03:16 | I'll go ahead and move the image up into place.
| | 03:18 | Notice that the seagull image is placed
in a layer behind the pelican image, so
| | 03:24 | the pelican image is
partially obscuring the seagull.
| | 03:27 | That's fine for this image.
| | 03:29 | But for the brown seagulls down at the bottom,
it would be nice to have those in the background.
| | 03:33 | So with that image selected, I'll go up to my
Arrange menu and then come down to Send Backward.
| | 03:40 | It didn't move it all the way into the
back, so I'll do it one more time.
| | 03:44 | Going up to the Arrange menu and
selecting Sending Backward.
| | 03:48 | And now the brown seagulls
are in the correct orientation.
| | 03:52 | I'll go and apply the same rotation
that we had to the pelican by setting the
| | 03:56 | Rotation for this one to 357. That way
each of the images are going in, in a
| | 04:01 | little bit opposite direction.
| | 04:03 | We'll go ahead and pull the brown
seagulls down, and now each of the images are
| | 04:07 | laid out where there's a nice view of them.
| | 04:09 | It would be nice to have a little
bit more definition though between the
| | 04:12 | edges of the image.
| | 04:13 | So we'll start with the first image.
| | 04:15 | We'll go ahead and click on the first
image, and then we'll go over to the
| | 04:19 | Graphics tab, and we'll add a Drop
Shadow effect by clicking on the Shadow,
| | 04:24 | and that will add a little bit of a
3D lift to lift this image a little bit
| | 04:28 | higher off of this one.
| | 04:29 | We'll also apply a stroke to the image.
| | 04:31 | So go ahead and click the dropdown menu
for Stroke, and instead of applying just
| | 04:35 | a single thin line, let's choose Picture Frame.
| | 04:38 | When the Picture Frame option opens up,
we can click this dropdown menu here,
| | 04:42 | and we have a variety of
different picture frames to choose from.
| | 04:46 | We could choose to have more of a
traditional picture frame, which shows the
| | 04:49 | little corners on the edges of the
pictures, we could show an inset picture
| | 04:53 | frame, where the edges of the picture
look like they're torn a little bit.
| | 04:56 | I like this one down here.
| | 04:58 | It looks like all the edges of the picture are
a little bit torn, which makes a nice effect.
| | 05:02 | We'll go ahead and do that to the other images.
| | 05:04 | I'll click on the next image, add its Drop
Shadow and add the Picture Frame to the stroke.
| | 05:09 | Notice as soon as I do this, iBooks
Author helps me out by remembering my choice
| | 05:14 | and goes ahead and sets that for me.
| | 05:16 | I'll go ahead and do the same thing
to the brown seagulls at the bottom.
| | 05:20 | I'll add the Drop Shadow and
add the Picture Frame effect.
| | 05:22 | And there we go. Our images look much
better. They're in place. They're adding a
| | 05:27 | lot of visual interest to our page.
| | 05:29 | In the next movie, we'll look at
applying another effect to an image.
| | Collapse this transcript |
| Removing parts of photos with Instant Alpha| 00:00 | Now let's have a look at my favorite
feature of iBooks Author for working with images.
| | 00:04 | That's Instant Alpha.
| | 00:06 | To begin, let's go ahead and open up
our Media Browser, and in the Chapter 06
| | 00:10 | exercise files I've included
an image called condor_face.
| | 00:14 | Go ahead and grab that image and simply drag it
onto Page 25 of our Explore California Travel Guide.
| | 00:20 | This image once again has come in as
an Anchored image, so I'll go ahead and
| | 00:24 | change it to a Floating image.
| | 00:26 | And what Instant Alpha is going to
allow us to do is it's going to allow us to
| | 00:30 | get rid of all of this extra blue
around here so that it becomes completely
| | 00:34 | transparent, and we can cause the head
of the condor to simply float in space.
| | 00:38 | To do that, we'll use a tool that's up
here in the Format menu, under Image, and
| | 00:43 | it's called Instant Alpha.
| | 00:45 | Now, I use this tool so much that I like
to go ahead and instead of accessing it
| | 00:49 | from my menu, I like to add it to my Toolbar.
| | 00:52 | So I'll go up here to the View menu
and come down to Customized Toolbar.
| | 00:56 | You can then find the Instant
Alpha tool located down here.
| | 01:00 | Simply grab it and drag it and
drop it right here into your Toolbar.
| | 01:03 | It will be a great location,
and it will be easy to access.
| | 01:07 | Go ahead and click Done.
| | 01:08 | And now, let's go ahead and
use the Instant Alpha tool.
| | 01:12 | To begin, click one time on the
image to select it, and then click on the
| | 01:16 | button that says Alpha.
| | 01:18 | Now, find an area in the image, such
as here in the sky, and click and drag.
| | 01:23 | And as you start to drag--I'm dragging
in the upward direction--you'll notice
| | 01:27 | that the image is starting to be
selected for colors that are similar to this
| | 01:32 | color that I have selected already.
| | 01:34 | When the circle gets close to a
portion of the image that you don't want
| | 01:38 | to turn transparent, go ahead and let go on
your mouse, and it will apply that Alpha channel.
| | 01:43 | Now, come down here to the bottom
and find another spot and do the same
| | 01:47 | thing, click and drag up.
| | 01:49 | As you make the selection, you want
all of the areas that are in blue to
| | 01:53 | turn pink, and release.
| | 01:56 | Now, there's a couple of spots that we
didn't quite get, but that's all right.
| | 02:00 | Now that we've got our Instant Alpha
applied, go ahead and click away from the
| | 02:03 | image to deselect it.
| | 02:04 | Now, let's simply crop the
image using the Crop tool.
| | 02:08 | So click one time on the image to
select it and then click on the Mask or Crop
| | 02:13 | tool, which is here in your Formatting Toolbar.
| | 02:16 | You'll notice the handles
that appear for the crop area.
| | 02:19 | Go ahead and drag the left-side handle
over to the left of the image, then the
| | 02:24 | top middle handle up towards the top.
| | 02:27 | Then grab the right-handle, drag it
over towards the image, keep making
| | 02:31 | adjustments until the cropped area
is just around the condor's head.
| | 02:37 | When you get it looking pretty good, go
ahead and hit the Enter or Return key on
| | 02:41 | your keyboard to complete
the mask and then click away.
| | 02:44 | Now we can take the condor's head,
and we can drag it right up here to the
| | 02:47 | top left of the image.
| | 02:49 | We can also now grab one of the handles
with it selected, and we can adjust the
| | 02:53 | size of the image ever so slightly.
I like it looking like that.
| | 02:57 | This way we get the text, it's hard to
believe, up in the top just above the
| | 03:01 | head, and then the text below
wraps underneath of the condor's head.
| | 03:06 | Since the beak is pushing just a
little bit over into this next column, we're
| | 03:10 | getting some wrapping effect of the text
around that portion of the image at the same time.
| | 03:14 | We can go ahead and deselect.
| | 03:17 | Now we have a nice condor's head looking down
on top of all the rest of the images on this page.
| | 03:22 | It produces a really nice effect.
| | 03:24 | One thing to note though, once we've
done this, we've pushed our text around a
| | 03:28 | little bit, and it looks like The
Fossil Tour, which is a Header, has been left
| | 03:33 | hanging on this page, and it really
should be pushed over to the next page.
| | 03:37 | That's easy to remedy.
| | 03:38 | Go ahead and click your mouse one time
in front of the text and then go up to
| | 03:42 | the Insert menu and come down to Page Break.
| | 03:45 | When you select Page Break, it will
force that Header to jump over to the top of
| | 03:50 | the next page, and then we're ready to
begin working on our next image effect.
| | Collapse this transcript |
| Cropping and masking images| 00:00 | If the Alpha tool is my favorite tool,
my most used Photo tool inside of iBooks
| | 00:05 | Author has got to be the Crop or Mask tool.
| | 00:09 | In this movie we're going to explore
some different ways of using this tool.
| | 00:13 | To begin, go ahead and add the
condors_in_flight image out of the Chapter 06
| | 00:18 | exercise folder directly onto
your document, onto Page 26.
| | 00:22 | When you drop the image on, go ahead and
place it so that the condors themselves
| | 00:27 | float roughly about right there.
| | 00:28 | Make sure it's a Floating image, and
then click the lower right-hand corner of
| | 00:32 | the image and drag it so
that it fills the screen.
| | 00:36 | Sometimes doing this technique, it's
helpful to change the view down to about
| | 00:40 | 50%, so we can really see the whole image.
| | 00:43 | Now that we have the condors image
pretty much filling the screen, let's go
| | 00:47 | ahead and apply a mask to it.
| | 00:49 | We've already used the Mask
tool from our Formatting bar.
| | 00:53 | So this time let's go up to the Format
menu, come down to Image, and select Mask.
| | 00:59 | This does exactly the same thing,
it's just another option for us.
| | 01:03 | Now, we'll go ahead and resize the mask
itself so that it starts from the very
| | 01:08 | left-hand edge of the page and
completely fills the page except for finishing at
| | 01:14 | the end of the right-hand column.
| | 01:16 | We'll go ahead and drag the bottom down so
that it completely fills the page as well.
| | 01:20 | Next, we'll click one time in the Mask
to select the image that's inside of the
| | 01:24 | mask and then go ahead and move that
so that it appears to fill the page.
| | 01:30 | We'll go ahead and continue to adjust
the size of the image, making the condors
| | 01:34 | much larger, and moving the image
around until we get the condors so that
| | 01:40 | they're filling the side of the page,
and then we'll click away to deselect.
| | 01:45 | Now, we've taken an image that was not
quite centered, and we've dropped it into
| | 01:49 | a place so that the
image looks greatly improved.
| | 01:53 | Let's go ahead and apply
another mask in another way.
| | 01:56 | We'll go ahead over to the next page, and
then we'll drop in the image of the two condors.
| | 02:01 | What would be really nice is if we used
a similar technique to the Alpha channel
| | 02:08 | that we applied on the first page of
this article with the condor's face, only
| | 02:13 | aligning it to the lower
left-hand side of this page.
| | 02:16 | The problem is that this condor that we
want to add is facing in the wrong direction.
| | 02:20 | Well, that's not a problem.
| | 02:22 | All we need to do is close our Media
Browser, click on our Inspector, and go
| | 02:26 | over to our Metrics Inspector.
| | 02:29 | Then with the image selected, we can click
the Flip button to flip the image horizontally.
| | 02:35 | We can then click on our Alpha tool,
click in between the two birds to select
| | 02:39 | the sky, and go ahead and
draw out an Alpha channel.
| | 02:42 | Now, we're not going to worry about all
of this detail down here, because we're
| | 02:47 | going to crop that out of the way.
| | 02:49 | We'll go ahead and make sure that we've got a
Floating image, and then we'll go up to our Mask tool.
| | 02:54 | With the Mask tool selected, we can then
go ahead and select just the portion of
| | 02:58 | the image that has the left-hand bird in it.
| | 03:01 | We'll go ahead and trim this down until
the bird is properly centered inside of here.
| | 03:06 | Let me go ahead and zoom in on this
page so we can get a closer look at it.
| | 03:10 | I'll go ahead and zoom in to 75%.
Now the image is looking much better.
| | 03:14 | I'll click away to deselect it, then
click on the bird one time, and I'm going
| | 03:18 | to drag him down into place.
| | 03:20 | Next, I'll go ahead and grab the top
right-hand handle and drag it up in order
| | 03:25 | to stretch the bird out so that
it looks better placed on the page.
| | 03:29 | Now we can see that the text is easily
flowing right around the Alpha area of
| | 03:34 | this image, and by flipping it and
cropping it, we've got the bird looking in
| | 03:39 | the correct orientation.
| | 03:41 | I've included another image for you in
our Images Folder called pelican2, see if
| | 03:46 | you can go ahead and apply the same
effect that we just did to that bird, only
| | 03:51 | having the pelican sitting right here on
the rock with its head looking inward.
| | 03:56 | And in the next movie we'll check our
work, and we'll apply another effect.
| | Collapse this transcript |
| Controlling image settings| 00:00 | In the last movie I suggested you used
the pelican image to be able to add in
| | 00:05 | the pelican into the lower edge of this page
using the similar technique to what we did.
| | 00:10 | Here's my solution to how I got this done.
| | 00:13 | The image has had an Alpha
Channel applied to it around the edge.
| | 00:17 | I've stretched the image up a little
bit and moved it directly into place.
| | 00:21 | Now let's look at using
the Image Adjustment tool.
| | 00:24 | In our Media window, I've
added an image called image_adjust.
| | 00:27 | Go ahead and drag that onto the page.
Close the Media Browser.
| | 00:31 | Make sure it's a Floating image, and
we're going to adjust the size of the image
| | 00:36 | so that it fills the top of the column on
the right-hand side of this page. There we go.
| | 00:43 | Now, the image is not a bad image, but the
problem is it's not quite exposed properly.
| | 00:48 | So let's go ahead and make a few
adjustments, and we can do that right here
| | 00:52 | inside of iBooks Author.
| | 00:54 | With the image selected, we'll click on
the Adjust Image window in our Toolbar.
| | 00:59 | The Adjust Image window is very similar
to the Adjust Image tools that you find
| | 01:04 | in other Mac applications, such as iPhoto.
| | 01:08 | Let's go ahead and apply
some adjustments to this image.
| | 01:11 | The Brightness is already pretty good,
but let's go ahead and boost the Contrast
| | 01:14 | just a little bit and see what that looks like.
I want to take mine up to about 13.
| | 01:20 | That's looking a little bit
better, a little more Contrast there.
| | 01:22 | To help us in making the adjustments,
let's go ahead and zoom in on the image a
| | 01:26 | little bit more so we can really see it.
Next, let's go ahead and boost the Saturation.
| | 01:31 | The default setting is
set to 50, which is halfway.
| | 01:34 | I'll go ahead and boost this up some,
and we can see that some of the greens and
| | 01:39 | some of the other colors are
really starting to pop out a little bit.
| | 01:42 | That's looking much better.
| | 01:44 | Already the image is looking a little
cool. Let's go ahead and warm it up by
| | 01:48 | shifting the temperature up just a
little bit, maybe only to about 5.
| | 01:52 | That adds just a little bit more
color here into some of these rocks.
| | 01:56 | Likewise, let's go ahead and adjust the
tint down just ever so slightly, maybe -1.
| | 02:01 | That adds just a little bit more magenta into
the image and pulls some of the intense green out.
| | 02:07 | Next, we'll add just a little
bit of Sharpness to the image.
| | 02:10 | We'll bump this up, maybe about like that.
That's looking a little bit better.
| | 02:14 | It's just making the detail
show up just a little bit crisper.
| | 02:17 | Finally, the image is overall a
little bit overexposed, so let's reduce the
| | 02:22 | Exposure down by dragging the slider here to the
left-hand side just a little bit, maybe about -10.
| | 02:28 | There, this image is now looking much
better than it was when we initially started.
| | 02:33 | The specific techniques that you would use for
any other image will vary, depending on the image.
| | 02:38 | It's going to take some playing around
with to be able to get the image to look
| | 02:42 | just the way that you want it.
| | 02:44 | I'll go ahead and close the Image Adjustment tool
and deselect my image to see the final results.
| | 02:49 | While the Image Adjustment tools here
are not meant to replace a professional
| | 02:53 | image editing tool such as Photoshop,
they will get you pretty close on an image
| | 02:58 | that's already almost there.
| | Collapse this transcript |
| Spanning an image across two pages| 00:00 | One of the very cool things about
iBooks displayed on an iPad is that when the
| | 00:04 | documents are in the Landscape
perspective, and you swipe from one page to
| | 00:08 | another, for a moment you get to see both pages.
| | 00:12 | And a really nice effect to apply to
your books is to span an image across two
| | 00:18 | pages of your book, and that's
what we're going to do in this movie.
| | 00:21 | The image we're going to span is up here in
our Media window, and it's called big_sur.
| | 00:26 | I'm going to go ahead and drag that
image and drop it here onto Page 27 of our
| | 00:30 | layout and then close our Media Browser.
| | 00:32 | Now, when you're doing this technique, it's
oftentimes very helpful to zoom out to about 50%.
| | 00:39 | That way you can clearly see the two
pages of your document side by side.
| | 00:44 | Next, we'll go ahead and take our image,
and we'll move it up so that the top
| | 00:48 | left of the image is parked right up
to the top edge of the right-hand column
| | 00:53 | of the first page, and we'll grab the
handle in the lower right-hand corner of
| | 00:57 | the image and start stretching the image
until our mouse goes beyond the next column.
| | 01:03 | And the image should now be large
enough to be able to fill both pages.
| | 01:07 | You want to make sure that the image goes all
the way down to the very bottom of the page.
| | 01:12 | You'll see the blue indicator lines
letting you know that you've reached that point.
| | 01:17 | When you have, go ahead and release
the mouse, and now your image is spanning
| | 01:21 | from the top of the page, all the way
to the bottom, and from this column, all
| | 01:25 | the way past the edge of this column.
| | 01:27 | The next thing we need to do is to make a duplicate
copy of this image that's exactly at this size.
| | 01:33 | Now, you could of course use copy and
paste to do this, but a faster way is to
| | 01:37 | simply hold down the Option key on
your keyboard and click and drag the image
| | 01:41 | over to the next page.
| | 01:43 | As soon as you do, an identical copy of the
image will be moved over to the right-hand page.
| | 01:49 | Deselect both images by clicking away,
then click one time on the new image on
| | 01:53 | the right-hand side, make sure that
it's a Floating image and then click and
| | 01:57 | drag that image back over
towards the left-hand side.
| | 02:00 | If you move up or down with the image,
don't worry about it, because you'll
| | 02:04 | see the blue lines that will indicate when your
image is snapped to the correct orientation.
| | 02:08 | When your mouse gets close to the middle
of the page, let go of your mouse, then
| | 02:12 | come back over to the back edge of
the image and continue dragging over.
| | 02:16 | You can visually see when the images
look like they're getting pretty close, and
| | 02:20 | then iBooks Author is going to help you
out by giving you some snap lines when
| | 02:25 | the image is snapped in the correct location.
| | 02:28 | Go ahead and release the
mouse when you see this.
| | 02:30 | And now we have a seamless image that goes
back and forth that spans both of our pages.
| | 02:36 | We can go ahead next and apply a crop
to this image by deselecting and clicking
| | 02:40 | once on the right-hand image.
| | 02:42 | We'll then go up and use the Mask tool
and adjust our mask so that it completely
| | 02:47 | fills this side of our page.
| | 02:50 | You want to make sure that the right-hand
side of the crop lines up with the
| | 02:54 | inner edge of the left column of text.
| | 02:56 | Then when you release your mouse, you can see
that the image is properly aligned in place.
| | 03:02 | Let's go ahead and zoom our page back
in to 100% so we can have a close up look
| | 03:07 | and make sure that we've got
our alignment exactly right.
| | 03:10 | It looks like our alignment is just a
little bit off right here, we can see
| | 03:13 | where the edges are not quite right.
| | 03:16 | So I'll zoom back out, I'll deselect,
then click one time on my image to select
| | 03:23 | it, click the Edit Mask tool, and then
click on my image again and drag it until
| | 03:31 | I get the image perfectly aligned.
| | 03:34 | At that point I can release
the mouse and do another check.
| | 03:38 | I'll zoom back into my image at 100%,
drag over to look and see, and now it
| | 03:44 | looks like my image has seamlessly
been mapped between the two sides.
| | 03:48 | You may want to double check that
your left-hand side of the image is also
| | 03:52 | aligning in the correct location.
| | 03:54 | If you need to, you can apply
a mask to that page as well.
| | 03:57 | Let's go ahead and zoom out to about
50% so we can see the entire effect.
| | 04:02 | Now, when we slide our mouse from one
page to the next, we'll see that the image
| | 04:06 | seamlessly goes from one page to another.
| | 04:08 | It looks like we've got some overset
text here, and it will be good to be
| | 04:12 | able to deal with that.
| | 04:14 | So we'll simply go ahead and add a
new page at the end, and this time we'll
| | 04:18 | add a 2 Column Layout that adds one more page,
and we have just a little bit of overset text.
| | 04:23 | So let's go ahead and deal with that
by simply adding one large image to it.
| | 04:26 | I'll go ahead and open my Media Browser,
and I've got an image called seagull2.
| | 04:30 | I'll go ahead and click on
that image and drag it into place.
| | 04:33 | Close my Media window, and now I'm
going to get this seagull image to
| | 04:37 | completely fill this space.
| | 04:38 | So I'm going to go ahead and drag it
up in place, grab the lower right-hand
| | 04:42 | corner, filling the entire span of the page.
| | 04:46 | I'll go ahead and add a crop, click on
the edge of the crop, and then drag my
| | 04:52 | crop so that it fills the space, and
drag the top edge up until my text is
| | 04:58 | aligning equally on both sides.
| | 05:00 | I'll deselect, and now I have one final
image that fills up that space nicely.
| | 05:05 | There are a lot of things that you can
do with images in iBooks Author in order
| | 05:09 | to improve the look of your documents.
| | 05:11 | It just takes a little bit of
creativity and some time playing around with the
| | 05:15 | images to get them to all work together.
| | Collapse this transcript |
|
|
7. Working with ShapesUnderstanding shapes| 00:00 | iBooks Author has some basic drawing
tools that allow us to create shapes and
| | 00:04 | add them to our documents.
| | 00:06 | Now, shapes can take one of two forms.
They can either be open shapes or closed shapes.
| | 00:11 | Open shapes are simply lines.
| | 00:14 | They can be straight or curved, simple or complex,
but all open shapes have two ends of their lines.
| | 00:21 | These endpoints can be simple ends or
they can be decorated with items like
| | 00:26 | arrows, boxes, or circles.
| | 00:30 | The line portion of a
shape is called the Stroke.
| | 00:33 | Now, you can control the stroke of a
shape over here in the Graphics Inspector.
| | 00:37 | By selecting a line, you can control
the style of the line, the color of the
| | 00:43 | line, the thickness, and both of the
Endpoints, both the left-hand endpoint and
| | 00:49 | the right-hand endpoint.
| | 00:51 | Closed Shapes on the other hand are
simply lines that have no beginning and no
| | 00:55 | end and thus form a completely Closed
shape, such as a rectangle, a circle, a
| | 01:00 | star, or a more complex shape.
| | 01:03 | With a Closed shape, the Stroke is the
line that forms the outside edge of the shape.
| | 01:08 | You can set all of the same Stroke
options for the line of a Closed shape as you
| | 01:13 | can for an open shape, with
the exception of the endpoints.
| | 01:17 | Since this is a continuous line, there
are no endpoints, and so iBooks Author
| | 01:21 | doesn't even show us the
option to be able to select these.
| | 01:25 | Closed shapes do have an
active fill property, however.
| | 01:28 | The fill includes all of
the area inside of the line.
| | 01:33 | You can set a shape's fill to None to
create a hollow shape or fill the area
| | 01:40 | with a solid color, a gradient, you
can even fill it with an image or apply a
| | 01:46 | tint to an image, to give
you a lot of creative options.
| | 01:51 | Now, open shapes do have a fill
property, but if you select the fill for most
| | 01:56 | open shapes, there is no area to be
filled, so it simply doesn't get applied.
| | 02:03 | But on some more complex shapes, such
as a curve, if you apply a fill, you'll
| | 02:09 | see the areas that are under
the curve get the fill applied.
| | 02:13 | Now, how do you figure out what
the areas under the curve are?
| | 02:16 | If you can imagine a line that would
stretch from one endpoint of a line to the
| | 02:22 | other, the areas that are underneath
the curve are the areas that get filled.
| | Collapse this transcript |
| Adding shapes| 00:00 | Now let's look at some ways
to add shapes to our documents.
| | 00:03 | The most simple way is to simply come
up to your Toolbar, select the Shapes
| | 00:07 | tool, and then select one
of the predefined shapes.
| | 00:11 | Let's go ahead and select the Rectangle shape.
When you do, a rectangle appears on screen.
| | 00:17 | Now, since this is simply an object,
we can grab the object and move it.
| | 00:21 | We can grab one of the corner handles
of the object and drag it down in order
| | 00:25 | to stretch the shape down larger, or we can
drag it to the right to make the shape wider.
| | 00:30 | If you hold down the Shift key on your keyboard
while you drag, you get a uniformly-scaled shape.
| | 00:36 | Let's go ahead and move the shape over
to the side, and let's add another shape,
| | 00:40 | only this time we'll go up to the
Insert menu and go down to Shape, and here we
| | 00:45 | have a listing of all of the same
types of shapes that we can add.
| | 00:48 | This time, go ahead and
select the Rounded Rectangle.
| | 00:51 | The rounded rectangle works exactly
like the regular rectangle, where we can
| | 00:55 | resize it, we can hold down the Shift
key to resize it uniformly, or we can grab
| | 01:00 | some of the middle handles and
resize a particular axis at one time.
| | 01:06 | But the rounded rectangle has a Radius
tool as well, and that's indicated by the
| | 01:10 | small blue circle on the top of the rectangle.
| | 01:14 | If you grab the blue Radius tool and
drag it to the right, the shape becomes
| | 01:19 | more rounded until eventually
you get pretty much a circle.
| | 01:23 | If you drag it more to the left,
you move more towards a rectangle.
| | 01:26 | So go ahead and adjust the
roundness of your rectangle.
| | 01:30 | We'll go ahead and move
that off to the side as well.
| | 01:34 | Let's go back up to the Shapes menu, and
this time come down and select the Star shape.
| | 01:39 | The star shape not only has all of the
same types of properties that the first
| | 01:44 | two rectangles had, it also has the
Radius tool, where we can grab the radius,
| | 01:50 | and as we drag in, the points of the
star drag down into sharper points or we
| | 01:55 | can drag the radius out and
have more of a pentagon shape.
| | 01:59 | The Star tool also has an additional
parameter letting us control the number
| | 02:04 | of points of the star that are created, and
that's using this Heads-Up Display, or HUD, for points.
| | 02:10 | Initially it's set to 5, but as we drag
the slider to the right, we can increase
| | 02:14 | the number of points to our star.
| | 02:16 | When we deselect, we have a star that's
formatted the way that we want to use it.
| | 02:21 | These are the most basic
controls for creating shapes.
| | 02:25 | In the next movie, we'll
look at editing our shapes.
| | Collapse this transcript |
| Editing shapes| 00:00 | In the last movie, we created some basic
shapes. Now let's look at editing these shapes.
| | 00:06 | To do that, simply click one time on
a basic shape that you've created and
| | 00:11 | then go up to the Format menu and come down
to the Shape menu and select Make Editable.
| | 00:17 | When you make a shape editable, you'll
notice that the corner points of the shape
| | 00:22 | have changed from the White Control
Handles to Solid Red Control Handles.
| | 00:27 | If you click one of these red
control handles, and you drag it to a new
| | 00:31 | location, the other control handles all
remain constant, while the one that you
| | 00:36 | move causes the shape to distort.
| | 00:39 | You can then grab the Control Handle
again and move it to a new location.
| | 00:43 | Each of the different control points
can be moved independently of each other.
| | 00:47 | If you deselect by clicking away from
the shape and then click on the shape
| | 00:52 | again, you return back to the selection where
you can simply change the size of the shape.
| | 00:57 | If you want to continue editing, all
you need to do is click one time on the
| | 01:02 | shape to select it and then click a
second time on one of the lines of the shape
| | 01:07 | in order to get back to the editing mode.
Now you can continue editing the shape.
| | 01:11 | To add even more interest to your shape,
if you double-click on one of the red
| | 01:16 | endpoints, you can convert between a
Straight endpoint and a Curved endpoint.
| | 01:21 | When you create a Curved endpoint,
you'll see these two small additional curve
| | 01:25 | handles that come out on either side.
| | 01:28 | If you grab those and drag them in
either direction, you can change the angle at
| | 01:32 | which the curve is coming
in and out of that point.
| | 01:37 | If you select a shape that has a curve
already and go up to the Format menu,
| | 01:42 | come down to the Shape menu, and choose
Make Editable, you'll notice that on a
| | 01:47 | Curved shape you have additional points.
| | 01:50 | Now we can control how each of the in
points and out points of the curve are adjusted.
| | 01:56 | You also get the handles on these
to be able to adjust those as well.
| | 02:02 | On a complex shape such as our star, when
we choose Format > Shape > Make Editable,
| | 02:07 | you'll notice that we get lots of control points.
| | 02:11 | So we can change a lot of the different
parameters about this particular shape,
| | 02:15 | each of them independent of the others.
| | 02:17 | I'm going to go ahead and create
another Rectangle shape so we just have a
| | 02:22 | plain, basic rectangle here.
| | 02:24 | And go up to the Format menu,
choose Shape, and make it editable.
| | 02:29 | Then another option that we have
is to smooth out the shape entirely.
| | 02:33 | If I go back up to the Format menu with
my shape still selected, go down to the
| | 02:38 | Shape menu, I have two additional
options, one called Smooth Path and one
| | 02:43 | called Sharpen Path.
Let's go ahead and choose the Smooth Path.
| | 02:47 | When you do that, then each of the
control points around your shape are all
| | 02:52 | converted into smooth points, so each
of them now all have handles on them so
| | 02:57 | the shape can be adjusted.
| | 02:59 | If you have a Smooth shape, you can go
up to the Format menu, go down to Shape
| | 03:04 | and choose Sharpen Path, and that will
convert all of the Curved endpoints back
| | 03:09 | into Straight endpoints that do not have
the additional control handles on them.
| | 03:13 | When you're working with shapes, you're
only limited by your own creativity as
| | 03:17 | to what you can do with the basic
shapes that you'd have to start with.
| | 03:21 | Next, we'll look at
drawing a shape from scratch.
| | Collapse this transcript |
| Drawing shapes| 00:00 | Aside from the pre-defined basic shapes
that we have available to us in iBooks Author,
| | 00:05 | we can also create our own shapes by
going up to the Shape menu, coming
| | 00:09 | down and choosing the Pen
tool down at the bottom.
| | 00:11 | Now don't be intimidated by the Pen
tool, it's actually pretty easy to use.
| | 00:16 | To create a shape, all you need to do
is click the mouse one time to create a
| | 00:19 | point, move the mouse to a new
location, and click the mouse again.
| | 00:24 | You've now created a simple line.
| | 00:27 | If you want to create a curved line,
move the mouse to a new location, click
| | 00:31 | and hold the mouse and then start to drag,
and as you drag you'll create a curved point.
| | 00:37 | You'll use these handles to adjust
the curve to get the correct shape
| | 00:41 | that you're looking for.
| | 00:42 | When you're happy with the shape,
simply let go with the mouse.
| | 00:45 | You can move the mouse to a new location.
| | 00:47 | Again, click, hold, and drag, and
you're able to create another curved point.
| | 00:54 | If you want to create an open shape,
all you need to do is press the Escape key
| | 00:59 | on your keyboard to change away from
the Pen tool, and you have your new line.
| | 01:04 | Let's go ahead and create another line.
| | 01:05 | We'll go up to the Shapes menu, we'll
come back to the Pen tool, and this time
| | 01:10 | we'll click and drag out handles to
start with, then we'll come to a new
| | 01:15 | location, click and continue dragging,
and now we have a curve going both out of
| | 01:21 | the first point and into the second point.
| | 01:23 | We'll release our mouse, move your Pen
tool to a new location, click and drag.
| | 01:29 | We'll come down a little bit further,
click and drag, come back up to this
| | 01:33 | side, click and drag.
| | 01:36 | And then to create a closed shape, all we
need to do is to click on the starting point.
| | 01:40 | That'll create a completely closed shape.
| | 01:43 | Now we can create both open shapes and closed
shapes using our Pen tool. How about editing?
| | 01:49 | If we come back, and we select one time
on our line--and I'm going to go ahead
| | 01:54 | and change my thickness of my line
up to about 5 points, and I'm going to
| | 01:58 | change the color so it's a little bit easier
for us to see, to a nice orange color here.
| | 02:03 | Now, if we come back with the lines
selected, and we click one time on it, we
| | 02:07 | automatically get our editing points.
| | 02:09 | We don't need to go up to the Format
menu and make the line editable like we did
| | 02:13 | with a pre-defined shape.
| | 02:15 | With a hand-drawn shape, all we need to do is
click on the line after the shape is selected.
| | 02:20 | We can then click on any of the edit
points and move them to a new location or
| | 02:25 | use the handles to adjust
the curves of the shape.
| | 02:28 | If you want to add an additional point,
all you need to do is move your mouse
| | 02:32 | somewhere onto the line, hold down
the Option key on your keyboard and your
| | 02:36 | mouse cursor will change to
the Pen tool with a small plus.
| | 02:40 | Click the mouse, and you'll
add a new point onto your line.
| | 02:45 | You can then drag that new point to a
new location and adjust the handles.
| | 02:49 | If you want to convert that point from
a curved point to an endpoint, all you
| | 02:54 | need to do is double-click the point,
and it will automatically convert the
| | 02:58 | curved point to an endpoint.
| | 03:00 | If you want to get rid of a
particular point, all you need to do is have it
| | 03:04 | selected and then hit the Delete key on
your keyboard and the point will go away
| | 03:09 | and your line will automatically
readjust to the two points that are on either
| | 03:13 | side of the point that you just deleted.
| | 03:15 | These are some of the basics
of working with the Pen tool.
| | 03:18 | In the next movie, we'll create a
little bit more complex shape and use that
| | 03:22 | shape to mask an area of a photograph to
make a really nice effect inside of our
| | 03:28 | Explore California Travel Guide.
| | Collapse this transcript |
| Creating a custom shape mask| 00:00 | Now that we've had a chance to work
with creating some shapes, let's go ahead
| | 00:04 | and use a shape to mask this photograph.
| | 00:07 | In previous movies, we've seen how we
can use tools such as the Alpha channel
| | 00:11 | to get rid of a solid color background in
order to allow text to flow around an object.
| | 00:18 | However, in this case, what we'd like
to do is we'd like to have the barrel so
| | 00:22 | that the barrel itself is just
sitting here in our text and the text flows
| | 00:26 | around the edge of the barrel.
| | 00:27 | But the photograph around the barrel is a
little bit too difficult to use the Alpha tool.
| | 00:31 | The best way to accomplish what we
want to do is to use a shape and then mask
| | 00:36 | this photograph with a custom designed shape.
| | 00:39 | Let's begin by going up to the
Shapes menu and selecting the Pen tool.
| | 00:44 | Next, we want to use the Pen tool to
draw an outline as closely as we can to the
| | 00:50 | edges of the barrel.
| | 00:51 | I'll start by clicking my mouse down in
the lower left-hand corner of the barrel
| | 00:55 | to create an endpoint.
| | 00:57 | I'll then move up here to the upper
left-hand corner of the barrel, and I'll
| | 01:00 | click and drag to create a rough curve that
generally comes close to the edges of the barrel.
| | 01:07 | I'm not going to be worrying about getting
this line exactly precise on my first attempt.
| | 01:12 | I'll release my mouse then come over
to the top edge of the barrel, click to
| | 01:16 | add an endpoint then come down to the
lower edge of the barrel, click to add an
| | 01:20 | endpoint, and I'll go ahead and drag
that one until my line gets a little bit
| | 01:24 | curved, and then I'll come over and click
on the starting point to close up my shape.
| | 01:29 | Next I'll go ahead and increase the
thickness of the line to about 5 points and
| | 01:34 | change the color, so it's a little bit
easier for you to see what I'm doing.
| | 01:38 | I'll then go back and click on my
line one more time to reselect it.
| | 01:42 | Then I'll go back and make
some adjustments to my endpoints.
| | 01:46 | I'll start with this upper left point.
| | 01:48 | When I click on it, I can see
that both handles are out pretty far.
| | 01:51 | If I take this top handle and I drag
it back in so that it's much closer down
| | 01:56 | to my endpoint, it flattens
out the out portion of my line.
| | 02:02 | I can then use my other handle to drag
around until I get an approximate shape
| | 02:07 | for the left-hand edge of my barrel.
| | 02:09 | The top of my barrel is looking
pretty good, but I need to adjust the
| | 02:13 | bottom edge of the barrel.
| | 02:14 | I'll start by working with this
endpoint down here in the lower right.
| | 02:18 | I'm going to leave the right-hand side
of this alone, but I'm going to again
| | 02:23 | grab the lower portion of this endpoint and
drag it up until it gets close to my endpoint.
| | 02:29 | Now as I'm doing that, you'll notice
that the other edge kind of moves a
| | 02:32 | little bit because it's difficult when you
start getting in really close to control that.
| | 02:37 | Not a problem, we'll simply come out to the longer
handle on the right and adjust it until our
| | 02:43 | curve matches the edge of the barrel.
| | 02:45 | Now we've got a pretty good outline
of our barrel with our curve.
| | 02:49 | And even though our curve has this bright
orange stroke on it, that's not going to be a
| | 02:53 | problem either. It just helps us in seeing it.
| | 02:56 | To make the mask, I'm going to go ahead
and deselect, and I'm going to click one
| | 03:01 | time on my path to select it, then hold
down the Shift key on your keyboard and
| | 03:06 | click one time on the photograph.
| | 03:08 | Now we have the photograph
and our path both selected.
| | 03:12 | We then go up to the Format menu, go down to
Image, and select Mask with Selected shape.
| | 03:20 | You can also use the keyboard command
Command+Shift+M. When this happens, we can
| | 03:25 | see that we get the proper
masking of our photograph.
| | 03:29 | We can then deselect by clicking away
and drag our barrel down to the lower
| | 03:34 | portion of our page.
| | 03:35 | We now notice that there is one more
slight problem, and that's that the barrel
| | 03:39 | is cut off on a slight angle.
| | 03:41 | So we might as well go ahead and rotate
the barrel just a little bit so that it
| | 03:46 | appears as if it's just simply
sitting on the bottom of the page.
| | 03:49 | We can do that with the image selected
by going up to our Media Inspector and
| | 03:53 | going over to the Metrics Inspector.
| | 03:56 | We can then adjust the rotation of the
barrel just a couple of degrees, and now
| | 04:02 | when we move the barrel down into position,
we have the effect that we're looking for.
| | 04:07 | So a great technique for using custom
shapes inside of iBooks Author is to
| | 04:11 | create custom masks with them.
| | 04:13 | This is just one of the possibilities that you
have with working with shapes in iBooks Author.
| | Collapse this transcript |
|
|
8. Working with TablesUnderstanding tables| 00:00 | To display tabular data in your iBook,
you only need to follow three simple steps.
| | 00:05 | Step one, create your table; Step two,
enter or import your data; and then Step three,
| | 00:12 | format your table and your data to
match your book's layout in iBooks Author.
| | 00:17 | Now I do want to emphasize that tables in iBooks
Author are only meant for displaying tabular data.
| | 00:24 | It's not meant to be a replacement for your favorite
spreadsheet programs such as Numbers or Excel.
| | 00:30 | Now with that said, you are able to
create formulas and set up a limited amount
| | 00:35 | of conditional formatting based on
the data contained within your table.
| | 00:39 | And your tables in iBooks
Author can contain text or numbers.
| | 00:43 | Let me show you what I mean.
| | 00:45 | In this table, we have all of the different tour
packages available within our Backpack California series.
| | 00:52 | And in the first column, under Difficulty
we have text describing the tours as
| | 00:57 | being either Easy, Moderate or Hard, and each
cell is colored based on the level of difficulty.
| | 01:06 | Now if we go into one of these cells
by simply clicking once to select the
| | 01:09 | overall object, click a second time to
select the table, and then double-click
| | 01:15 | to select an individual cell, we can then simply type
in Easy, hit the Tab key, and when we do, not only does
| | 01:25 | the text get entered into the cell,
but the background color of the cell
| | 01:29 | automatically changes to reflect the
same color as the other cells that are
| | 01:33 | listed as Easy, giving our users a
quick way to be able to identify the
| | 01:38 | information in the cell.
| | 01:40 | If we look over here in the far right-
hand column, we can see that the Complete
| | 01:43 | Tour price is listed and the values in
these cells are calculated based on the
| | 01:49 | sum of the values in each
of these other three columns.
| | 01:52 | Now we can check this by once again
double-clicking inside of a Gift Package
| | 01:57 | cell, and then we'll simply type in a new value, such as 74.99.
| | 02:04 | This time when we hit the Tab key, you'll notice
that the price has been updated automatically for us.
| | 02:10 | Now throughout this chapter, we're
going to explore how to create tables, add
| | 02:14 | data to your tables, apply fixed and
conditional formatting to your tables, and
| | 02:19 | even learn how to create a formula.
| | Collapse this transcript |
| Creating tables| 00:00 | The first step in creating our Tour
Package Summary Table is to create the table
| | 00:04 | itself, and there's a couple
of ways that we can do this.
| | 00:08 | The first and most direct way is to
simply come up to your Toolbar and click on
| | 00:12 | the Insert a Table button.
| | 00:14 | When you click on that button, a basic
table is created for you and the Table
| | 00:19 | Inspector should automatically open up
if it's not already open on your screen.
| | 00:24 | You can then adjust the size of the
table by grabbing the handles in the lower
| | 00:28 | right-hand corner of the table.
| | 00:31 | You can also change the number of rows
and number of columns by adjusting the
| | 00:35 | values in the Table Inspector.
| | 00:39 | With our table selected, let's go
ahead and delete this table and look at
| | 00:43 | another way of creating our table.
| | 00:45 | Let's go back up to the Create a Table
tool, only this time instead of clicking
| | 00:50 | on the tool, hold down the Option key
on your keyboard and then click the tool.
| | 00:55 | You'll notice that nothing appears to
happen except for when you move your mouse
| | 00:58 | back down onto your page, your
cursor has changed into a plus.
| | 01:03 | Now move your mouse towards the middle
of the page, click and start to drag.
| | 01:09 | As you start to drag to the right,
you'll add additional columns to your table.
| | 01:14 | If you begin to drag in the downward direction,
you'll add additional rows to your table.
| | 01:19 | For our table, we're going to
need seven columns and five rows.
| | 01:23 | When you have that, go
ahead and release your mouse.
| | 01:26 | If you need to make additional
adjustments, you can come up to the Table
| | 01:30 | Inspector, and you can either use the up
and down arrows to increase or decrease
| | 01:35 | the number of columns or rows, or you
can simply select the value in there and
| | 01:39 | type in the value that you want and
then hit the Enter or Return key on your
| | 01:43 | keyboard to lock in the
correct number of rows and columns.
| | 01:48 | Those are the two most
basic ways of creating a table.
| | 01:51 | The third way of creating a table is to simply
go up to the Insert menu and go down to Table.
| | 01:56 | This does the exact same thing as
simply clicking on the Table tool itself.
| | 02:01 | Now that we have our basic table, the
next thing we need to do is to bring
| | 02:05 | in the data that we're going to be working
with, and we'll do that in the next movie.
| | Collapse this transcript |
| Adding and importing data into tables| 00:00 | To add data to your table, all you
need to do is simply click one time on the
| | 00:05 | table to select it and
then double-click on a cell.
| | 00:08 | You can then begin typing something,
such as Big Sur Retreat, right into the
| | 00:14 | cell and then hit the Tab key on
your keyboard to go to the next cell to
| | 00:19 | type in the next piece of data such as Moderate.
| | 00:22 | Continue to hit the Tab key
to jump to the next cell.
| | 00:26 | At the very bottom of your Table
Inspector, you'll see there is an option here
| | 00:30 | that says Return key moves to the next cell.
| | 00:33 | If you check that box and then
continue typing such as 3, and then hit the
| | 00:38 | Return key, the next selected cell will
jump down to the next row to the first
| | 00:45 | location where you were
typing in the previous row.
| | 00:49 | So for instance, I could then go ahead
and add Channel-Islands-Excursion, hit the
| | 00:54 | Tab key to jump over to the next cell
and type in Easy, hit the Tab key again to
| | 01:01 | type in 1, hit the Return key, and
it will take me down to the next line.
| | 01:06 | If you have this Table Options
unchecked, and you type in some text such as
| | 01:11 | In-the-Steps-of-John-Muir, and you hit
Return now, you'll just get a new line
| | 01:17 | return inside of the same cell. It
will not jump down to the next line.
| | 01:22 | Let's go ahead and click on the first
cell, Big Sur, hold down the Shift key on
| | 01:28 | your keyboard, and click on the bottom
right-hand cell to select all of the cells
| | 01:34 | and then press the Delete key on
your keyboard to delete all of the text.
| | 01:38 | Next, we'll go ahead and import
some text from a text document.
| | 01:42 | I'm going to jump over to my Backpack
California Tours.txt file, which you can
| | 01:47 | find inside of the Chapter 08 exercise files.
| | 01:51 | This document is simply a Tab Delimited
Text file that contains the basic text
| | 01:55 | that we're going to need to
get started building our table.
| | 01:58 | To add it into our table, all we need
to do is press Command+A on our keyboard
| | 02:03 | to select the text, then Command+C
on our keyboard to copy the text.
| | 02:07 | We can then go over to our Explore
California file, click on the table to select
| | 02:13 | it, then click once on the first
cell so that that cell is selected.
| | 02:18 | You can then press Command+V on your keyboard
to paste in all of the data out of the text file.
| | 02:24 | You can then deselect by clicking away
from the table, then click one time on
| | 02:29 | the table, drag the table into place,
grab the lower right-hand corner, and drag
| | 02:35 | it over to stretch out your
cells to your desired width.
| | 02:38 | When I'm working with tables, I oftentimes
like to move my Table Inspector over
| | 02:43 | here to the right-hand side. That
way I can see all of my page while I'm
| | 02:47 | working on it and have my Table Inspector
still available for me to work with all of my text.
| | 02:53 | Now that we have some text in our
table to work with, in the next movie we'll
| | 02:57 | look at applying some additional formatting to
our table and to the data inside of those cells.
| | Collapse this transcript |
| Formatting table cells and data| 00:00 | Now that we have some data in our table,
let's go ahead and begin applying some
| | 00:04 | formatting to make our table
look like the rest of our book.
| | 00:08 | And let's begin with this first column here.
| | 00:11 | When we look at the first column, the text in
many of these cells is not quite wrapping right.
| | 00:16 | We've got a couple of these rows where
we've got three lines of text, and it
| | 00:20 | would look a little bit better if we
could get these to wrap a littler neater.
| | 00:24 | So to do this, simply click once on the
table to select it and then click once
| | 00:28 | inside of the first cell to select that.
| | 00:30 | Then if you move your mouse from
inside the cell over to the right-hand edge,
| | 00:35 | you'll see that you get the double-headed arrow.
| | 00:37 | You can then click and drag a little
bit to the right until you get the text to
| | 00:43 | align properly within that cell.
| | 00:45 | By doing this, it makes this entire
first column a little bit wider and takes
| | 00:49 | some space out of the next column of text.
| | 00:53 | The next thing we need to do is now clean up how
much space each row is taking up in our table.
| | 00:59 | And we do that by simply clicking in
the first cell and dragging down, and that
| | 01:04 | should select all of those rows.
| | 01:06 | We can then go over to our Table Format
bar, and you want to make sure that you
| | 01:11 | have Automatically
resize to fit content checked.
| | 01:14 | And then in the Row Height, simply
click the down arrow one time, and it
| | 01:19 | should auto-adjust the size of all of your
different rows so that they're all an equal height.
| | 01:25 | We can then deselect by clicking
anywhere not inside the table, and we can drag
| | 01:29 | our table back down until it's
better centered on our page again.
| | 01:33 | The next bit of formatting that we
want to do is to go ahead and treat all of
| | 01:37 | these values over here on the
right-hand side of the table.
| | 01:40 | All of these values
should really display currency.
| | 01:43 | So to do this, make sure you've
selected your table by clicking on it one time
| | 01:47 | and then click one time
in the cell that says 750.
| | 01:51 | Hold down the Shift key on your keyboard and come
down to the lower right-hand cell and click one time.
| | 01:57 | By holding down the Shift key, it
will increase your selection in both the
| | 02:01 | horizontal and vertical direction so that now all
of the cells that we want to format are selected.
| | 02:07 | Go over to your Table Inspector and
click on the Format tab, then in the Cell
| | 02:12 | Format click the dropdown menu, and
change from Automatic to Currency.
| | 02:18 | You'll notice now that all of the
values are now listed in dollars with the
| | 02:21 | correct amount of decimal places.
| | 02:23 | If you want to change the number of
decimal places, you can do that by using the
| | 02:27 | up or down arrow for Decimals
inside of the Cell Format area.
| | 02:31 | I'm going to go ahead and leave
mine set to just 2 decimal places.
| | 02:34 | Now to clean up the alignment with our
selections still made, let's go over to
| | 02:38 | the Text Inspector and then
right-hand align all of our values.
| | 02:44 | This way all of the decimal places
now line up and all of our text shows up
| | 02:48 | towards the right-hand side of our page.
| | 02:50 | While we have our Text Inspector, let's go
ahead and adjust some of the other text cells.
| | 02:55 | Let's come down here to the bottom cell
in the Difficulty's column and click and
| | 03:00 | drag up into the right in order to select all of
the cells in the Difficulty column and Days column.
| | 03:07 | Then we'll go ahead and click the Center
button in the Text Align so that all of
| | 03:12 | the texts in those cells become center-aligned.
We'll do the same thing for our top row.
| | 03:17 | We'll click and drag to the right, and
that will select all the cells, and then
| | 03:22 | we'll center the text.
That's starting to look a lot better.
| | 03:25 | The next bit of formatting that we want
to do is we want to come over here and
| | 03:29 | apply some formatting to the column
that has the days of the tour listed in it.
| | 03:33 | So we'll click one time on the first
cell to select it, and then we'll come
| | 03:37 | down to the bottom cell, click and drag up,
that way we get the entire column selected.
| | 03:43 | We'll then go back over to our Table
Inspector, and in the Format option under
| | 03:49 | Cell Format, we're going to go ahead and
choose Duration from the dropdown menu.
| | 03:53 | Now when this happens, we need to set
the correct number of Duration Units.
| | 03:58 | And the first thing you want to do
is grab the Units slider and drag it a
| | 04:02 | little bit to the left so that the slider is
showing over top of Days, Hours, and Minutes.
| | 04:08 | Now our tours are not going to be that
detailed, so we'll go ahead and grab the
| | 04:12 | right-hand side of the slider and drag
it over towards the left in order to make
| | 04:17 | sure that only days are selected.
| | 04:18 | We'll then select under Format
the option that has days in it.
| | 04:22 | Now our column is formatted correctly.
| | 04:25 | The only problem is that in the current
version of iBooks Author when you adjust
| | 04:29 | this slider, any number values that you
had inside of your cells will start off
| | 04:34 | being numbered as hours rather than days.
This is not a problem.
| | 04:39 | We can now just simply come into the first
cell and type in the correct number of days.
| | 04:44 | That would be 3, and then I'll hit the
down arrow on my keyboard, and you'll see
| | 04:48 | that it's now converted to 3 days.
| | 04:51 | Then go ahead and type in a 1, hit the
down arrow again on your keyboard, a 3,
| | 04:57 | a 2, and a 4, hitting the down
arrow in between each time.
| | 05:00 | When you get to the bottom cell, simply
hit the Tab key to jump over to another cell.
| | 05:06 | Now that our days are formatted
correctly, let's go ahead and adjust the
| | 05:09 | formatting of some of the
lines of our table itself.
| | 05:13 | To do that, click one time on the
table to select it and then go over to the
| | 05:18 | Table tab of the Table Inspector.
| | 05:20 | And down here in this middle section
called Cell Borders, we have the ability to
| | 05:24 | go ahead and change the way
that the cell borders appear.
| | 05:28 | The first grouping allows us to select
only the left-hand edge of whatever the
| | 05:33 | selection that we have is.
| | 05:35 | The next option allows us to select all of
the center columns that are not around an edge.
| | 05:42 | The right-hand option allows us to
select only the right-hand edge of
| | 05:45 | whatever our selection is.
| | 05:47 | The next grouping allows us to select
the top edge, any of the middle horizontal
| | 05:53 | lines, or only the bottom edge.
| | 05:57 | The next option allows us to select all
of the interior lines, and finally we can
| | 06:02 | select the outer line.
| | 06:03 | That allows us to make the selection
and then apply whatever formatting that we
| | 06:07 | want to use down in the bottom.
| | 06:09 | So with the outside borders tool
selected, let's go ahead and increase the
| | 06:14 | thickness of the line from 0.5 to 2 points.
| | 06:18 | That will create a much thicker line
around the outside edge of our table to add
| | 06:23 | a little bit more definition
to the table itself.
| | 06:26 | To deselect, simply click off the
table, and you can see the result.
| | 06:30 | Click one time on the table, click one
time on the first cell, then hold down
| | 06:35 | the Shift key and click on the right-
hand most cell on the top column to
| | 06:39 | select the entire top row.
| | 06:41 | This time we only want to apply some
formatting to the bottom line of this set of cells.
| | 06:47 | So to do that, we'll click the bottom
line option, and then we'll increase the
| | 06:51 | thickness of that line to 3 points.
| | 06:54 | If you wanted to, you could also
change that line to be dashed or dotted.
| | 07:00 | I like the way that it looks with the
solid lines, so I'll go ahead and leave it
| | 07:04 | set on that and deselect.
That's looking a little bit better.
| | 07:07 | The next thing that we want to apply
some formatting to is this left-hand column
| | 07:11 | that has all of the names of all of our tours.
| | 07:13 | It would be nice if this column of
text stood out a little bit more from
| | 07:18 | the rest of the table.
| | 07:19 | So to do that, we'll click one time
on the table to select it, one time on
| | 07:23 | the first cell, and then hold down the
Shift key and click one time on the bottom cell.
| | 07:28 | This selects all of that text.
| | 07:30 | Then in the cell background, we could
set the dropdown menu, and we could choose
| | 07:34 | to have a different type of fill
such as a Gradient Fill on those cells.
| | 07:38 | I like having a color fill, and then click the
color chip in order to open up my color chooser.
| | 07:44 | I'll then go ahead and select the
same yellow color that we've been using
| | 07:47 | earlier, and I'm going to go ahead and adjust
the opacity of that color down to about 50%.
| | 07:53 | That will allow the text to be highlighted
a little bit, but it won't be overpowering.
| | 07:58 | We'll go ahead and close the color chooser,
and that's looking a little bit better too.
| | 08:03 | Finally, we can go ahead and adjust
whether or not we want to have alternating
| | 08:07 | rows show up in another column.
| | 08:10 | By default, alternating
rows already show up like this.
| | 08:14 | We can uncheck the box and have
all of our cells to be formatted
| | 08:17 | without alternating rows.
| | 08:19 | I like having the alternating rows
having another color, it helps with
| | 08:23 | readability a little bit
for our table. All right.
| | 08:26 | Things are looking much better.
| | 08:28 | In the next movie, we'll go ahead and
enter in a formula over here to do some
| | 08:32 | calculations to calculate
our complete tour totals.
| | Collapse this transcript |
| Performing calculations| 00:00 | Now although iBooks Author is no
replacement for your favorite spreadsheet
| | 00:04 | program for doing your analysis, you can do some
basic calculations with iBooks Author in your tables.
| | 00:10 | In this case, we want our final column
over here, the Complete Tour price to
| | 00:15 | have a sum of all of the values
from these other three columns.
| | 00:19 | And to do that, we first need to select
the table, click one time on the first
| | 00:24 | cell, hold down the Shift key and click
on the third cell in order to have all
| | 00:29 | three of these cells selected.
| | 00:31 | We can then create a sum of these
cells by simply going over to the Table
| | 00:34 | Inspector and clicking on the Format tab.
| | 00:38 | Down in the Function section,
click the dropdown menu and choose Sum.
| | 00:43 | The new sum value is
automatically added to the next column for us.
| | 00:48 | That's a great way to create a sum.
| | 00:51 | Let's go ahead and press Command+Z
on our keyboard to undo that.
| | 00:55 | And let's look at another way
we can accomplish the same thing.
| | 00:57 | We can click one time on the cell to
select it, and then we can simply hit the
| | 01:02 | Equal sign on your keyboard.
| | 01:04 | This will tell iBooks Author that
we want to begin entering a formula.
| | 01:09 | You can then click one time on the
first cell, click one time on the second
| | 01:13 | cell, click one time on the third cell, and you
will see that a formula is being created for us.
| | 01:19 | Now if we look at the table, some new
extra information is being added to our
| | 01:23 | table as soon as we started creating a
formula, and that is all of our columns
| | 01:28 | are defined as letters, A, B, C, and so forth.
| | 01:33 | All of our rows are being described
as numbers, 1, 2, 3, 4, and so forth.
| | 01:39 | So each individual cell has a specific
label on it, such as this cell being cell
| | 01:45 | D3 and this cell being cell E3.
And so the simple formula becomes =D2+E2+F2.
| | 01:55 | To accept that formula, simply hit
Enter or Return on your keyboard and the
| | 02:00 | formula is calculated for you.
| | 02:02 | With that format, you can create
fairly complex formulas by individually
| | 02:07 | selecting specific cells or using other
values instead of simply adding them together.
| | 02:13 | Let's go ahead and select the cell,
though, and delete it one more time, and I
| | 02:17 | want to show you a third way to calculate a sum.
| | 02:19 | This is my favorite way of doing it.
It's nice and easy.
| | 02:22 | We'll go ahead and hit the Equal sign
so we enter into our Formula Editor one
| | 02:26 | more time, and then we'll come over to
Cell D2 and simply click and drag from
| | 02:30 | left to right until we select
all three cells from D, E, and F.
| | 02:36 | The formula is automatically written
for us of =SUM(D2:F2), meaning from Cell D2
| | 02:45 | to Cell F2 create a sum calculation.
| | 02:50 | Then simply hit Enter or Return on
our keyboard to accept that value.
| | 02:54 | Now, we could repeat that process over
and over in these additional cells, but
| | 02:59 | that could be kind of tedious and
especially if we had a large table.
| | 03:03 | So in order to make this easier, we'll
go ahead and click one time on the first
| | 03:06 | cell, and then on the lower right corner of the
cell, you can see there is a very small icon.
| | 03:11 | Go ahead and move your mouse onto that circle
icon and your Mouse Pointer turns into a plus.
| | 03:17 | Click and drag in the downward
direction, and you'll automatically copy that
| | 03:21 | formula from the first cell all
the way down to the last cell.
| | 03:26 | Now, all of these values are
being automatically calculated.
| | 03:30 | So if we come over to say the Gift
Package for one of these items, and we
| | 03:34 | change it from $50 to $49.99 and hit
Enter or Return and hit the Tab key on
| | 03:41 | our keyboard, you'll see that the new
Complete Tour price is automatically updated for us.
| | 03:47 | I'm going to go ahead and reset that
back to $50, hit the Tab key, and now my
| | 03:54 | value is correctly calculated again.
| | Collapse this transcript |
| Using conditional formatting| 00:00 | Our table is really
starting to come together nicely.
| | 00:03 | But now let's go ahead and add some
conditional formatting to our table.
| | 00:07 | And we'll do that in this Difficulty column.
| | 00:10 | So go ahead and click one time on your
table to select it, then click once on the
| | 00:14 | first cell and then come down at the
bottom and click and drag up, so you can
| | 00:19 | select all of the individual cells in that column.
| | 00:22 | Next, go up to your Table Inspector,
and in the Format tab, come down to the
| | 00:27 | section for Conditional Format
and click the button for Show rules.
| | 00:31 | I'll go ahead and move this window up a
little bit so we'll be able to see the
| | 00:35 | result as they're taking place.
We'll click the dropdown menu for Choose a rule.
| | 00:40 | Next, we need to set what type of
logical operator that we want to use.
| | 00:46 | We could have it so a rule is invoked if
the data inside of that particular cell
| | 00:51 | is say Equal to or Not equal to some
value or is Between some set of values, or
| | 01:00 | we can apply formatting based on
the text content inside of the cell.
| | 01:05 | So in this case, we want to use Text contains.
| | 01:08 | Go ahead and select that option,
and then we'll start with Easy.
| | 01:12 | So go ahead and type in E-A-S-Y, for Easy,
and then we'll click the Edit button
| | 01:17 | so that we can edit the formatting
that is applied if this condition is met.
| | 01:22 | The only formatting that we really want to
apply is we want to change the fill color.
| | 01:26 | So go ahead and click the cell for
Fill, and let's go ahead and choose this
| | 01:30 | light green color, and we can see that
any cell that contains the text Easy is
| | 01:35 | going to show up in this light green color.
| | 01:38 | Let's go ahead and click the
Plus button to add another rule.
| | 01:41 | We can see that iBooks Author automatically
reselects the same condition that we
| | 01:45 | had set before of Text contains,
and this time we'll type in Moderate.
| | 01:50 | Click the Edit button, change the fill
color for Moderate to be a light blue
| | 01:56 | color, click the Plus button to add
another rule, and this time we'll type in
| | 02:01 | Hard, click the Edit button again, and
this time when we set the fill, we'll go
| | 02:07 | ahead and choose this nice red color.
| | 02:09 | We'll go ahead and click Select All,
and then close our window.
| | 02:13 | We can see now that iBooks Author is
automatically coloring the cells based on
| | 02:18 | the text that they contain.
| | 02:19 | To test to make sure this is working,
go ahead and click on one of your cells
| | 02:23 | and then type in another word such as
changing Hard to Easy, hit the Tab key on
| | 02:29 | your keyboard to jump to another cell, and the
cell's color is automatically changed for us.
| | 02:34 | I'll use the left arrow key on my
keyboard to jump back a cell, and I'll type
| | 02:39 | in Hard again and then hit Tab again, and
now my table is formatted and set up correctly.
| | 02:45 | The last thing that we want to look
at is how we can sort data within our
| | 02:50 | columns, and we'll do that in the next movie.
| | Collapse this transcript |
| Sorting table data| 00:00 | Once you have all of your data
entered into your table and everything is
| | 00:03 | formatted the way that you want it,
you can choose to sort your data based on
| | 00:08 | the data in the columns themselves.
| | 00:10 | To do this, simply click one time on
your table to select it and then click on
| | 00:15 | the column that you want
to have your data sorted by.
| | 00:18 | In this case, I'm going to click on the
Complete Tour column so that all of my
| | 00:22 | data can be sorted by the
cheapest to the most expensive tour.
| | 00:25 | I'll then come over to my Table
Inspector and in the Edit Rows & Columns,
| | 00:30 | I'll click the Gear icon and
then select Sort Ascending.
| | 00:34 | You'll see that all of the data in my
table is automatically resorted based
| | 00:39 | on the values in this last column, and they're
sorted from the least to the most expensive.
| | 00:45 | If I want to choose to have my table
sorted by a different column, all I need to
| | 00:49 | do is click on the column header for
that column, go back over to my Edit Rows
| | 00:53 | & Columns tool, and
select Sort by Ascending there.
| | 00:57 | And now my table is in alphabetical order
based on the name of the tour package itself.
| | 01:03 | There's one more thing that we want to
do to our table in order to finish it off
| | 01:07 | completely, and that is to add header
and footer information to our table, and
| | 01:12 | we'll do that in the next movie.
| | Collapse this transcript |
| Adding a custom table description| 00:00 | The last thing that we want to do to
our table to finish it off is apply a
| | 00:04 | Label, a Caption, and a Background to our table.
| | 00:07 | And we'll do that by first clicking one time on
our table and then go to our Widget Inspector.
| | 00:13 | And we've already used these in
previous movies, so you should already be
| | 00:16 | familiar with how to use them.
| | 00:17 | But go ahead and click the dropdown
menu for Label, and let's go ahead and
| | 00:22 | select Edit Label Styles, because for
all tables, I like to have them called
| | 00:27 | Table in my document rather than
Figure or Illustration or Image.
| | 00:31 | I just think it's a little bit more descriptive.
| | 00:34 | So in order to create our own custom
label style, we'll go ahead and click the
| | 00:37 | Plus button and then type in Table.
| | 00:40 | We'll go ahead and click the Label
format, and we'll change it from Figure 1
| | 00:45 | with all of the decimals
behind it to Figure 1.
| | 00:48 | This will make a nice clean label for us.
| | 00:52 | Go ahead and click the Done button and
then in the dropdown menu for Label, go
| | 00:56 | ahead and select label Table.
| | 01:00 | And now we can see our table is going
to be called Table 1 in our Table of
| | 01:04 | Contents and throughout our book.
| | 01:06 | We can then go ahead and enter in
the text that we want to have for this.
| | 01:11 | Type in the Backpack California, then
select the Comment text and type in your
| | 01:15 | comment text, Backpack California
offers 5 breathtaking tour packages.
| | 01:20 | This summary table gives you all the
basic information you need to decide which
| | 01:25 | tour is right for you.
| | 01:28 | Go ahead and deselect the table,
and now our table is all finished.
| | 01:32 | We have a nice label, we have a
caption, we've added our Accessibility
| | 01:36 | Description, and all of our data is nicely
formatted to match the rest of our book.
| | Collapse this transcript |
|
|
9. Working with ChartsUnderstanding charts| 00:00 | Displaying data graphically in iBooks
Author is as easy as: step one, choosing
| | 00:05 | Create a Chart; step two, enter or
import the data for your chart; and then
| | 00:11 | step three, format your chart to match the
look of the rest of your book in iBooks Author.
| | 00:16 | Charts are a fantastic way to display a lot
of data in a very compact and digestible format.
| | 00:23 | They give us the ability to show
trends that would simply be lost in a sea of
| | 00:27 | numbers arranged in a table.
| | 00:30 | A well-designed chart will tell
the story of your data at a glance.
| | 00:34 | There are few common features that
nearly all charts share in order to fully
| | 00:38 | describe the data being presented.
| | 00:41 | These include a chart title, clearly
labeled and numbered axes that include the
| | 00:46 | units for the values of the data being
presented, and a clearly defined legend
| | 00:53 | that shows what data is being presented.
| | 00:55 | To help you understand the first and
perhaps most daunting task for many of us,
| | 01:01 | that of choosing an appropriate chart
type for the type of data that we want to
| | 01:05 | display, I've gone ahead and added
nearly all of the major 2D chart types to
| | 01:10 | this chart file so that we can have a
look at each one and understand why we
| | 01:15 | might choose it over another.
The first is this column chart.
| | 01:19 | Column charts are great for doing
regular comparisons between things, such as how
| | 01:24 | Region 1 and Region 2 compare
to each other year over year.
| | 01:29 | Line charts are an excellent choice
for looking at trends over time and how
| | 01:33 | those trends change relative to each other.
| | 01:37 | Stacked Bar charts provide an efficient
way to look at the ratios of parts of a
| | 01:42 | whole and how those ratios
and the total change over time.
| | 01:48 | Pie charts are a great tool to look at
a snapshot of a single subject and see
| | 01:52 | how significant of a role each
of the component parts may play.
| | 01:57 | Scatter charts are a great way to
display raw data and analyze those data for
| | 02:02 | patterns and trends.
| | 02:04 | Double Y charts allow you to
simultaneously display two related data sets and
| | 02:10 | see what possible relationships the
different data sets may have to each other or not.
| | 02:16 | Now that we have an idea of what
components we need to include in our charts and
| | 02:21 | why we might choose to use one type of
chart over another, let's begin exploring
| | 02:27 | how we build charts in iBooks Author.
| | Collapse this transcript |
| Adding charts| 00:00 | To begin our exploration of how to add
charts inside of iBooks Author, we're in
| | 00:04 | Chapter 8 of our Explore California
Travel Guide, and we're going to build
| | 00:09 | a chart that shows a comparison of the
average monthly snowfall over the past
| | 00:15 | 10 years and the past 100 years.
To do this, we'll start off by adding our chart.
| | 00:21 | Let's begin by looking at
the three ways to add a chart.
| | 00:24 | The first way is to simply come up to
the Insert menu, come down to Chart and
| | 00:30 | then come over to the side menu.
| | 00:32 | Here we can see that all of the available
chart types for iBooks Author are listed.
| | 00:36 | All of the 2D charts are listed here on
the top portion and then below the line
| | 00:41 | are all of the 3D chart types.
| | 00:43 | Let's go ahead and select the Pie chart.
| | 00:45 | When we select a chart to be created,
we get a new chart to appear on our page.
| | 00:51 | We also are given a legend and a new
window has appeared that we haven't seen before.
| | 00:56 | This is called the Chart Data Editor.
| | 00:58 | The Chart Data Editor is a tool that
we'll use in order to add or edit all of
| | 01:03 | the data that we're going to
have displayed inside of our chart.
| | 01:08 | This looks and works very similar to a
spreadsheet where the data is arranged as
| | 01:11 | a series of columns and rows.
We can add rows, add columns,
| | 01:16 | we can choose to plot our data via rows
or via columns, and we can make changes
| | 01:22 | to our data and they'll be an Update button.
| | 01:25 | The other thing that happens when we add
a Chart into iBooks Author is our Chart
| | 01:29 | Inspector automatically opens up
for us if it's not already open.
| | 01:33 | Now the options available in the
Chart Inspector are going to be different
| | 01:36 | depending on the type of
chart that you've added.
| | 01:39 | For instance, we've added a Pie chart.
| | 01:41 | So have a look in some of the
options that are available here.
| | 01:44 | We can control the labels, we can
control information about the wedges, and we
| | 01:49 | can control some basic
information about the data themselves.
| | 01:52 | Let's go ahead and deselect our chart,
then click one time on it and hit the
| | 01:55 | Delete key so we can get rid of it.
| | 01:58 | Now let's go ahead and add another type
of chart and have a look to see what's
| | 02:01 | similar and different.
| | 02:03 | This time we'll come up to our
Toolbar and simply click on Charts.
| | 02:06 | Now, we're able to choose from any of
the 2D charts on the left, or any of the
| | 02:10 | 3D charts on the right.
| | 02:12 | Let's go ahead and select the
Column chart that's here at the top.
| | 02:15 | When we do, once again, a chart is
created for us with a legend, our Data Editor
| | 02:21 | window is open with some sample data for us to
work with, and our Chart Inspector has appeared.
| | 02:27 | Now notice the options here are quite different.
| | 02:30 | This time we have three separate
tabs of information inside of our Chart
| | 02:34 | Inspector for the Chart controls, the
Axis controls, and some Series controls.
| | 02:41 | So we'll take some time for you to go
through the various different chart types
| | 02:44 | and explore what options are available to you.
| | 02:47 | Now let's have a look at one more
way to be able to create our chart.
| | 02:51 | So once again, deselect your chart, then
click one time on it and hit the Delete key.
| | 02:56 | This time hold down the Option key on
your keyboard and come back up to the
| | 03:00 | Charts option in the Toolbar and click
while still holding down the Option key.
| | 03:05 | Keep holding that Option key down and
come down and select the Line chart.
| | 03:10 | Now instead of the chart automatically
appearing, our cursor is changed from an
| | 03:15 | arrow into a crosshairs.
| | 03:17 | Now we can click and drag in order to
create a chart that has the correct height
| | 03:22 | and width and is in the correct
location for what we want for our document.
| | 03:26 | When we release our mouse, the chart is created.
| | 03:30 | Now all of the standard things
are available. Our chart is here.
| | 03:34 | We have a legend that's appeared for us.
| | 03:36 | Our Chart Data Editor has once again
appeared with the sample data in it.
| | 03:40 | And our Chart Inspector is shown up.
| | 03:42 | For this type of chart, we once again
have three tabs of options available to us.
| | 03:47 | Now that you know the three basic ways
of creating a chart, in the next movie we
| | 03:52 | will look at working with the Data
Editor to add and edit the data that we're
| | 03:56 | going to display as part of our chart.
| | Collapse this transcript |
| Editing chart data| 00:00 | Now let's begin editing our data for
our chart inside of our Chart Data Editor.
| | 00:05 | You want to make sure that your chart
is selected, so if it's not, go ahead and
| | 00:09 | click one time on the chart.
| | 00:10 | And then to give ourselves a little
more room, let's go ahead and close our
| | 00:14 | Chart Inspector, then we'll take our Chart
Data Editor window and move it up on your screen.
| | 00:19 | And go ahead and open up it up a little bit so that
it's a little bit easier for us to work with.
| | 00:22 | Next, let's begin labeling the
data that we're going to have.
| | 00:25 | We can start here with Region 1.
| | 00:27 | Simply double-click on the word
Region 1, and we'll enter in what the name of
| | 00:32 | the data set is for the first series,
and the first series is going to be
| | 00:36 | 1910 - 2010 Average.
| | 00:41 | And this is going to be for the Average
Monthly Snowfall for that period of time.
| | 00:47 | The Region 2, we can go ahead and double-
click on that, and we'll go ahead and
| | 00:51 | add in 2000 - 2010 Average.
| | 00:58 | So as we've done this--we will go ahead
and move our window down a little bit--
| | 01:02 | we can see that our legend has automatically
updated for us to show the correct data sets.
| | 01:07 | Next, let's go ahead and add the correct number
of columns of data that we're going to need.
| | 01:12 | Since we're going to have a data set for
each month of the year, we'll need 12 columns.
| | 01:17 | And currently, we only have four.
| | 01:18 | So then we'll go ahead and click
the Add Column button eight times.
| | 01:22 | So we'll go one, two, three,
four, five, six, seven, eight.
| | 01:27 | So now we should have 12 columns,
one for each month of the year.
| | 01:31 | And we're going to start labeling
our years for July, so we'll simply
| | 01:35 | double-click on the column heading for
the first column, and we'll type in July,
| | 01:39 | and then go ahead at the Tab key on
your keyboard to jump over to the column
| | 01:43 | heading for the next month.
| | 01:44 | Now, rather than typing out the whole
month, let's just go ahead and type in
| | 01:48 | A-U-G for August, S-E-P-T for
September, and just keep hitting Tab in between
| | 01:55 | each one and go ahead and label
all the months all the way across.
| | 01:58 | All right, now that we have all of our
months labeled, we could simply go in and
| | 02:02 | begin entering the data into
each of these individual cells.
| | 02:06 | And we could just simply select the cell
and type in the value, but that could
| | 02:10 | be a bit tedious, and I don't think
you guys want to sit and watch me do all
| | 02:13 | this typing, and I don't think you
want to do all that typing either.
| | 02:17 | So I've gone ahead and I've
included in the exercise files a file called
| | 02:21 | snowfall data.txt, and this is
just simply a Tab Delimited text file.
| | 02:26 | I created this in Microsoft Excel and then
just did a Save As as a Tab Delimited file.
| | 02:32 | So we can go ahead and press Command+A
on your keyboard to select all and then
| | 02:37 | copy it using Command+C on your keyboard.
| | 02:40 | Now, let's go ahead and
go back into iBooks Author.
| | 02:43 | And you may need to make sure that
your chart is still selected, and so the
| | 02:47 | Chart Data Editor appears with all
the data in it, then simply click in the
| | 02:52 | first cell and press Command+V on your
keyboard, and that will paste in all of the data.
| | 02:57 | Now, we go ahead and shrink up the
Chart Data Editor window and move it back
| | 03:01 | down into place, we can see that
all of our data has magically appeared
| | 03:05 | inside of our chart.
| | 03:06 | And we have our two series of
data that are listed out here.
| | 03:10 | If we needed to go in and change a
particular data point--so for July, if we
| | 03:14 | said that they had a snowfall average
of maybe 10--if we just go ahead and
| | 03:19 | type that in and then hit Tab, we can see
that the data is live updating in our chart.
| | 03:24 | Let's go ahead and reset that month
back to zero and hit the Tab key, and that
| | 03:29 | data returns back to where it should be.
| | 03:31 | There's no way to import data other
than copying and pasting the data in from a
| | 03:37 | Tab Delimited file or selecting it
in something like Excel or Numbers and
| | 03:42 | copying and pasting it
into your Chart Data Editor.
| | 03:45 | Next, we'll go ahead and start formatting our
chart with a little more detailed information.
| | Collapse this transcript |
| Formatting charts| 00:00 | Now let's look at some of the options
that are available for us to format our
| | 00:03 | chart to apply all of those common
features that nearly all charts have,
| | 00:08 | things such as a Chart Title, a Legend,
clearly numbered and labeled Axes that include units.
| | 00:14 | So let's go ahead and start off by
clicking one time on our chart to select it.
| | 00:18 | And then since we're done with
the Chart Data Editor for now,
| | 00:21 | we'll go ahead and close that window.
| | 00:22 | If we need to open it again, we can open
it again right from our Chart Inspector
| | 00:27 | by clicking the Edit Data button.
| | 00:29 | Next, let's go ahead and check the
box for Show Title on the Chart tab.
| | 00:33 | As soon as we do, a chart title appears.
| | 00:36 | We can edit the title by simply double-clicking
on the title to select it and begin editing it.
| | 00:41 | We want to type in a very descriptive
title that lets the users know everything
| | 00:46 | that they need to know about
what this particular chart is.
| | 00:49 | So this chart is 100 and 10 year
Average Monthly Snowfall Chart.
| | 00:59 | We can then deselect it by clicking away.
| | 01:02 | We can click one time on our chart to
make sure our chart is selected so that
| | 01:05 | our Chart Editor is contextually
aware of what we're going to be selecting.
| | 01:09 | The next thing we want to do is go
ahead and click on the Axis tab, and now we
| | 01:14 | can set up some settings for the Data Axis.
| | 01:17 | We'll start with Y axis over
here on the left-hand side.
| | 01:21 | Click the dropdown menu for Choose
Axis Options and select Show Title.
| | 01:26 | Now, a title automatically appears for us.
| | 01:29 | We can double-click on Value Title and then
triple-click in order to select all of the text.
| | 01:35 | Let's go ahead and type in something
that's very descriptive for this, such as
| | 01:38 | Average Snowfall in Inches.
| | 01:41 | As soon as we finished typing the text,
we can click away to deselect it, and
| | 01:45 | that new text label is
applied to the side of our axis.
| | 01:48 | With our chart selected, we'll come
back over to the dropdown menu for Y axis
| | 01:53 | values, and this time we'll go
ahead and select Show Chart Borders.
| | 01:59 | This way a border is added on the
Y axis on both sides of our chart.
| | 02:03 | This adds a nice little offset for our
chart and cleans things up a little bit.
| | 02:08 | The next thing we want to adjust is
the number of steps that our chart has.
| | 02:12 | Currently it's set to 4, meaning
that iBooks Author has automatically
| | 02:16 | calculated what the highest value is
on our chart and set up a maximum and
| | 02:21 | minimum value for what our chart data
should be displaying and how many steps
| | 02:25 | should be marked in between.
| | 02:27 | Four steps is okay, but with four steps,
we do not get even numbers, and it makes
| | 02:32 | our chart a little harder to discern.
| | 02:34 | So we'll simply click on the up arrow for
Steps to increase the number of steps to 5.
| | 02:39 | Now, with a range of 0 to 50 in five
steps, each of our individual lines
| | 02:45 | represents an increase of 10 inches.
| | 02:48 | The other options that we have
available to us here on the Y axis controls is
| | 02:53 | that we could choose to format the
numbers to some other type of number.
| | 02:56 | So instead of being just a regular
number, we could set these to be currency, or
| | 03:01 | we could set them to be a percentage,
but none of those values make any sense.
| | 03:05 | So we'll go ahead and leave it set to
Number, and then we'll make sure that the
| | 03:09 | decimal places is set down to zero,
so we don't see any decimal places.
| | 03:13 | It makes for a nice clean chart.
| | 03:15 | Now, let's go ahead and turn
our attention down to the X axis.
| | 03:19 | Down here at the bottom of our Chart
Inspector on the Axis tab, we can click the
| | 03:23 | dropdown menu, and once more select Show Title.
| | 03:27 | A label appears for us for the X axis
that we can double-click on and then
| | 03:31 | triple-click in order to select
all of the text inside of there.
| | 03:35 | For the label for this, all
we need to type in is Months.
| | 03:38 | We can deselect it by clicking anywhere else
on our page, and now our axes are properly labeled.
| | 03:44 | Let's go ahead and look at what kind of
treatments we could apply to the lines themselves.
| | 03:48 | Go ahead and click one time on the chart to
select it and then click on one of the lines.
| | 03:53 | Next, we can come over here to
series in our Chart Inspector.
| | 03:57 | Now, we can choose different Data
Symbols that appear on those lines.
| | 04:02 | So for instance, by default we
have a circle or we could choose an
| | 04:06 | upward-pointing triangle, a downward-
pointing triangle, or any of these
| | 04:11 | other different options.
| | 04:12 | I like the basic circles that are
already there, and they have a nice clean look
| | 04:15 | to them, so I'll go ahead and reselect that.
| | 04:18 | Next, we can choose how the lines
that connect each point are drawn.
| | 04:22 | By default, for this chart
type they show up Straight.
| | 04:25 | If we click the dropdown menu,
we can change that to Curve.
| | 04:29 | Now, our data appears as if it's smoothed out
so it looks like the data flows more smoothly.
| | 04:35 | This may not actually represent
reality, so in this case we're going to go
| | 04:39 | ahead and leave our connection points
set to straight since we just have these
| | 04:43 | average open data points.
| | 04:44 | If we wanted to add Error bars onto
our chart, we could come down here to the
| | 04:48 | Advanced section, we could select
Error bars, and then we can choose the type
| | 04:53 | of Error bars we want, and then we
could choose the type of value--whether it's
| | 04:57 | a Fixed Value, a Percentage, a Standard
Deviation, or Standard Error--applied to each line.
| | 05:03 | I'm going to go ahead and leave the
Error bars off on this graph since it's a
| | 05:08 | Travel Guide, and we probably
don't need that detail of data.
| | 05:11 | So we'll go ahead and change this option back
to None, and our graph cleans up quite a bit.
| | 05:16 | Our chart is looking pretty good.
| | 05:18 | In the next movie, we'll look at what happens if we
decide to change the type of chart that we're using.
| | Collapse this transcript |
| Changing the chart type| 00:00 | Our chart is looking pretty good.
| | 00:02 | Let's go ahead and make
one more quick change to it.
| | 00:04 | Go ahead and select your legend
and drag it down here to the bottom.
| | 00:08 | All right, things are looking pretty good.
| | 00:09 | Now, you may be asking yourself, have I
chosen the best type of graph to convey
| | 00:13 | the message that I want to
convey about these particular data?
| | 00:17 | Now remember, what we're showing
here is a comparison between the monthly
| | 00:22 | snowfall for the past hundred years
and a monthly snowfall for the past ten
| | 00:27 | years at our particular ski resort.
| | 00:29 | What we want our users to do is to be
able to target the best months in order to
| | 00:34 | go to have the best
experience of hitting the slopes.
| | 00:38 | So let's go ahead and change our chart
type and look at our data as it's being
| | 00:42 | graphed in other types of charts.
| | 00:44 | To do this, simply click one time on
your chart to select it and then go ahead
| | 00:49 | over to your Chart Inspector and click the big
button here at the top for Choose a chart type.
| | 00:55 | Now, we can choose a different chart type
and see our data displayed in that chart.
| | 01:00 | Let's come down and select the stacked
column chart and see how our data looks there.
| | 01:05 | It's an interesting looking chart.
| | 01:07 | Our axes have now been reversed so that
the X axis from before is now over here
| | 01:11 | on the Y axis, and our labels have been
applied, so we have Months on the Y axis
| | 01:16 | and Average Snowfall in Inches on the X axis.
| | 01:19 | When we look at the data, though, we
can see that the values that are being
| | 01:23 | reported in the length of the bars
are the sum between our 100-year and
| | 01:28 | our 10-year average.
| | 01:30 | Now this doesn't make any sense
whatsoever for our users to be able to look at
| | 01:35 | and make any kind of a judgment call
as to when they should go to the slopes.
| | 01:39 | So this is not a good choice for us.
| | 01:41 | Let's go ahead and change
our graph to another option.
| | 01:44 | This time let's go ahead
and select the Column Chart.
| | 01:46 | If we remember that column chart allows
us to do comparisons on things over time.
| | 01:52 | So as we look at this chart type, we can
clearly see that the particular months
| | 01:57 | that may be of interest for us to go
skiing have a good amount of snowfall in
| | 02:02 | both the 100-year and in the 10-year averages.
| | 02:05 | So if we think we might want to use
this chart, let's go ahead and look at some
| | 02:08 | of the other chart color options that
we could have to brighten up the chart.
| | 02:13 | We do that by coming over to the Chart
Inspector and clicking on the button for chart colors.
| | 02:18 | Here, we can choose from a variety
of different types of chart colors,
| | 02:23 | 3D Texture Fills, 2D Image
Fills, or 2D Color Fills.
| | 02:27 | Once you choose one of these options,
such as 2D Image Fills, you can then choose
| | 02:32 | from the second dropdown option to look
at a variety of different color palettes
| | 02:36 | available in that type of fill.
| | 02:38 | In this case, we've got Bright,
Corrugated, Fun. Let's go ahead and select Fun
| | 02:43 | and see how that looks.
| | 02:44 | To apply your change, you come down to
the bottom, and you click the Apply All
| | 02:48 | button if it's available.
| | 02:50 | Now, I say if it's available
because not all of these color schemes are
| | 02:54 | available for all of the
different types of charts.
| | 02:57 | This is looking pretty good.
| | 02:58 | So we'll go ahead and
close the Chart Colors window.
| | 03:00 | But when we really look at this data,
it doesn't really make a whole lot of
| | 03:04 | sense for our travelers to be making a
direct comparison for the 100-year and
| | 03:09 | 10-year average snowfalls.
| | 03:12 | They're not really worried about what
the trend is locally within those two
| | 03:15 | months, just does the local trend
hold with the longer-term trend.
| | 03:19 | So in this case, while this chart is a
fairly good chart and conveys a lot of
| | 03:23 | information, it doesn't really tell the story
that we're trying to get across to our users.
| | 03:27 | For that, I think the Line
chart really is the best.
| | 03:30 | So let's go ahead and click back on our
chart button and reselect the Line chart.
| | 03:35 | Now, it would be nice if our Line
chart was a little bit more interesting
| | 03:38 | and had some brighter colors to it so it
could really jump off the page a little bit.
| | 03:43 | Well, if we click on the Chart Colors
option, we'll notice that the Apply All
| | 03:47 | option is not available for this chart type.
| | 03:50 | As a matter of fact, any of the other
color schemes that we choose, whether we go
| | 03:54 | to 2D Fills or even just 2D Solid
Colors and change the layout, you'll notice
| | 03:59 | that none of those are
available to us for this type of chart.
| | 04:02 | In order to make a change to our
chart, we need to use a different tool.
| | 04:06 | To do that, what we want to do is first
select one of our lines, then we'll come
| | 04:11 | over to our Inspector, and
we'll go to the Graphics Inspector.
| | 04:14 | Here, we can change the
stroke color of our line.
| | 04:18 | We'll do that by simply
clicking on the color chip.
| | 04:20 | Now, I've gone ahead and selected the
Crayons option of colors, and for the
| | 04:24 | series of data that I've selected here--
which is the 2000-2010 Average, which is
| | 04:29 | the more recent one--I'm going to go
ahead and select this nice maraschino
| | 04:32 | cherry color, and you'll notice that
the lines have changed color, but my data
| | 04:36 | symbols did not change color.
| | 04:38 | So in order to change the color of those,
I'll simply need to deselect and then
| | 04:43 | click one time on one of my
data symbols to select it.
| | 04:47 | You'll notice now that the stroke
color in our Graphics Inspector has changed
| | 04:51 | back to that same blue.
| | 04:53 | Now when we click on that color chip,
we can come over and change the color of
| | 04:57 | that to the same maraschino cherry color.
| | 04:59 | Let's go ahead and change
the 1910-2010 Average as well.
| | 05:03 | We'll go ahead and select that line, then
we'll click on the stroke color for the
| | 05:07 | line, and then we'll
choose this nice grape color.
| | 05:09 | Once again, we'll click on our data
symbol until the stroke line color appears
| | 05:14 | the same blue, click on that square, and
then click on the grape color to change
| | 05:18 | that to the same grape color as well.
| | 05:21 | We can now deselect, and now
our chart is much easier to read.
| | 05:25 | We've got a lot more contrast between
our two data sets, and our users can see
| | 05:30 | the general trend over time of
snowfall, and they can tell that then there are
| | 05:34 | months between December and March for
most years they're going to have a pretty
| | 05:39 | good chance of having some
good snow to hit the slopes with.
| | 05:42 | The last thing that we'd want to do to
our chart is to go ahead and apply some
| | 05:46 | metadata to it, and we'll
do that in the next movie.
| | Collapse this transcript |
| Adding chart descriptions| 00:00 | The last thing you always want to
do to your chart before you add it
| | 00:03 | directly into the flow of your document is to
go ahead and add the metadata to this chart.
| | 00:08 | So go ahead and click one time on your
chart to select it and then click on the
| | 00:12 | Widget Inspector, and let's
add a Title and a Caption.
| | 00:15 | But we'll go ahead and leave the
Background off, so our chart has a nice
| | 00:19 | bright white feel to it.
We've already seen this before.
| | 00:22 | So we'll go ahead and select the label, and for
the type of label, we're going to choose a Figure.
| | 00:27 | We'll then go ahead and title the
figure by clicking inside of the text at the
| | 00:31 | top, selecting it, and then go
ahead and add in our Figure label.
| | 00:34 | We'll then go ahead and add a description
down at the bottom: The best months to
| | 00:40 | get the most fresh powder on our
mountain is from December until March.
| | 00:44 | We'll make a little minor adjustment
to our legend, and there, everything is
| | 00:50 | looking great for our chart.
| | 00:52 | Now you know all the basics that it
takes to be able to add a great dynamic
| | 00:55 | chart and display data that really
tells the story that needs to be conveyed.
| | Collapse this transcript |
|
|
10. Working with WidgetsUnderstanding widgets| 00:00 | Perhaps the most exciting thing
about iBooks Author is the ability to add
| | 00:05 | interactive widgets into our iBooks.
| | 00:08 | Now, interactive widgets allow
us to add all kinds of exciting
| | 00:12 | interactivity into our book.
| | 00:15 | In this movie, I want to take a few minutes and
walk through all of the major types of widgets.
| | 00:21 | Now adding a widget into your book
is as easy as coming up to the Widget
| | 00:24 | menu, choosing the type of widget that you want
to add, and then editing the content in the widget.
| | 00:32 | Let's go ahead and preview the Widgets
file from the Chapter 10 folder and look
| | 00:36 | at it on our iPad, because then we'll get a better
feeling for exactly what we can do with widgets.
| | 00:43 | The first widget we want to take a
look at is the Image Gallery Widget.
| | 00:47 | Now the Image Gallery Widget is a
great widget for very quickly and easily
| | 00:51 | building a gallery of images.
| | 00:53 | You can grab any widget and pinch
to zoom it out to the maximum view.
| | 00:58 | You can swipe from side to side to
look at all of the individual images.
| | 01:02 | You can even have custom
descriptions to go along with each image.
| | 01:05 | When you're finished looking at the
widget, you can click the Close button at
| | 01:08 | the top left of the widget, and
then you can go to the next page.
| | 01:12 | The next which we're looking at is the
Media Widget, and this widget is used
| | 01:16 | for including audio or
video directly into our book.
| | 01:19 | Now, we can certainly play a video directly
from the page by simply touching the button.
| | 01:24 | (male speaker: I'm Ron Asquith,
and I'm standing on our family farm--)
| | 01:28 | We've got all the controls to
be able to pause our video, we
| | 01:32 | can even grab the video, pinch it, and
move it out to full screen, and the video
| | 01:40 | continues playing in full screen mode
on our iBook. That looks really great.
| | 01:45 | When we're finished, we can either
click the Done button or we can pinch in
| | 01:49 | together to zoom it back out to our page.
| | 01:52 | Let's go ahead and go to the next page,
and let's look at the Keynote Widget.
| | 01:56 | Now the Keynote Widget allows you
to incorporate interactive keynote
| | 02:00 | presentations directly into your book.
| | 02:03 | For this Keynote presentation, I'll go
ahead and pinch to zoom it out to full screen.
| | 02:07 | Then we can click on each of the
buttons to go to each of the different areas.
| | 02:12 | You can even include video
directly in your Keynote presentation.
| | 02:20 | (music playing)
| | 02:27 | You can include touch controls,
you can even create animations that
| | 02:32 | run inside of your Keynote presentation and
have user interaction with those animations.
| | 02:38 | When you're finished, you can go ahead
and either pinch to zoom back out or hit
| | 02:42 | the Close button in the
upper-left corner of your page.
| | 02:45 | Let's go ahead and swipe over to the next interactive
widget, and this is the Interactive Image Widget.
| | 02:50 | With this widget you're able to add
an image that you want to then add some
| | 02:54 | highlight points that when the user
touches on the point on the image it will
| | 02:57 | give them additional information about
the specific area of the image that you
| | 03:01 | want to highlight, and it allows
for easy navigation at the same time.
| | 03:05 | Let's go ahead and swipe over to the next image.
| | 03:08 | The next image is the 3D Widget image,
and this allows us to include COLLADA.dae
| | 03:14 | 3D image files directly inside of our iBooks.
| | 03:18 | We can grab the image and pinch it
out and then move it around in three
| | 03:23 | dimensions to get a full 360-degree view of the
object that we've included inside of our iBook.
| | 03:29 | When we're finished, again, we'll just
pinch to zoom back out to the page and
| | 03:33 | swipe over to the next page.
This last widget type is the HTML Widget.
| | 03:39 | This widget has an almost unlimited amount
of possibilities for us to be able to use.
| | 03:44 | There is a variety of different tools
that you can use to create HTML widgets.
| | 03:48 | In this case, we've gone ahead and
created a custom Google Map that we're able
| | 03:52 | to drag around and interact
with directly inside of our book.
| | 03:56 | We're going to use classwidgets.com's
free online tool to be able to create a
| | 04:01 | Dashboard Widget and drop
it right into our iBook.
| | 04:04 | There's one more type of widget called
the Review Widget, and we're going to
| | 04:08 | dedicate the entire next chapter to that.
| | 04:10 | But for the rest of this chapter, I want
to spend some time going through each of
| | 04:14 | these different widgets and
teach you how to build these assets.
| | Collapse this transcript |
| Creating an image gallery| 00:00 | Let's begin our exploration of adding
widgets into our Explore California Travel
| | 00:04 | Guide by creating a gallery of images
to add into our Chapter 7: Nature Watch.
| | 00:10 | Let's come on up to the top of our
Toolbar and click on the dropdown for
| | 00:12 | widgets, and then we can choose the
type of widget that we want to add.
| | 00:16 | In this case, we're going to add the
Gallery Widget, so we can add a gallery of
| | 00:20 | images directly to this page.
| | 00:22 | Go ahead and click one time on Gallery
Widget, and you'll see that the Gallery
| | 00:25 | Widget object appears on screen, and our
Widget Inspector automatically opens for us.
| | 00:31 | We can then change the object from an
anchored object to a floating object and
| | 00:36 | then simply grab it and drag it into place.
| | 00:38 | When we get our alignment guides,
showing that we've snapped the image to the
| | 00:42 | upper left-hand corner of this column, we'll go ahead
and release our mouse to drop the object in place.
| | 00:47 | Next, we simply need to drag our images
directly into the widget, and we can do
| | 00:51 | that by going ahead and opening up our Finder.
| | 00:54 | And inside of the Chapter 10 exercise files,
I've added a folder called gallery files.
| | 00:58 | In the gallery files folder there's
simply ten photographs that are in the JPEG
| | 01:03 | format, we can add all ten of these
images at one time by simply grabbing the
| | 01:07 | galleries file folder and dragging it
and dropping it directly into our object.
| | 01:12 | We can then click back into iBooks Author and
click one time on the object to reselect it.
| | 01:17 | And you'll notice that over here in our
Interaction tab of the Widget Inspector,
| | 01:22 | all ten of the images have
been added to our gallery.
| | 01:24 | The next thing that I like to do is to go
ahead and check the box for Show Thumbnails.
| | 01:28 | This then creates a thumbnail view of
every single one of our images and adds
| | 01:34 | that row of icons to the
bottom of our Gallery Widget.
| | 01:37 | This allows our users to easily
navigate from image to image and see small
| | 01:41 | previews of the images on screen.
| | 01:44 | I happened to like this particular image
here that has three condors in one frame.
| | 01:48 | This is a nice image, and I would like to lead
off my gallery with this particular image,
| | 01:53 | although right now it's set as image
number three instead of image number two.
| | 01:57 | That's easy to remedy.
| | 01:58 | All we need to do is come over to
the Interaction Widget, and over on the
| | 02:02 | right-hand side there is these small
grabber handles, we can click and drag the
| | 02:05 | image up towards the top of our page.
| | 02:07 | When we get our image set so that the
blue line is appearing at the very top, we
| | 02:12 | can drop it into place, and now the
order of our images in our gallery has been
| | 02:16 | automatically adjusted for us.
| | 02:17 | Our users are then presented with the
image that we want them to see first, and
| | 02:21 | then they have all of the rest of
the images that they can look at.
| | 02:25 | The next thing we should do is to go
ahead and add some captions to each of our
| | 02:29 | images, and we can do that by clicking
one time on the caption underneath of the
| | 02:33 | main image and then triple-click
in order to select all of the text.
| | 02:37 | Next, you're able to go ahead and type
directly over top of this text to add your caption.
| | 02:42 | I'm going to go ahead and add the
caption of Photographs of the endangered
| | 02:46 | California Condors sent in
by our Explorer, Michael.
| | 02:49 | Once you've typed in your text, the
next thing you want to do is you want to
| | 02:53 | come back over to the Interaction tab of the Widget
Inspector and click on the Accessibility Description.
| | 02:58 | There is going to be a unique Accessibility
Description for each individual image in our gallery.
| | 03:03 | So we're going to want to go ahead and
select the Default of image and type in
| | 03:08 | the description as to what
is depicted in the image.
| | 03:11 | In this case, I'll type in 3 California Condors.
| | 03:15 | You want to repeat this process for
each of the images in your gallery, and you
| | 03:18 | can access the next image by simply
coming up in the Gallery Media section and
| | 03:22 | click on the next image.
| | 03:24 | You can then type in your caption and
then type in the Accessibility Description.
| | 03:28 | I'm going to go back to the first
image though, and I'm going to once again
| | 03:32 | select the text at the bottom of my
image and triple-click on it to select all
| | 03:36 | of that text and then copy it
to my clipboard using Command+C.
| | 03:40 | Next, I'm going to go over to the Layout tab
of my Widget Inspector, because instead of having a
| | 03:44 | separate caption for each and every one
of my images, I'd rather have for this
| | 03:48 | gallery one single caption.
| | 03:50 | I can simply change the radio button for
Caption to Same caption for all images.
| | 03:56 | When I do this, my caption
returns back to the Lorem Ipsum text.
| | 04:01 | I can once again click one time on that
text, then triple-click on it to select
| | 04:05 | it, and then paste in the text that I
just type using Command+V on my keyboard.
| | 04:09 | Now, I have my custom caption that will
appear the same for every single one of my images.
| | 04:15 | Next, we want to make sure that the Title
Label is set to Figure if it's not already.
| | 04:20 | This way all of our interactives will
all appear consistent throughout our book.
| | 04:25 | We can then go ahead and type in a new
title for the figure by simply clicking
| | 04:29 | inside the text and selecting
the text and then typing over it.
| | 04:33 | For this, I'm going to type in
Photo Gallery of the California Condor.
| | 04:38 | You want to make sure that you type this in
for the Accessibility Description as well.
| | 04:43 | Let's go ahead and add a
background to our image.
| | 04:46 | Click one time on the background and
then come up to our Format bar, click on
| | 04:50 | Fill, and let's choose this third gray
color to add a little bit darker border
| | 04:55 | around the outside to make our widget
stand off the page just a little bit more.
| | 04:59 | Our Gallery Widget is looking great.
We have our thumbnails all in place.
| | 05:03 | We have all of our images in place
with our title and our caption.
| | 05:07 | We even have the Accessibility Descriptions added in here.
| | 05:09 | It's very easy to add an interactive
gallery of images directly into your iBooks
| | 05:14 | Author document by using the Gallery Widget.
| | Collapse this transcript |
| Adding a movie| 00:00 | Now let's go ahead and add a Media Widget
directly into our iBooks Author document.
| | 00:05 | If you're following along, I am on page
25 in the Taste of California section.
| | 00:09 | The Media Widget will allow us to add
audio or video directly into our document.
| | 00:14 | To do this, all we need to do is
come up to our Toolbar and click on the
| | 00:18 | dropdown for Widgets.
| | 00:19 | We can then choose the Media
Widget from the dropdown menu.
| | 00:22 | A Media Widget object is created on
our page for us, and if you don't have it
| | 00:26 | open already, your Widget Inspector
automatically opens up for you as well.
| | 00:31 | We can then change the type of object
from an Anchored object to a Floating
| | 00:34 | object and then simply drag the object
up into place using our Alignment Guides
| | 00:39 | to let us know when we've snapped
the object into the correct location.
| | 00:43 | The next step is to go ahead and add our movie.
| | 00:46 | In the Media folder of the chapter
10 exercise files, I've included a
| | 00:49 | file called oo_sm.m4v.
| | 00:53 | This is just a simple intro
video for the Ojai Olive Oil Company.
| | 00:57 | I'll go ahead and play a few seconds now
so you can see what we're going to add.
| | 01:01 | So anytime you're preparing your video
to go into an iBooks Author document the
| | 01:05 | easy way to do this is to just open up
your video in the QuickTime Player that
| | 01:09 | comes in Mac OS X Lion. Then go up
to the File menu and choose Export.
| | 01:15 | You can then title your document and
choose the location where you want to
| | 01:18 | put the file and then make sure the
Format dropdown menu is set to iPad,
| | 01:22 | iPhone 4 and Apple TV.
| | 01:25 | This will automatically set your video
up so that it's in the correct format to
| | 01:29 | be able to add into an iBooks Author document.
| | 01:32 | I've already done this with our video,
so we can simply take the document
| | 01:36 | from our media files folder and drag
the file and drop it directly on to our
| | 01:41 | widget in iBooks Author.
| | 01:42 | When we go back into iBooks Author and
click one time on the object, we can see
| | 01:46 | that the video has been added for us,
and we're ready to start customizing it in
| | 01:50 | our Widget Inspector.
| | 01:52 | In the Interaction tab, our first
option that we have is to check a box that
| | 01:57 | allows us to set this
video for full screen only.
| | 01:59 | Meaning, when the user touches on the
video on their iPad it will automatically
| | 02:03 | just go to only full screen.
| | 02:05 | I like this option left unchecked so
user has the option to be able to just
| | 02:10 | touch on the video and play it right
in situ, or they can open up the video
| | 02:14 | into Full Screen view.
| | 02:15 | The next option for us is
to set the Poster Frame.
| | 02:18 | Now, the Poster Frame is the first
frame that the user will see of the video.
| | 02:22 | To do this, all we need to do is
drag the slider just a little bit to the
| | 02:25 | right-hand side, and we can choose the
exact image that we want to use as our
| | 02:29 | default poster frame.
| | 02:31 | I'll go ahead and set my video to here and
so we've got a nice image of Ron up on screen.
| | 02:36 | Next, we can choose whether or not we
want our video to automatically loop at
| | 02:40 | the end of playing or if we want it
to simply play one time and then stop.
| | 02:44 | I'm going to go and
leave this video set to None.
| | 02:47 | If the user wants to watch it again,
they can simply hit the Play button.
| | 02:50 | The bottom section here is for controls
and allows us to control the video while
| | 02:54 | we're working inside of iBooks Author.
| | 02:56 | If we want to preview the video
inside of iBooks Author, we can simply use
| | 02:59 | these controls here.
| | 03:00 | Next, let's go ahead and go over to
the Layout tab in our Widget Inspector
| | 03:04 | and change, they'll dropdown for Label
for our title from Movie to Figure so
| | 03:09 | this object remains consistent with
the rest of the objects inside of our
| | 03:13 | iBooks Author document.
| | 03:14 | Next, we'll go ahead and check the box
for background, and then with the object
| | 03:18 | selected, change the color of the fill
so it causes the object to stand off the page
| | 03:22 | just a little bit more.
| | 03:23 | Finally, we'll go ahead and change the
title for our Figure, and we'll add the
| | 03:27 | title of, Ojai Olive Oil Company Intro Video.
| | 03:31 | We'll then come down to the bottom and
select the description by clicking on it
| | 03:35 | one time and then triple-
clicking to select all of the text.
| | 03:38 | We can then type in a caption for this video.
| | 03:40 | I'll go ahead and type in Ron
talks about the Ojai Olive Oil Farm.
| | 03:45 | Our object is now completely setup for us.
We have our video added in.
| | 03:49 | We've added our figure title and our
description, the Accessibility Description
| | 03:53 | is in, and all of the interaction
settings are all set up for us as well.
| | 03:57 | By using the Media Widget, you can add
audio or video to add additional interest
| | 04:02 | to your iBooks Author document.
| | Collapse this transcript |
| Adding a Keynote presentation| 00:00 | Now, let's go ahead and add an
interactive keynote presentation directly into
| | 00:04 | our Explore California Travel Guide.
| | 00:06 | If you're following along, I'm on page
26 in the Taste of California section.
| | 00:11 | To add an interactive keynote file to
our document, all we need to do is come
| | 00:16 | up to our Toolbar and click on the Widget menu
and then select keynote from the dropdown menu.
| | 00:20 | When we do, the Keynote Widget
object is created for us on our page.
| | 00:25 | Our Widget Inspector also automatically opens
up for us so that we're ready to begin working.
| | 00:30 | Let's go ahead and change this objet to
a Floating object and then simply drag
| | 00:34 | the object and drop it into place using
our Alignment Guides to let us know when
| | 00:38 | we have the object in the correct location.
| | 00:40 | Next, we'll need to finish
preparing our keynote file.
| | 00:44 | If you have a copy of keynote, I've
included in the Chapter 10 exercise files,
| | 00:48 | keynote_media folder, a
document called 2Trees_Tour_start.
| | 00:53 | I've also included the
finished version of this file.
| | 00:56 | Let's have a look at this file
so we can see what's going on.
| | 00:59 | An interactive keynote is simply a
keynote slide presentation where there is one
| | 01:03 | slide for each frame of our interaction.
| | 01:06 | You can then create interactive
buttons that link the frames together from
| | 01:11 | one frame to another.
| | 01:12 | This document is nearly finished, but we
need to hook up the last couple of buttons.
| | 01:17 | To do this, we'll simply click on the
first slide and click on this first image.
| | 01:22 | We'll then go up to our Inspector and
go over to the Hyperlink Inspector in
| | 01:26 | the right-hand side.
| | 01:27 | We'll check the box that says Enable
as hyperlink, and then we'll let keynote
| | 01:32 | know which slide we want to open up
when a user clicks on this button.
| | 01:36 | We'll check the radio button for
Slide and then click the dropdown menu and
| | 01:40 | choose the appropriate slide.
| | 01:41 | In this case, the appropriate slide is
Slide number 2, which is this one right here.
| | 01:46 | Next, let's link up this Next button by
clicking on button number 2, we'll check
| | 01:50 | the box for Enable as hyperlink, make
sure Link To is set to Slide, and then
| | 01:55 | check the radio button for
Slide and set the slide to number 3.
| | 01:59 | Now, let's go ahead and preview our
document to see how it's going to work.
| | 02:02 | We do that by hitting the Play button
in keynote and our document opens up
| | 02:06 | in Full Screen mode.
| | 02:07 | We can then click on the first button,
and we're taken to the next slide.
| | 02:11 | Where there are some animations that have been added.
| | 02:13 | We can click on Slide 2 to see the
animation that appears there, and we can
| | 02:18 | click the Play button.
| | 02:21 | By clicking on the screen again, we can get
the video to stop and go on to the next scene.
| | 02:26 | Go ahead and spend some time and explore all of
the different features of this keynote presentation.
| | 02:31 | Then when you're finished, go ahead and hit
the Escape key to jump out of the Preview mode.
| | 02:35 | Now that we've got everything set up,
all we need to do is save our document by
| | 02:39 | going up to the File menu and choosing Save a
Version, and then we can close the document.
| | 02:44 | Next, we can go ahead and add that
document directly into our iBooks Author page.
| | 02:49 | To do this, I'll go ahead
and jump over to my Finder.
| | 02:53 | I'll move my Finder window down, and
I've already got the finished version here
| | 02:56 | called 2Trees_Tour_finished or if you
just saved your document just go ahead and
| | 03:00 | use the start one that you just edited.
Then go ahead and drag that document and
| | 03:04 | drop it right into place.
| | 03:06 | When you do, you'll notice that
inside of your widget, you'll get a notice
| | 03:09 | letting you know that the
keynote file is currently loading.
| | 03:12 | This may take a short time or it may
take up to several minutes depending on the
| | 03:16 | speed of your computer and how large
the keynote file that you've dropped into
| | 03:20 | your iBooks Author document is.
| | 03:21 | What's happening is that iBooks Author
is going through and parsing the document
| | 03:25 | and making sure that it's got all of
the media and tools that it needs in order
| | 03:29 | to completely incorporate your keynote
presentation directly into the document.
| | 03:33 | Now that the document is added in,
we'll go ahead and click one time on it
| | 03:37 | and look at some of the options that
we have inside of our Widget Inspector
| | 03:41 | on the Interaction tab.
| | 03:42 | Once again, we could choose to have
this keynote presentation only work in
| | 03:46 | Full Screen mode, but since our users may
want to interact with this directly in the
| | 03:50 | document, we'll leave this option unchecked.
| | 03:52 | Next, we could choose to show transport
controls if we want the users to be able
| | 03:56 | to simply go from one slide to another.
| | 03:59 | If we had just a plain keynote
presentation that simply had slides that we
| | 04:03 | wanted the user to be able to review,
such as a lecture that you may have given
| | 04:06 | in a class, you could go ahead and turn
this option on to make it easy for your
| | 04:11 | users to be able to navigate your presentation.
| | 04:13 | In our case, because we created an
interactive keynote file, we do not need to
| | 04:17 | have this option checked, so we'll uncheck it.
| | 04:19 | Finally, for the option for Keynote HTML,
we could choose a file that had some
| | 04:23 | additional assets for us.
| | 04:25 | These have already been included
as part of dropping in the file.
| | 04:28 | Let's go ahead over to the Layout tab,
and let's change to the title labels
| | 04:31 | so that it matches all of the
rest of the labels within our
| | 04:34 | Explore California Travel Guide. So we'll
change it from Interactive to Figure.
| | 04:38 | We have the options set for Caption,
and we can also turn on the Background
| | 04:42 | and adjust the fill color if we want to
allow our object to stand off the page
| | 04:46 | just a little bit more.
| | 04:47 | Finally, let's go ahead and
edit the text for our Figure title.
| | 04:51 | We'll click one time on the Figure
title to select it and then select the text
| | 04:54 | inside of the title.
| | 04:55 | You can then go ahead and type in a
title, Two Trees Olive Oil Farm Tour.
| | 05:00 | We can then go ahead and finish off
this object by adding the Caption.
| | 05:04 | To do this, we'll simply click one time
on the caption and then triple-click on
| | 05:07 | the caption to select the entire thing.
| | 05:09 | Now, we can simply type over the top
of it, Interactive Tour of the Two Trees
| | 05:13 | Olive Oil Farm in Ohio, California.
| | 05:18 | And that's all there is to adding a
keynote presentation directly into iBooks Author.
| | 05:22 | If you make your keynote presentation
to be interactive, you can add a lot of
| | 05:26 | interest in interactivity directly into your
iBook without having to know any programming whatsoever.
| | Collapse this transcript |
| Adding a 3D object| 00:00 | Now let's create a 3D Widget and add it
into our Explore California Travel Guide.
| | 00:05 | If you're following along, I'm on page
27 in the Taste of California section.
| | 00:09 | To create a 3D Widget object, all you
need to do is to go up to your Toolbar and
| | 00:14 | click on widgets and then select
the 3D option from the dropdown menu.
| | 00:18 | A 3D Widget object is created
for us and our Widget Inspector is
| | 00:22 | automatically opened up.
| | 00:24 | We can then change the type of object
from an Anchored object to a Floating
| | 00:27 | object and move the object into
position using our alignment guides.
| | 00:32 | We can then grab the handle at the
bottom of the object and drag it down into
| | 00:36 | place so that it snaps the
full height of the column.
| | 00:39 | Now, we're ready to add our 3D object.
| | 00:42 | To add a 3D object, all you need to do
is drag any Collada File which has a .dae
| | 00:48 | file extension just directly onto here.
| | 00:50 | I'm going to go over to my Finder,
and in the Chapter 10 folder, there's a
| | 00:54 | folder called 3d files.
| | 00:56 | And in here, there's two
documents, Bottle.dae and bottle.tif.
| | 01:00 | Now I'd like to give a shout out to
Adam Crespi who is another author here at
| | 01:04 | lynda.com, and he happened to be in
recording a title and he created this 3D
| | 01:08 | object for me in 3D Studio MAX.
| | 01:11 | We then exported the document out of 3D
Studio MAX, and we also exported it out of
| | 01:15 | Maya, just to test and make sure that
both applications would work properly.
| | 01:20 | You could also create a document directly
in the free 3D program, Google SketchUp.
| | 01:24 | All you need to do is make sure when you
export the document, you export it as a .dae file.
| | 01:29 | Let's go ahead and preview the
document to see what it looks like.
| | 01:32 | Click one time on the file and then
press the spacebar on your keyboard to open
| | 01:37 | up the file in Quick Look.
| | 01:38 | You can then grab the bottle and drag
around with your mouse to look at all the
| | 01:42 | different points of view of the bottle.
| | 01:45 | The label that's been added to the
bottle is what's in the second file
| | 01:48 | that's called bottle.tif.
I'll go ahead and preview that document as well.
| | 01:52 | If you'd like an interesting challenge,
go ahead and open up this document in
| | 01:56 | your favorite image editor, such as
Photoshop and then go ahead and edit the TIFF file.
| | 02:00 | Just don't change the dimensions or
the name of the file and make sure that
| | 02:05 | the TIFF file remains in the
same location as the Bottle file.
| | 02:08 | Then when you preview the Bottle
file, it will have your custom label
| | 02:11 | wrapped around the bottle.
| | 02:12 | Let's go ahead and add the Bottle.dae file
directly into our iBooks Author document.
| | 02:17 | We'll do this by grabbing the Bottle.dae
file and simply dragging and dropping
| | 02:22 | it right inside of the 3D Widget.
| | 02:25 | We can then click inside of iBooks
Author and click one time on the widget to
| | 02:28 | make sure it's selected.
| | 02:29 | Next, let's look at the Widget
options that we have for a 3D object.
| | 02:33 | The 3D object file has been
added in the Interaction tab for us.
| | 02:37 | If you wanted to choose a different file,
you could click the Choose button and
| | 02:41 | navigate and grab another file.
| | 02:42 | Next, we have the
ability to set Object Rotation.
| | 02:45 | Currently, it's set to Free Rotation,
meaning, the user can grab the object and
| | 02:49 | they can spin it in any direction they choose.
| | 02:51 | You can also choose to allow the user
to only rotate in the horizontal or in a
| | 02:55 | horizontal and vertical direction.
| | 02:57 | I like Free Rotate because it gives
the user the most freedom to explore the
| | 03:01 | object that we've added on to the book for them.
| | 03:04 | We can choose to Auto-rotate the object
when the object is appearing on the iPad
| | 03:08 | but the user is not
necessarily interacting with it.
| | 03:11 | This is a nice effect, and it lets the
user know that there's something there
| | 03:15 | that they can grab and interact with.
| | 03:17 | Let's go ahead and go to the Layout
tab and change our Title Label from
| | 03:21 | Interactive to Figure. So it matches
all the other labels throughout our book.
| | 03:25 | We want to make sure we have our Caption and
check our Background for this particular object.
| | 03:30 | We can then go ahead up to the title of
the object by clicking on it one time,
| | 03:34 | selecting the text and then typing in our title.
| | 03:36 | In this case, I'll go ahead and
type in Two Trees Premium Olive Oil.
| | 03:40 | Finally, we can go ahead and set the
Caption of our object by clicking down
| | 03:44 | at the bottom and then triple-clicking on the
Description and typing in our own description.
| | 03:48 | I'll go ahead and type in 3D
Interactive Bottle of Two Trees Premium Olive Oil.
| | 03:54 | Our 3D object is now completed
inside of our iBooks Author document.
| | 03:58 | Remember, you can create your own
objects in free programs such as Google SketchUp,
| | 04:02 | or you can also download free
objects directly off of the web from a
| | 04:07 | variety of different locations.
| | 04:08 | If you happen to be skilled in
creating 3D tools, and there's a lot of great
| | 04:12 | training titles here at lynda.com on
how to do this, go ahead and feel free to
| | 04:16 | create your own objects.
| | 04:18 | Just make sure you export them in the
COLLADA.dae file format and they should go
| | 04:22 | directly in to your iBooks Author document.
| | Collapse this transcript |
| Adding an interactive image| 00:00 | Now let's add an interactive image
into our Explore California Travel Guide.
| | 00:05 | If you're following along, I'm on
page 30 in the Nature Watch section.
| | 00:08 | First, let's begin by making
a little room for our widget.
| | 00:12 | We'll get rid of this image that we
added earlier by simply clicking on the
| | 00:15 | image and then hitting the
Delete key on our keyboard.
| | 00:18 | That will get rid of the image altogether.
Next, let's add our widget.
| | 00:21 | To do this, go up to your Toolbar and
click on the Widget dropdown menu and
| | 00:25 | select Interactive Image.
| | 00:27 | An Interactive Image Widget object
appears on our page and our Widget Inspector
| | 00:33 | is automatically opened for us.
| | 00:34 | We can then change the object to a
Floating object and simply drag it into place
| | 00:39 | using our alignment guides to
help us get the alignment correct.
| | 00:42 | Next, we'll go ahead and add our image.
| | 00:45 | I've included a folder called Interactive
Image files in the Chapter 10 exercise files.
| | 00:50 | And in there, you should
find an image called chiton.jpg.
| | 00:53 | Go ahead and take that image and simply
drag it and drop it directly on to our object.
| | 00:58 | We can then click back inside of iBooks
Author and begin customizing our widget.
| | 01:02 | The first thing we want to look at
is over here on the Widget Inspector.
| | 01:05 | Let's go ahead and check the box
that says Show Transport Controls.
| | 01:08 | Now, the Transport Controls are down
here at the bottom and they allow our users
| | 01:12 | to be able to easily navigate among the
various different views of our document.
| | 01:16 | It's a great way to work, so I like
leaving this option this available to my users.
| | 01:20 | The next option in our Widget Inspector is
the ability to show descriptions in a sidebar.
| | 01:25 | Now, right now we've got the view set
in the default view which has these small
| | 01:29 | text bubbles that are linking to the image.
| | 01:32 | When we check the box that says
Show descriptions in the sidebar, the
| | 01:35 | descriptions that were in the
bubbles are now appearing in this sidebar.
| | 01:39 | This is a nice effect in a
lot of different layouts.
| | 01:41 | However, in my layout, I'm going to go
ahead and leave this option unset and
| | 01:45 | use the Default view.
| | 01:46 | And speaking of views, let's go ahead
and turn our attention to the views next.
| | 01:50 | Then let's start with the Default view.
| | 01:53 | Go ahead and click one time on the
Default view in the View section of
| | 01:56 | the Widget Inspector.
| | 01:58 | And then let's adjust the zoom of our
image using the heads-up display that
| | 02:02 | appears here on screen.
| | 02:04 | We can simply drag the slider
to zoom our image in or out.
| | 02:08 | I'm going to go ahead and set
my image zoom down to about 25%.
| | 02:12 | When I get the image set the way that
I wanted, go ahead and click the blue
| | 02:15 | button that says Set View.
This locks the view into place.
| | 02:19 | Next, we'll go and do the same
thing for the other points of interest.
| | 02:23 | We'll go ahead and select the first view,
adjust the slider to the appropriate
| | 02:27 | level of zoom, we can even click inside
the image and drag around until we get
| | 02:31 | the image centered exactly where we want it.
| | 02:34 | You can grab the text bubbles and move
those to a desired location, and you can
| | 02:39 | grab the end of the line so that you
can point it to a particular point on the
| | 02:43 | image that you want to highlight.
| | 02:45 | Once you get everything locked in place,
go ahead and click the Set View button
| | 02:49 | in your heads-up display.
| | 02:50 | Then go ahead and change the
text starting with the Title.
| | 02:54 | Go ahead and triple-click on the
text to select it, and we'll name this
| | 02:57 | object The Fuzzy Chiton.
| | 02:59 | We'll next edit the Description by triple-
clicking on the text there and type in a description.
| | 03:04 | I'm going to type in the Fuzzy Chiton
gets its name from the tuffs of hair that
| | 03:08 | grow around the outer edges of its body.
| | 03:11 | Once you get the text entered in, you can
then apply styling to the text if you'd like.
| | 03:16 | I'm going to go ahead and triple-
click on my text then let's go ahead and
| | 03:19 | minimize the size of our window
and open up our Style sidebar.
| | 03:23 | With our text selected, I'll go ahead
and apply a character style of emphasis.
| | 03:28 | This allows the text to
show up a little bit cleaner.
| | 03:31 | I don't like the wrapping of the text
in the bottom of this window, so I'll
| | 03:34 | deselect and then use the grabber
handle to adjust the width of the text box.
| | 03:39 | All right, our first view is fully set.
| | 03:41 | Now, let's go ahead and
deal with the second view.
| | 03:44 | To do this, go ahead and click in the
second view in the View section of the
| | 03:47 | Widget Inspector, and once again, we'll
zoom out our view, we'll move our text
| | 03:53 | bubble to where we want it, and we'll
adjust the pointer so that it's pointing
| | 03:56 | at the object that we want to call attention to.
| | 03:58 | In this case, we want to call
attention to the snail over here.
| | 04:01 | I'll go ahead and drag my view around,
keep making adjustments until I'm happy
| | 04:06 | with the way things are looking.
That's looking much better.
| | 04:08 | All right, let's go ahead and lock
that in by clicking the Set View button
| | 04:12 | and then edit our text.
| | 04:14 | Again, I'll triple-click on the title,
and this time, I'll simply type in Snail.
| | 04:18 | With the text description, I'll triple
click on the text to select it and then
| | 04:21 | enter in Small intertidal snails are
at home under the water or on the land.
| | 04:27 | Once you have your text typed in, go
ahead and triple-click on the text again,
| | 04:31 | and if you want to apply a
character style, go ahead and do that now.
| | 04:35 | I'm going to apply the
Emphasis style to my text.
| | 04:37 | And once again, I'll deselect, and then
adjust the width of my text box so that I
| | 04:42 | get a nice wrapping of text.
| | 04:43 | I once again click the Set View button, and
now everything is all set for our second option.
| | 04:48 | Let's go ahead and add a third view.
| | 04:50 | To do this, I'm going to start by
clicking on the Default view over my Views
| | 04:54 | window to zoom out to the full area of my image.
| | 04:57 | I'll then go ahead and click the Plus
button at the bottom of the View section
| | 05:01 | to create an additional view.
| | 05:03 | I'll go ahead and move that view down to
the bottom so it appears as the third view.
| | 05:07 | I'll then select the third view.
| | 05:09 | I'm going to move my text first down
here to this lower area and then grab the
| | 05:13 | pointer and move it down here into this area.
| | 05:15 | For this portion of the image, I'm
going to have to zoom in quite a bit.
| | 05:19 | So I'll zoom in, pan my image over, and
what we want to see are these two small
| | 05:23 | little crabs that are right here on the rock.
| | 05:25 | They're really hard to see unless
our image is zoomed in pretty far.
| | 05:28 | So we will go ahead and zoom in, and
move our thought bubble, and move the text
| | 05:34 | level until it's in place.
| | 05:34 | Now, we can go ahead, lock in our
view by clicking the Set View button, and
| | 05:39 | then edit our text.
We'll begin with the Title.
| | 05:41 | So we will triple-click on the title,
and this time we'll type in Glass Crabs.
| | 05:45 | We'll then triple-click on the text
description to select it, and we'll type in
| | 05:48 | Glass Crabs are small intertidal crabs.
| | 05:51 | Once again, we can apply the Character
Style format by triple-clicking on the
| | 05:55 | text description and then clicking
on the Emphasis Style to apply it.
| | 05:59 | Now that we have everything set the
way that we want it, we can go ahead and
| | 06:02 | close our Styles panel
and re-maximize our window.
| | 06:05 | Things are looking pretty good here,
so we'll go back to the Default view and
| | 06:09 | check and see how everything is looking.
All right, our page is looking pretty good.
| | 06:13 | The next thing you'd want to do is
click on each of the views and at the bottom
| | 06:17 | of the Widget Inspector, click the
dropdown menu under Accessibility
| | 06:20 | Descriptions and add some more
detailed information for the screen readers.
| | 06:24 | So we'll go ahead and select Image
for Default view under the Background
| | 06:28 | setting, and we'll type in Photograph of
a common intertidal zone in California.
| | 06:33 | We can then select each of our
different views and check the Label Title,
| | 06:37 | Description, and Target, and make sure
that the text appears for each of those
| | 06:42 | as to what we want to have
said for our screen readers.
| | 06:44 | Finally, we'll go ahead and click on
the Layout tab of our Widget Inspector to
| | 06:48 | improve a couple of more changes in our layout.
| | 06:50 | We'll make sure our Title label is set
to Figure so that matches all the other
| | 06:54 | Figures throughout our
Explore California Travel Guide.
| | 06:57 | We can choose to add a caption if we would like.
| | 07:00 | In this case, I'm going to go
ahead and select the caption.
| | 07:03 | I'm going to move my heads-up display
and then triple-click on the text to
| | 07:06 | select it and type in Common intertidal invertebrates
found along the California Coast by our explorers.
| | 07:14 | I'll also go ahead and edit my Figure
title, by clicking on the title, selecting
| | 07:18 | the text, and typing in a
description for this image.
| | 07:21 | We'll type in Intertidal Invertebrates for the title.
| | 07:24 | Finally, we'll go ahead and check the
box for background color, and then with our
| | 07:28 | object selected, we can go ahead and
change the fill color to something that
| | 07:32 | make it stand out a little bit more on our page.
All right, there we go. Things are looking pretty good.
| | 07:36 | When we deselect, we go out to the
Default view and everything is set up for us.
| | 07:40 | Now, when our users come to our page
they'll be able to click on each of the
| | 07:43 | different views and get
detailed information about that view.
| | 07:47 | The Interactive Image Widget is a
great tool for adding a lot of detailed
| | 07:51 | information about a particular image.
| | Collapse this transcript |
| Adding custom HTML| 00:00 | Now let's have a look at perhaps the
most powerful tool Apple has given us
| | 00:04 | inside of iBooks Author, and that's the
ability to add HTML5 Dashboard widgets
| | 00:09 | directly into our iBooks Author documents.
| | 00:13 | This opens up the possibility to have
almost an unlimited amount of control
| | 00:17 | and power to be able to add interactivity and
content directly into our iBooks Author documents.
| | 00:23 | Now, creating most interactive widgets
is well beyond the scope of this course.
| | 00:28 | You'd have to use tools such as Dashcode,
which would require you to do a lot of programming.
| | 00:32 | Hype, which is a great tool
for creating interactive HTML5 objects.
| | 00:37 | But I found a web site that will help us
create some interactive widgets that we
| | 00:41 | can add directly into
our iBooks Author document.
| | 00:43 | Let's begin by going ahead and creating the
widget, and then we'll add it into our document.
| | 00:48 | Go ahead and open up your favorite
web browser and go to classwidgets.com.
| | 00:53 | This is a great site that offers free
widgets that you can create right on
| | 00:57 | their web site and they'll export the widget,
so you can add it directly into your document.
| | 01:01 | For this movie, I'd like to
create an interactive Google Map.
| | 01:05 | So we'll come over to the Widgets
Wizard section and click on Google Maps.
| | 01:08 | Now, this is how easy it is.
| | 01:10 | All we have to do is give a map title and a URL.
| | 01:13 | So in order to get the URL,
we'll come over to Google Maps.
| | 01:16 | You can access that by going to maps.google.com.
| | 01:19 | Then simply go ahead, drag the map
to the location that you want, you can
| | 01:23 | double-click to zoom in to an area.
| | 01:25 | I'm going to zoom in to the area of
the Channel Islands National Park.
| | 01:29 | I'll get my zoom set the way that I want it.
| | 01:31 | I can use the plus and minus arrows or
the slider to zoom in or out, and I can
| | 01:36 | drag the image around until I get
the map showing exactly where I want.
| | 01:40 | Next, I'll simply come up to the Link
tool, which as of the recording of this
| | 01:44 | movie, is up here in the
upper-left corner of the image.
| | 01:47 | The URL is automatically selected
for us and all we have to do is press
| | 01:51 | Command+C on our keyboard
to go ahead and copy that.
| | 01:54 | We can then go back over to the Class
Widgets page, and in the Map Title, we'll
| | 01:58 | go ahead and title our map,
Channel Islands Excursion.
| | 02:00 | For the Map URL, click inside the box
and simply press the Command+V key on your
| | 02:05 | keyboard to paste the text in.
All right, we're all set.
| | 02:08 | Go ahead and click the
button that says Create Widget.
| | 02:11 | Your web browser should attempt to
download the file, and you may get the Widget
| | 02:15 | Installer that pops up and asks,
Do you want to install this widget?
| | 02:19 | Do not install the widget. Just
simply click the Cancel button.
| | 02:22 | We don't want to install the widget, we
just want to get a hold of the widget.
| | 02:25 | Now, we'll go ahead and minimize our
browser, and we'll open up our Finder to
| | 02:29 | our Downloads folder
where the widget is located.
| | 02:32 | We'll go ahead and click one time on
the widget to select it, then click again
| | 02:36 | to select the text of the name of the
widget, and then we'll go ahead and edit
| | 02:38 | the name down to simply just Google Map.
| | 02:41 | We'll then go ahead and drag that
widget on to our Desktop where it'll be a
| | 02:44 | little bit easier to work with.
| | 02:46 | Next, let's go ahead and add the widget
into our document to see what it looks like.
| | 02:50 | Now, of course, we could go in our
document and go up to the Widgets menu and
| | 02:54 | add an HTML widget. But we've already
seen that method in several other movies.
| | 02:58 | Let's go ahead and simply drag the Google Map
widget and drop it directly in to our document.
| | 03:04 | The HTML Widget object is
automatically created for us.
| | 03:07 | Now, when we look at the default widget that
Class Widgets gives us, it's fully functional.
| | 03:11 | It's got a default image though of
this generic map, and it'll be nice to be
| | 03:16 | able to replace that map with
something a little bit more custom.
| | 03:19 | Let's go ahead and select the widget
in iBooks Author and Delete it, and then
| | 03:23 | we'll go back to our web
browser and go back to our Google Map.
| | 03:26 | We'll close the little pop-up window, now
let's make a custom image that we can insert.
| | 03:31 | We'll go ahead and click the small
triangle to hide the sidebar, and we can
| | 03:34 | readjust our image so that we get the
map showing up into the middle section
| | 03:38 | with as much information showing as possible.
| | 03:40 | You can then press Command+Shift+4
on your keyboard.
| | 03:45 | You'll notice that your
cursor turns into small crosshairs.
| | 03:48 | You can then click and drag a large
selection of the map and then release your mouse.
| | 03:53 | Now you want to make sure that the selection
that you create is at least 1024 x 768 pixels.
| | 04:01 | I like to try and capture more
information than I need, and then I'll typically
| | 04:05 | open that image up in an image
editing program, such as either Photoshop or
| | 04:09 | Fireworks, and then crop the image
down to exactly 1024 x 768 pixels.
| | 04:15 | It might take a little trial and error
to get your screenshot to be just right.
| | 04:19 | But you need to make sure that
the screen size is set correctly.
| | 04:22 | All right, let's go ahead and minimize
our browser, and I'm going to go ahead
| | 04:25 | and minimize my iBooks Author
document as well, so we can see our Desktop
| | 04:29 | clearly, and we can see the file that we've got.
| | 04:31 | When we take a screenshot using the
Command+Shift+4 keyboard command, you'll
| | 04:35 | have a screenshot that'll appear on
screen, and it's formatted as a .png file.
| | 04:40 | Which is the exact right type of
file that we need to replace inside of
| | 04:44 | our Google Map widget.
| | 04:45 | To get in to the widget itself, hold
down the Ctrl key on your keyboard and
| | 04:49 | click one time on the widget.
| | 04:51 | From the pop-up menu,
select Show Package Contents.
| | 04:54 | The widget is a special type of
folder that contains a lot of different
| | 04:58 | documents and one of the documents
inside of this folder is a PNG file
| | 05:02 | called Default.png.
| | 05:04 | It's got a capital D on it, and
this file is exactly 1024 x 768 pixels.
| | 05:10 | With that file selected, go ahead and
press the Command key on your keyboard and
| | 05:14 | then press the Delete key that'll
throw that document in the trash.
| | 05:17 | We can then click on our screenshot
and click one time on the text of the
| | 05:21 | screenshot, and then re-title
it to be the same Default.png.
| | 05:26 | We can then copy and paste this
document directly into our widget.
| | 05:30 | To do this, simply select the widget
and press Command+C on your keyboard and
| | 05:34 | then click inside of the widget and
press Command+V, the Default.png file is
| | 05:39 | pasted directly into our document.
| | 05:41 | Now, we can close our Widget window, we
can open up our iBooks Author document
| | 05:46 | again, we may need to minimize it a
little bit, and then we'll simply drag our
| | 05:51 | Google Map widget directly into our document,
and when we release, the widget is created for us.
| | 05:56 | We can maximize our window again,
now we can place and resize our widget.
| | 06:00 | I'll go ahead and drag it over to the
right-hand side until my alignment guides
| | 06:04 | let me know that I've
snapped into the correct location.
| | 06:06 | Then I'll grab the lower left-hand
corner, and I'll start dragging the widget
| | 06:11 | out until I get the widget to an
appropriate size so that the rest of the text
| | 06:16 | on this page flows down to
the very bottom on my screen.
| | 06:19 | The last thing I'll do is I'll go
ahead and change this to a Floating image.
| | 06:22 | With the page with only one screen of
text, it doesn't really matter a whole
| | 06:25 | lot, but I like having all of my images
set to Floating so that they'll remain
| | 06:29 | on the page where I place them.
Unless I really want the image tied to a
| | 06:33 | particular bit of text.
| | 06:34 | All right, let's go ahead and add
some customizations to our widget.
| | 06:37 | Since we simply dragged the HTML5 Widget onto
the page, we'll need to do a little customization.
| | 06:42 | We'll need to open up our Widget
Inspector, which was not opened up for us.
| | 06:46 | The Widget Inspector, for an HTML5 widget
under the Interaction tab, simply gives
| | 06:51 | us the ability to choose
another widget if we wanted to.
| | 06:54 | Since our widget is set up properly,
we'll then go ahead and click on the Layout
| | 06:58 | tab and make sure that our Title Label
matches all of the other Title labels
| | 07:01 | throughout our document.
| | 07:03 | So we'll go ahead and change
this from Interactive to Figure.
| | 07:05 | We want to have our Caption set on here,
and we also want to have a Background,
| | 07:10 | and we'll go ahead and change the
background fill color to this nice gray color
| | 07:13 | so that it stands off
the page a little bit more.
| | 07:16 | Finally, we'll go ahead and
edit the text for our title.
| | 07:19 | We'll click one time on the
Title and then select the text.
| | 07:22 | We'll type in Map of the Channel Islands.
| | 07:24 | And for the text at the bottom, we'll
click one time on it and then double-click
| | 07:28 | it, and then triple-click
it to select all of the text.
| | 07:31 | Here, we'll let our users know that
this is a custom interactive Google Map
| | 07:35 | created with classwidgets.com.
| | 07:39 | Custom Interactive Google Map
created from www.classwidgets.com.
| | 07:44 | All right, our HTML5
widget is looking fantastic.
| | 07:48 | We've got all the different components
that we need, and we have a clickable
| | 07:51 | Google Map that our users can interact
with directly inside of our page.
| | 07:54 | And we didn't even have to write any code.
| | Collapse this transcript |
| Creating a scrolling sidebar| 00:00 | Now let's add a scrolling sidebar
widget to our "Explore California" travel guide.
| | 00:05 | If you're following along, I'm on page
23, which is in the "Desert to See" chapter.
| | 00:10 | To add a scrolling sidebar widget, just
click on the Widgets dropdown menu and
| | 00:14 | select Scrolling Sidebar from the dropdown menu.
| | 00:17 | When the widget appears on screen, go
ahead and change it to a floating object
| | 00:22 | and then drag it into place.
| | 00:24 | We'll place it over here in the left-
hand column and then grab the lower
| | 00:27 | right-hand control handle and drag it
until the widget fills that entire column.
| | 00:33 | Now, we can add text, images or
shapes directly inside of our widget.
| | 00:38 | I've included a file in the text files
folder called Channel_Islands.rtf that
| | 00:45 | has some text on it.
| | 00:47 | I'll go ahead and copy this text and
then go back into my widget and then
| | 00:51 | press Command+A to select all of the
existing text that's there and then
| | 00:55 | Command+V to paste that text in.
| | 00:58 | Now, let's apply some formatting to our text.
| | 01:01 | Let's go up here at the first line
where it says, Channel Island Excursion and
| | 01:04 | triple-click on that line of
text to select the entire row.
| | 01:07 | Now, we can come over here to our toolbar,
click the dropdown menu for Paragraph
| | 01:12 | Styles and scroll down until you find Heading 1.
| | 01:15 | That's looking much better.
| | 01:16 | Now, we'll add some images.
| | 01:18 | Let's go ahead and close Graphics
Inspector and click on the Media Inspector.
| | 01:22 | Inside of the 10_pictures
folder, I've included these images.
| | 01:26 | Let's go ahead and drag the first image arch_
rock_anacapa up here into the top of the widget.
| | 01:32 | We can stretch the image out,
until it mostly fills the sidebar.
| | 01:36 | Now, let's add a few more images in to make
this text a lot more interesting for our users.
| | 01:41 | Let's drag the island_fox image in
next, and place it so it's just below the
| | 01:47 | first paragraph. And again, stretch
the image out until it matches the size
| | 01:52 | of the image above.
| | 01:53 | Now, we can use the scrollbar on the
right to scroll down and add a few more images.
| | 02:00 | We'll next add the gray_whale image.
| | 02:02 | Simply click and drag the image in
place, and drop it. Reposition it, and stretch
| | 02:09 | the size out until it matches the other images.
| | 02:13 | We'll scroll down on our page
again, and now let's add the
| | 02:16 | santa_rosa_island image.
| | 02:17 | Simply click and drag the image into place.
| | 02:21 | Once more, we'll position it, scroll
down to the very bottom, and finally, we'll
| | 02:30 | add the image of the torrey_pines.
| | 02:31 | Go ahead and drop that in place.
| | 02:36 | Make sure it shows up at the bottom of
our text, and stretch the image size out,
| | 02:41 | until it also matches in the same size as well.
| | 02:44 | Now, we can apply a little bit
more formatting to our widget.
| | 02:47 | It'd be nice to change the background
color of our image so that it stands out
| | 02:52 | to our users a little bit more.
| | 02:53 | So, we'll close the Media Inspector and
go back into our Regular Inspector and
| | 02:58 | make sure we're on the Graphics tab.
| | 03:00 | Next, click on the widget to select
it and then in the Graphics Inspector,
| | 03:05 | click the Fill Color.
| | 03:07 | Let's use the Magnifying Glass to select
one of these hues that's up here in the
| | 03:11 | sky portion of the torrey_
pines image, maybe that nice blue.
| | 03:15 | It's a little bit intense for this
image, so we'll go ahead and lighten it up
| | 03:20 | a little bit by dragging the slider, until
you find a hue that's pleasing to the eye.
| | 03:25 | Now, we can go ahead and scroll back up
to the top and see how our widget looks.
| | 03:30 | It looks pretty good.
| | 03:31 | It would be a good idea to go ahead
and preview this widget on your iPad by
| | 03:36 | coming up here and clicking the Preview
button when your iPad is connected. Then,
| | 03:40 | you can scroll around on your iPad and
see how the scrolling sidebar reacts.
| | Collapse this transcript |
| Creating a popover effect| 00:00 | Next, let's add a Pop-Over widget to
our "Explore California" travel guide.
| | 00:05 | If you're following along, I'm on page
22, which is in the "Desert to See" chapter.
| | 00:10 | Let's go ahead and add the Pop-Over
widget to our page by coming up to
| | 00:13 | the toolbar and clicking on the Widgets menu
and selecting Pop-Over from the dropdown menu.
| | 00:19 | The Pop-Over widget appears inside
of our page and you'll notice it's
| | 00:23 | automatically created as a floating object.
| | 00:26 | Next, let's go ahead and add
the initial image for our widget.
| | 00:29 | We'll come up to our Media browser and then
I've included an image called surfer in
| | 00:34 | the 10_pictures folder.
| | 00:35 | We'll go ahead and drag the surfer
image directly onto the icon for the widget.
| | 00:40 | Next, go ahead and drag the widget into place.
| | 00:42 | We'll go ahead and align it
here in the left-hand column.
| | 00:45 | Next, let's go ahead and
prepare the Pop-Over widget.
| | 00:48 | So, double-click on the
widget to open up the pop-over.
| | 00:52 | The next thing you want to do is come
down to the very bottom and grab the
| | 00:55 | center control handle and drag it
straight down to the bottom of the page.
| | 00:59 | As the widget drags off the bottom of
the page, you'll see that it automatically
| | 01:04 | pops over to the right-hand side of the widget.
| | 01:07 | Next, we can grab the lower right-hand
control handle and we can stretch that
| | 01:11 | out to a larger size.
| | 01:13 | Now we're able to add text, shapes or images.
| | 01:16 | Let's go ahead and start
off by adding another image.
| | 01:19 | Let's add the surfer2 image by clicking
and dragging it into place and dropping
| | 01:23 | it in front of the text.
| | 01:25 | We can then stretch that image out by
grabbing the lower right-hand control
| | 01:28 | handle and stretching it, until
it mostly fills the widget space.
| | 01:32 | Next, we'll go ahead and add some text.
| | 01:35 | I've included a file in the Text
files folder called Surfers_Point.rtf.
| | 01:41 | Go ahead and select all the text in
there and copy it to your clipboard.
| | 01:44 | We'll then go back to iBooks Author and
triple-click on the line of text in order
| | 01:49 | to select it inside of the Pop-
Over widget and then paste our text.
| | 01:53 | Let's apply a little formatting by
triple-clicking on the first line of text to
| | 01:57 | select Surfer's Point-C Street and
then go up to the Style Object, inside of
| | 02:02 | your toolbar and scroll down
until you find the Heading 1.
| | 02:07 | Next, let's make sure that our Pop-Over
widget is set so that it displays all the text.
| | 02:12 | Right now, our users would have to
scroll in order to read all of the text
| | 02:16 | inside of the widget.
| | 02:17 | But if we grab the center control
handle at the bottom of the widget, we can
| | 02:20 | stretch down until the widget
has enough space for all the text.
| | 02:25 | That's all there is.
| | 02:26 | Now we can go ahead and deselect the widget.
| | 02:28 | If you want to see how this widget
reacts on your iPad, go ahead and plug your
| | 02:32 | iPad in and come up and click the
Preview button. And then, you can test the
| | 02:36 | widget out on your iPad to make
sure that it's working as you expected.
| | Collapse this transcript |
|
|
11. Creating Review SectionsUnderstanding review questions| 00:00 | iBooks Author has the capacity to add
interactive review questions to our books.
| | 00:05 | These review questions are created
using the Review Widget object and applying
| | 00:10 | any of the six-question templates
that currently ship with iBooks Author.
| | 00:14 | In typical Apple fashion, it's extremely
easy to add a Review section to our book.
| | 00:19 | We only need to follow three simple steps.
| | 00:22 | Step one, add a Review
widget object to our book.
| | 00:26 | Step two, add a type of question from
the list of Review Question templates.
| | 00:30 | And step three, edit our
question and select the correct answer.
| | 00:34 | Now just because the widget is called
Review, it doesn't mean that it can only
| | 00:38 | be used at the end of a chapter,
section, or even the whole book.
| | 00:42 | The Review Widget is a great tool at
your disposal for getting your reader to
| | 00:46 | interact with your materials at
any point throughout your book.
| | 00:49 | For instance, you can use a Review
widget at the start of a book to test the
| | 00:54 | user's existing knowledge of your
subject and set them into the correct mindset
| | 00:58 | for discovering additional
information that they'll learn along the way.
| | 01:02 | You can of course use the Review object
to test reader comprehension at the end
| | 01:06 | of your book as well.
| | 01:08 | The possibilities are only
limited by your imagination.
| | 01:11 | Let's have a look at the six basic
Review Question templates that currently
| | 01:14 | ship with iBooks Author.
| | 01:16 | These templates can be broken down
into two basic categories, Multiple Choice
| | 01:20 | and Matching Types of questions.
| | 01:22 | First, let's look at the
Multiple Choice options.
| | 01:25 | Here, we have a very traditional
Multiple Choice type of question template that
| | 01:29 | simply includes text for the
question and for the answers.
| | 01:34 | Then we have two Multiple Choice templates
that add space for us to include an image.
| | 01:39 | Now, these images can be used to
either add visual interest to your question,
| | 01:43 | or have the user examine the image or
diagram in order to select the correct answer.
| | 01:49 | Finally, we have a Multiple Choice
type of question where the answers are all
| | 01:53 | images themselves that the user can select from.
| | 01:56 | The second type of question
templates are Matching Styles of questions.
| | 02:00 | Both of these question
types are very visual in nature.
| | 02:03 | They both have a place for you to type
the text of your question and then users
| | 02:07 | can drag either a text button to an
available location on the image, as in the
| | 02:11 | first template, or an image
thumbnail, as in the second template.
| | 02:15 | Let's dive in to using the Review
widget object in iBooks Author to whet our
| | 02:20 | reader's appetite for the kinds of
information they will discover while reading
| | 02:23 | through our Explore California Travel Guide.
| | Collapse this transcript |
| Adding a review section| 00:00 | In order to create a Review section in
our Explore California Travel Guide, we
| | 00:05 | first need to add the
Review object to our document.
| | 00:08 | If you're following along, I'm in
the Introduction section of our Explore
| | 00:11 | California Travel Guide.
| | 00:12 | Let's go ahead and scroll over to
Page 3 where we want to place our Review
| | 00:16 | section here in this left-hand side of
the page and fill this entire column.
| | 00:21 | To add a Review section, all we need
to do is to go up to the Widgets menu in
| | 00:25 | your Toolbar and come down and select Review.
| | 00:28 | A Review object is created for us. We
can change it from an Anchored object to a
| | 00:32 | Floating object, and then simply drag
our object into place using our alignment
| | 00:37 | guides, to let us know when
we've got to the correct location.
| | 00:40 | We can fill the entire column by
grabbing the bottom handle and dragging it
| | 00:44 | down until our alignment guide lets us
know that we've reached the bottom of
| | 00:47 | the page, and then we can make sure that the
right-hand column is also filling the column.
| | 00:51 | Now our Review Question object is in place.
| | 00:55 | The other thing that happens when we
add a Review Object widget to our document
| | 00:59 | is that our Widget Inspector
automatically opens up and a default question has
| | 01:03 | been created for us.
| | 01:04 | When we look at the Widget Inspector,
we can see that the first option we have
| | 01:08 | here is for Full-screen only.
| | 01:10 | If we check this, then our Review
Object is only going to be a thumbnail inside
| | 01:14 | of our book and our users would have to
touch on the image and have it open up
| | 01:18 | into a Full-screen view.
| | 01:19 | I'd like to have my users to be able
to interact directly with my document
| | 01:23 | without having to go to Full-screen mode,
so I'm going to uncheck that option.
| | 01:27 | Next, we're able to work with each of
the different questions that we have
| | 01:30 | in our Review session.
| | 01:31 | The question text is listed here, and
we have a dropdown menu on the right-hand
| | 01:35 | side so that we can select the
number of answers that we want to have.
| | 01:39 | So in this case, if we set it to 3, we'll
only have three multiple choice answers.
| | 01:44 | We can also change it to a much higher
number in order to have a lot more choices.
| | 01:48 | I'm going to go ahead and
set mine back down to 4.
| | 01:51 | At the bottom of the Question section,
you can add additional questions from the
| | 01:54 | Question templates by clicking the
Plus button and then simply selecting the
| | 01:58 | type of question that you want to add next.
| | 02:01 | Anytime you have one of these
questions selected, the bottom of the Widget
| | 02:04 | Inspector has our Accessibility
options, and there can be several different
| | 02:08 | options depending on the
type of question that you have.
| | 02:11 | They will always be the question and
all of the answer options, and there
| | 02:14 | maybe additional options for the image
or other objects that are included as
| | 02:18 | part of your question.
| | 02:19 | Now that we have our widget added, let's
go ahead and begin adding our questions.
| | 02:23 | We'll start with the four
multiple choice types of questions.
| | Collapse this transcript |
| Creating multiple-choice questions| 00:00 | Now let's go ahead and add the
multiple choice questions to our Explore
| | 00:03 | California Travel Guide.
| | 00:05 | We already have our Review Widget in
place, now we'll go ahead and customize
| | 00:09 | this first question.
| | 00:12 | The first customization we want to do
is to simply click on the widget itself
| | 00:15 | and then triple-click in the text at the top of
the question in order to type in our question.
| | 00:20 | Go ahead and type in
| | 00:22 | The Mt. Whitney Climbers Tour offers you four
days of difficult hiking to the peak of Mt. Whitney.
| | 00:28 | How long is the round trip hike?
| | 00:32 | You'll notice that as you type in
your question, the text of your question
| | 00:36 | appears over in the Widget Inspector,
and it also appears down the Accessibility
| | 00:40 | Description for your question.
| | 00:42 | If the Accessibility Version of your
question is not complete, you may need to
| | 00:46 | go ahead and finish typing in the
rest of the text down in this section.
| | 00:50 | Next, we'll go ahead and edit
the choices for our answers.
| | 00:53 | You do this by simply clicking one time
on the answer and then triple-clicking
| | 00:57 | in order to select the
entire block of text in there.
| | 01:01 | For the first answer, we'll go ahead
and type in 12 Miles, then you can simply
| | 01:06 | press the Tab key on your keyboard to
automatically jump to the next answer and
| | 01:10 | begin typing in 22 Miles.
| | 01:13 | Once again, you can hit the
Tab key and type in 28 Miles.
| | 01:18 | Now, instead of hitting the Tab key this
time, let's go ahead and click one time
| | 01:22 | on the answer and then click and drag
in order to select all of the text inside
| | 01:26 | of that area, just to have
another way of selecting the text.
| | 01:29 | We'll then type in 48 Miles.
| | 01:32 | The last thing that we need to do to our
question is to tell iBooks Author which
| | 01:36 | of our answers is the correct answer.
In this case, our correct answer is B, 22 Miles.
| | 01:41 | So all we need to do is select B, 22 Miles,
and iBooks Author will take care of the rest.
| | 01:47 | When the user is presented the
question, they'll have the four answers
| | 01:50 | available to them, and when they
choose an Answer and click the Check Answer
| | 01:54 | button at the bottom, iBooks Author
will automatically check their answer for
| | 01:58 | correctness and give them feedback as
to whether or not they got the correct or
| | 02:03 | the incorrect answer.
| | 02:04 | Let's go ahead and add the next question type.
| | 02:07 | We'll do that by clicking the Plus
button near the bottom of our Question
| | 02:10 | section of the Widget Inspector and
select the second type of Multiple Choice
| | 02:14 | question which has text answers and
an image along the right-hand side.
| | 02:19 | When we select that question type, a
new question is automatically added to our
| | 02:24 | list of questions, and we're
automatically taken to that template in our page.
| | 02:28 | Once again, we'll begin customizing
the question by editing the text for
| | 02:33 | the question itself.
| | 02:34 | We can do this by clicking one time on
a question text and then triple-clicking
| | 02:38 | in order to select all of the text there.
| | 02:40 | Then go ahead and type in our question
which is, Typically, the best month for
| | 02:44 | carving up fresh powder is?
We'll then go ahead and enter in our answers.
| | 02:50 | Just as before, this time we'll
simply double-click on the first answer in
| | 02:54 | order to select it, and then we'll type
in October, hit the Tab key again, type
| | 03:00 | in November. And as you do, notice
that as the text expands, the image
| | 03:06 | automatically adjust to accommodate the size
of text that you have written in your answer.
| | 03:12 | Let's go ahead hit the Tab key again to
jump to the third answer, we'll type in
| | 03:15 | January, hit the Tab key one
more time, and type in April.
| | 03:22 | Now we have all of our answers,
let's go ahead and select the correct
| | 03:25 | answer, which is January.
| | 03:27 | Now, we just need to add
the image into our page.
| | 03:30 | To add some visual interest, let's go
ahead and add the image of a snowboarder.
| | 03:34 | We can do this by going up to the Media Browser.
| | 03:37 | From the Chapter 11 exercise files,
let's go ahead and grab the snowboarder
| | 03:40 | image and drag and drop it
directly onto the image well.
| | 03:44 | Double-click on the image to select
the well and press the Edit Mask tool.
| | 03:49 | Now we can click one time again on the
image, and we can drag the image into
| | 03:53 | the correct location.
| | 03:57 | When we get the image close, we may
need to adjust the size of the image by
| | 04:00 | grabbing the outer handles, dragging
the image down a little bit smaller, and
| | 04:05 | continuing to move the image into position
until we get the snowboarder so that
| | 04:10 | he is fully in the page.
That's looking pretty good.
| | 04:14 | We'll go ahead and deselect
the image to accept our change.
| | 04:18 | Now let's go ahead and add another question.
| | 04:20 | We'll do this by clicking the Plus button, and we'll
select the next Multiple Choice type of question.
| | 04:26 | Once again, we'll edit our text by
triple-clicking on the text at the top, and
| | 04:31 | we will enter in Our most popular
Cycle California Tour has you leaving from
| | 04:35 | Monterey and in 7 days you arrive in what city?
Now let's go ahead and enter the answers.
| | 04:42 | We can do this again by clicking on
Answer 1 and then triple-clicking to select
| | 04:46 | the entire block of text.
| | 04:48 | We can then type in San Francisco, hit
the Tab key, San Diego, hit the Tab key
| | 04:54 | again, Los Angeles, and hit the Tab
key one more and type in Santa Barbara.
| | 05:01 | Let's go ahead and select the
correct answer of Santa Barbara.
| | 05:03 | Now we'll go ahead and add the
Cycle image into our image well.
| | 05:07 | When we drop the image in place,
it's looking pretty good already.
| | 05:10 | Double-click on it to select it, click
Edit Mask, and then click on the image
| | 05:15 | again so we can select the outer image.
| | 05:18 | Now we can expand the image using the
selection handles while holding down the
| | 05:22 | Shift key on our keyboard in order
to maintain the proper perspective.
| | 05:26 | We'll drag the image out a little bit
and then pan it over so that the Cycle
| | 05:31 | fills our mask area.
| | 05:32 | We can then deselect and our
question is looking really good.
| | 05:36 | Let's go ahead and add the final type of
matching question, and that's the Image Matching.
| | 05:41 | Make sure your Review object is
selected and then click the Plus menu at the
| | 05:44 | bottom of the Question section of the
Widget Inspector and select the last
| | 05:49 | Multiple Choice question type.
| | 05:51 | We'll go ahead and enter in our text as
before by triple-clicking on the text,
| | 05:55 | and we'll enter in Of the following birds,
which is still a critically endangered species?
| | 06:01 | For our answers, we simply need to add
the images directly into the proper image wells.
| | 06:06 | And we'll start by adding the
Gulls image to the upper-left well.
| | 06:10 | We can then double-click to select the
image, click one more time, click the
| | 06:15 | Edit Mask tool, then click again in
order to select the image in the background
| | 06:20 | and move the position of the image so
that the birds are properly centered
| | 06:24 | within our image well.
| | 06:25 | We can then deselect and repeat the
process for the other three images.
| | 06:29 | Next, we'll drag the Pelican image in, and
that one comes in looking pretty good as it is.
| | 06:34 | Then we'll drag the Seagulls image
to this lower right-hand quadrant.
| | 06:37 | We'll double-click on the image, hit
Edit Mask, click on the image itself one
| | 06:41 | more time, and then drag it into the
desired location, deselect. And now let's
| | 06:46 | add the Condors image into the last well.
| | 06:49 | Once again, we'll need to double-
click on the image, hit the Edit Mask
| | 06:52 | tool, click one time on the image
again, and then drag our Condors image
| | 06:57 | into its final location.
That's looking pretty good.
| | 06:59 | Let's deselect, and then choose the
correct answer, which of course is the
| | 07:03 | critically-endangered California Condor.
| | 07:05 | Now that you have a grasp of the four
basic templates that are available to you
| | 07:09 | for creating Multiple Choice types of
questions, in the next movie we'll look
| | 07:13 | at adding the matching types of
questions to our Review section.
| | Collapse this transcript |
| Creating matching questions| 00:00 | Now that we have our multiple choice
questions in place, in our Review Widget
| | 00:04 | Object of our Explore California Travel
Guide. Let's go ahead and add the other
| | 00:09 | two types of questions. Which
are matching types of questions.
| | 00:12 | To do this, we simply click one time to
select our Review Object Widget and then
| | 00:18 | in the Widget Inspector, click the
Plus button and scroll down until you find
| | 00:22 | the Drag Label to Target option and
go ahead and select that template.
| | 00:26 | Just as with the multiple choice types
of questions, we'll begin by editing the
| | 00:30 | text for the question itself.
| | 00:32 | To do this, simply triple-click on the
question to select all of the text and
| | 00:37 | then enter in The Channel Islands
excursion leaves out of the Ventura Harbor and
| | 00:42 | crosses the Santa Barbara
Channel on the way to Smugglers Cove.
| | 00:46 | Drag the text labels to their correct
location on the map to identify where your
| | 00:51 | excursion will take you.
| | 00:52 | Next, we'll go ahead and add
the map image to the Image Well.
| | 00:56 | We can do this by grabbing the map out
of our Media Browser and simply dragging
| | 01:01 | and dropping it into the Image Well, the
map should automatically fill the page.
| | 01:06 | If we need to adjust the image at all,
we can do that by double-clicking on the
| | 01:10 | image, clicking the Edit Mask tool,
and then making some adjustments to our
| | 01:15 | image by clicking on the image,
adjusting the size, while holding down the Shift
| | 01:20 | key, to make sure we lock into a
uniform scale and then dragging the image to
| | 01:25 | its final location.
| | 01:27 | Next, we'll deselect the image and then click
one time on the widget in order to select it.
| | 01:32 | Then we'll move our mouse over top of
the first Label target until we get the
| | 01:36 | Hand icon, and we'll click and drag
the label to its correct location.
| | 01:41 | In this case, we'll add the correct
location to be approximately here on Santa
| | 01:45 | Cruz Island, which is where Smugglers Cove is.
| | 01:48 | We'll then double-click on the label
itself in order to select all of the text
| | 01:52 | and type in Smugglers.
| | 01:54 | Then move our mouse up to the second
label until we get the Hand icon and drag
| | 01:59 | it to its location, which is over here
on the right-hand side of the image.
| | 02:03 | That's where the Ventura Harbor is.
| | 02:05 | We'll then triple-click on the
text field and type in Ventura.
| | 02:10 | If we wanted to add additional options,
we could do that by coming over to the
| | 02:14 | Question section of our widget and
selecting an additional location, and then
| | 02:18 | simply grab that object and
drag it to its correct location.
| | 02:22 | For simplicity's sake, I'm going to go
ahead and leave mine set to only two answers.
| | 02:26 | And that's all there is
to creating the matching question.
| | 02:29 | Because we've created the labels and
their targets where they are at,
| | 02:33 | iBooks Author will take care of the rest.
| | 02:35 | Let's go ahead and add the last type of
matching question by clicking the Plus
| | 02:38 | button in our Widget Inspector and
scrolling down to the bottom to the Drag
| | 02:42 | Thumbnail to Target question type.
| | 02:45 | Once again, we'll begin by
editing the text of the question.
| | 02:48 | We'll triple-click on the question text
and then type in Place the photos taken
| | 02:52 | by our explorers to the most
likely location they were taken.
| | 02:56 | Next, we'll go ahead and add the image.
| | 02:59 | We'll start by adding the CA_map by
dragging the map into the Image Well.
| | 03:04 | The map automatically fills the area.
We'll then go ahead and add our first image.
| | 03:09 | For this, we'll come down and we'll grab
the image of the Golden Gate, and simply
| | 03:13 | drag it over to the first Image Well.
| | 03:15 | And we drop it into place. The
image goes ahead and fills the well.
| | 03:20 | Then we'll move our mouse over the
Target until the cursor changes to a Hand
| | 03:24 | icon, and then we'll simply click and
drag that object to the correct location.
| | 03:28 | I'll drop the image right here where it's
overlaying over top of the San Francisco Bay.
| | 03:34 | Next, we'll do the same
thing to the second image.
| | 03:37 | We'll come over and grab the image of
Death Valley, drag it and then drop it
| | 03:40 | into the correct location, move our
cursor over top of the Target and drag it
| | 03:44 | down to about where Death
Valley appears in California.
| | 03:48 | iBooks Author will go ahead
and take care of the rest.
| | 03:50 | If we wanted to add an additional object,
we could simply do that by once again
| | 03:55 | clicking the dropdown menu and
selecting an additional location.
| | 03:59 | I'm going to go ahead and leave
mine set to two, for simplicity's sake.
| | 04:02 | Be sure that any time you're adding
questions especially those that have images
| | 04:07 | that you come down to the
Accessibility Description, and you edit the
| | 04:10 | Accessibility Description for each of
your image labels and for the overall
| | 04:14 | target location so that
your questions are accessible.
| | 04:19 | The last thing we need to do to our
Review section is to go over to the
| | 04:22 | Layout tab and turn on the Background color.
And we'll edit the text title for our object.
| | 04:28 | We'll go ahead and select this text
and enter in Test your knowledge of our
| | 04:32 | Explore California Tour Packages.
| | 04:36 | All right. Our Review
section is completely finished.
| | 04:39 | We've added a bunch of
question types to our Review section.
| | 04:42 | We'll go ahead and scroll back here to
the beginning of our questions, and now
| | 04:47 | you're able to add Review sections
anywhere throughout your book and test your
| | 04:50 | users' comprehension and understanding
as they're reading along with your book.
| | Collapse this transcript |
|
|
12. Exporting the BookPreflighting on an iPad| 00:00 | The most important step in creating an
iBook with iBooks Author is to constantly
| | 00:05 | test your book on an actual iPad in
iBooks to see if what you've built looks and
| | 00:10 | functions the way that you were expecting.
| | 00:13 | By constantly testing your book at
every stage along the way, you can save
| | 00:17 | yourself hours or even days of
editing time and fixing problems that you
| | 00:21 | never knew existed.
| | 00:22 | In this movie, I want to give you a few
of the tips and tricks that I use when I
| | 00:28 | preflight my books on an iPad.
| | 00:30 | My first preflight tip is to make sure
that your Mac is not set to automatically
| | 00:34 | open any applications when a
camera is connected to your Mac.
| | 00:39 | iPhoto in particular is notorious at this.
| | 00:41 | So, to change the setting, go ahead
and open up iPhoto and then go up to the
| | 00:47 | iPhoto menu and select Preferences.
| | 00:50 | In the General tab, make sure the option for
Connecting camera opens is set to No application.
| | 00:57 | Then, go ahead and close the window.
| | 00:59 | Now, each time you plug your iPad in,
iPhoto won't attempt to open up and try
| | 01:04 | and help you download
your images to your device.
| | 01:08 | Next, let's take care of the next major Auto
Open Application Offender, and that's iTunes.
| | 01:14 | Now, iTunes is a great application.
But when you're developing an iBook, and
| | 01:19 | you're constantly connecting and
disconnecting your iPad, you really do not need
| | 01:24 | iTunes attempting to connect to your
device and synchronize itself every single
| | 01:29 | time you plug it in.
| | 01:31 | So, open up iTunes, and with your iPad
connected to your computer, select your
| | 01:37 | iPad from the Sidebar and then scroll
down in the Summary tab until you find
| | 01:42 | the Options section.
| | 01:44 | Uncheck the Option for Open
iTunes when this iPad is connected.
| | 01:48 | Go down to the lower right-hand corner
of the screen and click the Apply button.
| | 01:52 | Now, each time you plug your iPad in,
iTunes won't automatically connect to it.
| | 01:59 | As you may have noticed, iBooks
Author documents can get quite large very
| | 02:03 | quickly, as we add lots
of rich media to our books.
| | 02:07 | So one way to speed up your
workflow is to prototype a layout object or
| | 02:12 | technique with a blank document and
preview it on your iPad to see how it looks.
| | 02:17 | To do this, simply choose File > Open from
iBooks Author and choose a blank template.
| | 02:27 | You can then delete a section by right-
clicking, or Ctrl-clicking on a section.
| | 02:32 | Delete the section, delete the pages
and simply add a blank layout to your
| | 02:37 | document to simply test out the
technique and preview it on your iPad.
| | 02:41 | This way, each time you want to test
out a new technique, you don't have to
| | 02:45 | preview your entire book.
| | 02:47 | And speaking of previewing your book on
your iPad, be sure to connect your iPad
| | 02:51 | to your computer, then open up your
book and press the Preview button to load
| | 02:56 | your entire finished book directly onto your iPad.
| | 03:00 | And be sure to look at every single
page of your book in at least three ways:
| | 03:06 | in Landscape view, in Portrait view,
and in the Table of Contents view.
| | 03:17 | First, look at your book in the
standard landscape view.
| | 03:20 | Look at how all of your objects align
on the page. How do the images look?
| | 03:24 | Do they need to be replaced with another
image, that's a higher resolution image,
| | 03:28 | because of pixelization?
| | 03:30 | Is the image that you've used the absolute
best image for what you're trying to show?
| | 03:37 | Test each of the objects on
the page in the Landscape Layout.
| | 03:44 | Does it function correctly within the layout?
| | 03:49 | Then expand the object to Full Screen mode
by using the open gesture and test it again.
| | 03:55 | Here's the open gesture.
| | 04:00 | And we're going to test it again.
| | 04:04 | When you're satisfied with the
landscape view of your page, rotate your iPad
| | 04:08 | into the portrait view to
see how your content looks.
| | 04:12 | iBooks Author generally does a
great job at having your content remain
| | 04:17 | consistent in both orientations.
| | 04:19 | But there are some very minor
differences that you really want to be aware of.
| | 04:24 | So check your page thoroughly
so you don't have any surprises.
| | 04:28 | The third view that you want to pay
attention to is the Table of Contents view.
| | 04:33 | Rotate your iPad back to the landscape
view and pinch in on the screen to jump
| | 04:38 | into the chapter Level Table of Contents view.
| | 04:41 | Here again, your pages may
appear slightly different.
| | 04:45 | Check this Table of Contents view in both
the landscape and portrait orientation.
| | 04:52 | So what do you do when you find
something that doesn't look quite right?
| | 04:56 | Well, the easiest thing to do is to
take a picture of that page with your iPad.
| | 05:01 | Apple has made this extremely easy to do.
| | 05:04 | Simply press the Power button and the
Home button on your iPad at the same
| | 05:08 | time and a picture of the iPad screen will
automatically be added to your camera roll.
| | 05:14 | This way you can quickly flip though
your iBook and grab screenshots of any
| | 05:18 | errors that you find.
| | 05:20 | Download those pictures to iPhoto
and use that album as your fix-it list.
| | 05:25 | My last preflight tip for you is to
load your finished book on to your iPad and
| | 05:30 | hand your iPad to a friend or
colleague to experience your book.
| | 05:34 | Yes, hand them your iPad. Let them
navigate your book and explore the content on
| | 05:40 | their own without you coaching them through it.
| | 05:43 | Watch them, record them on a movie if
you have to, but do not say anything to them.
| | 05:48 | Just watch and learn
how they use your book.
| | 05:52 | You will learn more from watching
someone else work with your content in just a
| | 05:56 | couple of minutes then you can learn
on your own in hours of trying what you
| | 06:00 | think your users will want.
Then hand your iPad to someone else.
| | 06:05 | Another student perhaps, and repeat the
testing process as many times as you can.
| | 06:10 | Each time making refinements and
adjustments based on their feedback.
| | 06:14 | With our preflight check complete, we're now
ready to begin exporting our iBook for distribution.
| | Collapse this transcript |
| Exporting a book in iBooks format| 00:00 | We've put a lot of effort into
creating a beautifully designed and dynamic
| | 00:05 | book in iBooks Author.
| | 00:07 | Now, it's time to export our book so
that we can distribute copies of our book.
| | 00:12 | And there's a variety of
different ways that we can do that.
| | 00:15 | In this movie, we're going to explore
the first way of exporting our book, and
| | 00:19 | that's to export it into the iBooks format.
| | 00:22 | In the iBooks format, you're able to
upload a copy of your book to your web site
| | 00:27 | or your learning management system
and distribute it out to users for free.
| | 00:32 | In fact, the copy of this book that
we're going to export in this movie is going
| | 00:36 | to be made available to all users for
free on the lynda.com training library.
| | 00:41 | Once you have your book exported,
your users will then be able to simply
| | 00:45 | navigate to that web page on their iPad,
click on the link, and it should open
| | 00:49 | into the iBooks application.
| | 00:51 | Let's go ahead and do
the export of our book now.
| | 00:54 | To do this, simply open up your finished
book, go up to the File menu and select
| | 01:00 | Export from the menu.
| | 01:01 | Then you want to make sure that this
first icon is selected which is iBooks.
| | 01:05 | You'll then click the next
button, Explore_California.
| | 01:12 | Now notice that we've named this with
an underscore instead of a space, and
| | 01:16 | you want to make sure you do that to
make it easier for web servers to be able
| | 01:20 | to distribute your file.
| | 01:21 | Now that we've got our document named,
all we need to do is select where we want
| | 01:25 | to save the file to.
| | 01:26 | I'm going to go ahead and save the
file directly to my Desktop and then
| | 01:30 | Click the Export button.
| | 01:31 | iBooks Author will then
begin exporting your book.
| | 01:34 | It's going to taking compress all of
your images, audio and video and media
| | 01:39 | files that are contained inside of it
to produce some more compact document
| | 01:43 | that's easier to distribute over the Internet.
| | 01:46 | When the export completes,
you should find a file called
| | 01:48 | Explore_California.ibooks on your computer.
| | 01:53 | You can't open this file on your computer,
but you can go ahead and upload it to
| | 01:57 | a web site and then open up your web
Browser in your iPad and click on the link
| | 02:01 | to it, and it should
download automatically for you.
| | 02:04 | Now, one thing to note, if you
choose to distribute your iBook yourself,
| | 02:08 | the license agreement with Apple will only
allow you to distribute your book for free.
| | 02:12 | If you want to charge for your book,
you'll need to create an account and offer
| | 02:16 | it for sale to the Apple iBook Store.
| | 02:18 | We'll cover how to distribute your
book to the Apps Store in a later movie.
| | 02:22 | Next, we'll show you how to
export your book into another format.
| | Collapse this transcript |
| Exporting a book as a PDF| 00:00 | A great option for you to be able to
export a copy of your book so it can be
| | 00:04 | viewed on a device other than an
iPad is to export your book as PDF.
| | 00:09 | All of your widgets will not
necessarily work when you export as a PDF.
| | 00:14 | But your general layout and much of
your content will still be intact.
| | 00:18 | Let's look at how to export our finished
Explore California Travel Guide as a PDF.
| | 00:23 | To do this, all we need to do is come up
here to the File menu and select Export.
| | 00:28 | When the sheet pulls down, simply
click on the middle button, which is PDF,
| | 00:32 | choose the image quality that we
want to have from the dropdown menu.
| | 00:36 | I'll go ahead and select Better.
| | 00:38 | If you want to apply any security options
you can click the dropdown triangle here.
| | 00:43 | You can choose to require a
password when the document is opened.
| | 00:47 | You can choose to restrict printing
of your document or you can choose to
| | 00:52 | restrict copying of content
directly from your document.
| | 00:56 | All you do is simply check the box and
type in a password that you want to have.
| | 01:01 | That way, your document is password-
protected, and you can distribute copies of
| | 01:05 | it and control who has access to
it by who you give the password to.
| | 01:09 | For this document, I'm going to go ahead and
leave all of the security settings unchecked.
| | 01:14 | I'll then close the Disclosure
Triangle and click the Next button.
| | 01:19 | Next, I can choose a name for my document.
| | 01:21 | Go ahead and type in Explore California,
then choose a location where you want
| | 01:26 | to save your document to.
| | 01:28 | I'm going to go ahead and select my
Desktop and then click the Export button.
| | 01:31 | My document is exported as a PDF,
and it's added directly to my Desktop.
| | 01:38 | Now, we can preview this document by
first minimizing our iBooks Author document
| | 01:44 | and then go ahead and double-
clicking on the PDF file.
| | 01:47 | The PDF will open up in your
computers default PDF Reader.
| | 01:52 | We can use the Scroll bar on the right-
hand side to scroll down and look at each
| | 01:56 | of the pages in our layout.
| | 02:00 | Notice that some of the
quizzes are not interactive anymore.
| | 02:03 | They'll simply show the corrected
answer for the first question and the other
| | 02:06 | options are not clickable.
| | 02:07 | We can go ahead and scroll down through
the rest of our book and check and see
| | 02:11 | how all of the layouts look.
| | 02:14 | When you're satisfied with it,
go ahead and close the document.
| | 02:17 | You can now freely distribute this
document to anyone that you would like
| | 02:21 | regardless of what kind of computer or
mobile device that they are using, they
| | 02:25 | should be able to open a PDF.
| | 02:27 | They just won't be able to get the
full experience of all of the multimedia
| | 02:30 | aspects that you may have added into your book.
| | Collapse this transcript |
| Exporting a book as a text document| 00:00 | There's one more way that we can export
our content directly out of iBooks Author.
| | 00:05 | And that's to export a text document
that contains all of the text that's used
| | 00:10 | throughout our document.
Here's how to do it.
| | 00:12 | All you need to do is go up to the File
menu, come down and select Export, and
| | 00:18 | then click the button that says Text,
well then click the button that says Next.
| | 00:23 | We can title our document, I'm going to go
ahead and call mine Explore California.txt,
| | 00:27 | then you can set where
you want your document to be saved to.
| | 00:32 | I'm going ahead and leave mine set to the
Desktop and then click the Export button.
| | 00:36 | A text document is created for
you right there on your Desktop.
| | 00:39 | I'm going ahead and minimize my iBooks
Author document, and then we'll go ahead
| | 00:44 | and just double-click on Explore California.txt.
| | 00:46 | And here you can see all of the
text from your book is all laid out in
| | 00:51 | one document for you.
| | 00:53 | Now, this is a great way to be able to
export out a copy of all the text and
| | 00:58 | send it to say a proofreader or copy editor, or
somebody who is going to go in and mark it up.
| | 01:03 | You may want to then take this document
and drop it into something like Pages or
| | 01:07 | Microsoft Word, where you can turn on
track changes to allow your reviewers to
| | 01:11 | be able to go through it and make it
so that they can be easily imported back
| | 01:15 | into iBooks Author if you need to
import or make some specific changes.
| | 01:19 | So, those are the three ways to be able
to export your book out of iBooks Author.
| | 01:23 | You can export it into an iBooks
format and simply distribute it for free by
| | 01:29 | uploading that document to your web
site or you can export it as a PDF file or
| | 01:34 | you can export it as a plain text file.
| | 01:36 | So all the work that you do inside of
iBooks Author, the best experience that
| | 01:40 | your users are going to have, as if
they're looking at it in the iBooks format,
| | 01:44 | but you can get the content out
and into another format as well.
| | Collapse this transcript |
| Emailing a book| 00:00 | Another way for us to share a copy of our
iBook is to simply email it to another user.
| | 00:06 | If you have added a lot of content,
especially a lot of Multimedia content, you
| | 00:10 | may not be able to use this feature,
because your email program may not allow
| | 00:14 | you to email a document as large
as what the attachments will be.
| | 00:17 | If your document is small enough, all
you need to do though is go up to the
| | 00:21 | Share menu and select Send via Email.
You have three options.
| | 00:26 | The first is to choose iBooks Author for Mac.
| | 00:29 | If you choose this option, the iBooks
Author Document that you've been working
| | 00:33 | on will be packaged up attached to an email
message and ready for you to send to another user.
| | 00:39 | This is a great option if you're
collaborating with another Author who is
| | 00:44 | helping you develop the book.
| | 00:46 | This way, you're sending them a
version of the book that they can
| | 00:49 | continue working in as well.
| | 00:51 | The next option, iBooks for iPad is a
great option, especially for teachers who
| | 00:56 | want to email a copy of their book
directly out to their students so that your
| | 01:01 | students can click on the attachment
inside of the email on their iPad and have
| | 01:06 | it open up that text book
directly inside of iBooks on their iPad.
| | 01:10 | The final option is for
emailing a PDF copy of your book.
| | 01:14 | Now the PDF copy is great, because
it will work on just about any device,
| | 01:19 | regardless of whether it's a Mac or a
Windows, whether it's a Desktop or a
| | 01:23 | Laptop or any kind of mobile device.
Most devices are able to open up a PDF.
| | 01:29 | Now the drawback to using a PDF is that
you're interactive multimedia features
| | 01:33 | of the iBook will not come through.
| | 01:36 | Let's go ahead and select PDF from
the menu, and we'll get a pop-up Window
| | 01:42 | that will let us know how large the
attachment is going to be and ask us if
| | 01:46 | we want to proceed.
| | 01:47 | At 16.6 megabytes, this just makes
it inside of my email program's file
| | 01:52 | size attachment limit.
So I'll go ahead and click the Proceed button.
| | 01:57 | My email message will open up.
| | 01:59 | I have my document attached, I can then
simply address it to another user, type
| | 02:04 | in a Subject and then press the Send button.
| | 02:08 | iBooks Author provides us lots of
ways of being able to share our documents
| | 02:12 | with other users, whether it's the
native iBooks Author Document, the iBooks
| | 02:16 | for iPad Document or the PDF version.
There are many options that we have
| | 02:21 | available to share our content.
| | Collapse this transcript |
| Getting ready to publish to the iBookstore| 00:00 | Now that you've put all of this hard
work in creating your iBook, it's time to
| | 00:03 | publish it to the iBookstore and
distribute it out to the world.
| | 00:07 | This can be accomplished in three easy steps.
| | 00:10 | The first step is to create
an iTunes Connect account.
| | 00:14 | The second is to download
and install iBooks Publisher.
| | 00:18 | And finally, we'll use iBooks Publisher
to submit our book up to the iBookstore.
| | 00:24 | To get started with these steps, all we
need to do is come up here and click the
| | 00:28 | Publish button in our toolbar.
| | 00:31 | A sheet will pull down, letting us know that
it's time to publish our book to the iBookstore.
| | 00:36 | We'll go ahead and click the Continue
button and then on the next screen, we can
| | 00:40 | see on the left-hand side
our Pre-Publishing checklist.
| | 00:43 | Let's go ahead and click the Continue
button and then go ahead and click the
| | 00:47 | button for Create New Account.
| | 00:51 | Your browser should automatically open
and take you to itunesconnect.apple.com.
| | 00:56 | We'll go ahead and click the Get Started button.
| | 00:59 | And on the next screen, we'll see that
there are two different types of accounts
| | 01:03 | that we can create, a Free
Books Account or Paid Books Account.
| | 01:08 | Now, when you're publishing your
books to the iBookstore, you can only
| | 01:11 | publish your book via one of these two accounts,
and each account can be tied to only one Apple ID.
| | 01:19 | So, if you want to have some books that
you offer for free and some books that
| | 01:23 | you want to have customers pay for,
you'll need to have two separate Apple IDs.
| | 01:28 | You can create an Apple ID directly
through the iTunes application on your Mac.
| | 01:33 | In this case, let's go ahead and
create a Free Books Account so that we can
| | 01:37 | offer our book for free.
| | 01:39 | Click the button for Create a Free
Books Account and on the next screen, you'll
| | 01:44 | need to fill in your first and last
name as it appears in your iTunes account.
| | 01:49 | Enter in the Apple ID used with that
account and then enter in your password.
| | 01:54 | You'll then need to check the box to
allow the iTunes Store to verify your
| | 01:58 | account information.
| | 01:59 | When you click the Continue button,
there will be a couple of more screens that
| | 02:03 | will ask for some personal
information about your account.
| | 02:06 | Go ahead and fill those out and when
you're finished, a verification email
| | 02:10 | should be sent to your account that
you'll need to reply to in order to get your
| | 02:14 | account fully set up.
| | 02:16 | Once you've done that, you can return
back to iBooks Author and then click
| | 02:21 | the Continue button.
| | 02:22 | The next step allows you
to download iTunes Producer.
| | 02:26 | Simply click the blue button here
and it will take you directly to
| | 02:30 | itunesconnect.apple.com.
| | 02:33 | Go ahead and sign in with your new
iTunes Connect account that you just set up.
| | 02:40 | And then click the Sign In button.
| | 02:42 | Then, go ahead and scroll down on the
page, until you find the iTunes Producer
| | 02:46 | application and then click the Download button.
| | 02:51 | The application should download to your Mac.
| | 02:55 | When the application finishes
downloading, you can go ahead and go to your
| | 02:59 | Downloads folder and then drag the
disk image file out to your desktop.
| | 03:02 | You can double-click the disk
image file for iTunes Producer and then
| | 03:07 | double-click iTunesProducer.pkg
to begin the installation process.
| | 03:13 | When the installer opens up, you
can go ahead and click Continue.
| | 03:17 | You can then click the
Install button to accept the default
| | 03:19 | installation location.
| | 03:21 | Type in your password
and click Install Software.
| | 03:27 | When the installation is completed,
go ahead and click the Close button.
| | 03:32 | Now that the software's been installed,
go ahead and return back to iBooks
| | 03:35 | Author and click the Continue button.
| | 03:37 | Now, you're prompted to sign in to your iTunes
Connect account here inside of iBooks Author.
| | 03:46 | And then click the Sign In button.
| | 03:49 | You then can say whether or not this
book that you're creating is a new book
| | 03:53 | or if it's one that you've previously
published and you're just publishing an
| | 03:56 | update to the book.
| | 03:57 | In this case, we're publishing a new book.
| | 04:00 | So, we'll leave the first option
selected and then click the Continue button.
| | 04:04 | Next, you are asked to select a sample
chapter for your book for the iBookstore.
| | 04:08 | You can click the dropdown menu and all
of the chapters that you've created in
| | 04:12 | your book will appear here.
| | 04:13 | I'll go ahead and leave mine set to
the Introduction chapter and then click
| | 04:18 | the Continue button.
| | 04:20 | Now that the pre-flighting is done, you can
click the Export button to export your book.
| | 04:27 | When the export is complete, you're
prompted to open up iTunes Producer.
| | 04:32 | Go ahead and click Open iTunes Producer
and iTunes Producer is opened up for you.
| | 04:37 | In the next movie, we'll step
through the process of filling in all the
| | 04:40 | information in iTunes
Producer to complete the process.
| | Collapse this transcript |
| Publishing to the iBookstore| 00:00 | In the last movie, we stepped
through the first two steps of the
| | 00:04 | publishing process by creating our
iTunes Connect Account, by downloading and
| | 00:09 | installing iTunes Producer.
| | 00:11 | We then finished off the process of
exporting our book to iTunes Producer.
| | 00:15 | Now, we'll finish off the process by
completing all of the steps necessary to
| | 00:20 | publish our book on the
iBookstore, inside of iTunes Producer.
| | 00:24 | If you missed the last movie, you'll
need to go back and follow the steps in
| | 00:28 | that movie in order to
catch up to where we are here.
| | 00:32 | Now, let's publish our book.
| | 00:34 | In iTunes Producer, we'll need to step
through each of the different tabs at the
| | 00:38 | bottom of our screen and
at the top of our screen.
| | 00:41 | We'll begin on the Info tab.
| | 00:43 | All of the items that have the red
asterisks (*) next to them are required by
| | 00:47 | iBooks in order for us to publish our book.
| | 00:50 | Some of the information should
automatically be filled in, such as your Vendor ID.
| | 00:54 | The next thing we need to
fill out is the Book Type.
| | 00:56 | When we click the dropdown menu here
and choose between Book or Textbook, the
| | 01:01 | main difference here is that
textbooks must be created in iBooks Author and
| | 01:06 | there is a special category
for them on the iBookstore.
| | 01:09 | Everything else is a Book, whether it
was produced in iBooks Author or produced
| | 01:14 | in a third-party application.
| | 01:16 | We're going to go ahead
and leave our's set to Book.
| | 01:18 | Next, we need to set the Language.
| | 01:20 | We can click the dropdown menu and
choose a language from here or, we can simply
| | 01:25 | begin typing in the
language name, such as English.
| | 01:28 | I'll just type in En, English is
selected and I'll hit the Enter or Return key
| | 01:33 | on my keyboard to accept that item.
| | 01:35 | Our Title has already been filled in for us
and has been captured directly from our iBook.
| | 01:41 | If we add a Subtitle to our book,
we can go ahead and enter that here.
| | 01:44 | For the Publisher, I'll go
ahead and type in lynda.com.
| | 01:49 | You can also add the Publication Date,
Series Name, and any Numbers in the
| | 01:53 | Series, if they're applicable to you.
| | 01:56 | Next, we'll add in the Book Description.
| | 01:58 | I've gone ahead and included a file
called Book Description.txt in the
| | 02:03 | Chapter 12 Exercise Files.
| | 02:05 | Let's go ahead and select all of that
by pressing Command+A on our keyboard and
| | 02:09 | then Command+C to copy.
| | 02:10 | We'll then jump back into iTunes
Producer and press Command+V to paste in that
| | 02:15 | text inside of the Book Description.
| | 02:17 | This page is now complete.
| | 02:19 | Let's go onto the next tab which is Categories.
| | 02:21 | We need to add a primary category for our
book to appear inside of the iBookstore.
| | 02:27 | To do this, simply click
the Add Category button.
| | 02:30 | You'll then click the dropdown
menu and select a Primary Category.
| | 02:34 | Find the category that most closely
matches your particular content.
| | 02:38 | I'm going to go ahead and scroll down
to the bottom of the list here and find
| | 02:42 | the listing for Travel, since
we've created a travel guide.
| | 02:45 | Next, we need to create a Subcategory.
| | 02:48 | We'll click the dropdown menu and once
again, scroll down to the very bottom
| | 02:52 | of the list where we can find the United
States / West / Pacific. Here's a section
| | 02:58 | that lists California.
| | 02:59 | So go ahead and click on that option.
| | 03:01 | We'll make sure the check
box is selected for Primary.
| | 03:04 | If we need to add any additional
categories, we can do that by simply clicking
| | 03:08 | the Add Category button
again and repeat the process.
| | 03:12 | Next, we'll go into the Author section.
| | 03:15 | Click the Authors tab, and now
we'll click the Add Author button.
| | 03:19 | We can select the Role here
in this first dropdown menu.
| | 03:23 | The Roles could be Author, Illustrator,
a Primary Content Creator, or Editor.
| | 03:30 | We'll go ahead and leave this set to Author.
| | 03:32 | Go ahead and fill your name in here.
| | 03:36 | For Sort name, if you have multiple
people in your company, you can go ahead and
| | 03:40 | add a Sort name here.
| | 03:42 | In this case, I'll go
ahead and enter in lynda.com.
| | 03:45 | And once again, since you'll be the
Primary author of this book, go ahead and
| | 03:49 | leave the check box set to Primary.
| | 03:51 | If you needed to add any additional authors,
you could do so by clicking the Add Author button.
| | 03:56 | Let's go ahead and click the
Next button to move to the next tab.
| | 04:00 | Next is Related Products.
| | 04:02 | If there are any other related products
in the iBookstore that you would like to
| | 04:07 | link this product to, say for example,
you've created a whole series of books,
| | 04:11 | you could go ahead and add
those related items here.
| | 04:14 | Since we don't have any related items,
we'll go ahead and skip this step.
| | 04:17 | Go ahead and click the next button,
and now we can set our Target Audience.
| | 04:22 | Go ahead and click the Add Criteria
button, and then under Target Audience
| | 04:26 | Criteria, we can select whether or
not we want the Interest to be an Age,
| | 04:31 | specific to Apple, Grade Schools, or
any of these other different options that
| | 04:36 | are available to us.
| | 04:37 | We'll go ahead and leave our's set
to Age and then Target Age Range.
| | 04:41 | And then in the Target Age Range
dropdown menu, we'll select 13 and up, as
| | 04:46 | that's the most
appropriate target audience for us.
| | 04:49 | Then, we'll simply click the Next button.
| | 04:52 | This automatically jumps us from
the Books tab into the Assets tab.
| | 04:57 | Here, since we've used iBooks Author,
our Publication document has automatically
| | 05:02 | been added here for us as
well as our Publication Preview.
| | 05:06 | We can then click the Next button to
jump over to the Cover Art section.
| | 05:11 | Once again, our Cover Art has been
automatically created for us, because the
| | 05:15 | document was created in iBooks Author
it's using our book cover here for our Cover Art.
| | 05:20 | Once again, we'll click the Next button and if
we wanted to we could add in some Screenshots.
| | 05:25 | Now in the pre-flighting movie, to
take screenshots of your book to use as
| | 05:29 | notes, well, you could use that same
technique to take screenshots of your book
| | 05:34 | and then upload them into iTunes Producer.
| | 05:36 | One thing to keep in mind, you need to
make sure that your screenshot files are
| | 05:41 | in the pixel dimensions of 1024 x 768 or
768 x 1024 and they need to be in either
| | 05:50 | the JPEG or PNG file format.
| | 05:53 | I'm going to skip this step and we're not
going to add any screenshots to our book.
| | 05:57 | So, then we'll click the
Next button and we're all set.
| | 06:00 | If we had any errors or any additional
items that we needed to take care of, we
| | 06:04 | would see those listed here.
| | 06:06 | But it looks like our process has gone
along smoothly, and we're not seeing any errors.
| | 06:10 | The very final step to publishing your
book is to simply click the Deliver button.
| | 06:15 | Now, once you click the Deliver button,
your book is going to be sent up to the
| | 06:19 | Apple servers and it is going to begin
going to the review process at Apple.
| | 06:23 | Once that review process has been
completed, your book will be available online.
| | 06:28 | I'm going to skip this step, since the
book that we've produced here in this
| | 06:32 | training title is just a
demonstration book that's got a collection of a
| | 06:36 | variety of different items.
| | 06:37 | If you'd like to see the finished book,
you can download it as a free file as
| | 06:41 | part of the Exercise Files.
| | Collapse this transcript |
|
|
ConclusionGoodbye| 00:00 | This brings us to the end of
iBooks Author Essential Training.
| | 00:03 | You have now learned all the
essential skills you need to create, build and
| | 00:07 | publish your own dynamic and engaging iBook.
| | 00:10 | So, whoever your target audience is
for your book, be they students, cooks,
| | 00:14 | travelers, children or just readers.
You now have the skills you need to bring
| | 00:19 | your ideas to life for them.
| | 00:21 | I hope you've had as much fun learning
about iBooks Author, as I've had making
| | 00:24 | this course, and I look forward to
seeing your creations on the iBook Store.
| | 00:28 | Until next time, I'm Chris Mattia.
Thanks for watching!
| | Collapse this transcript |
|
|
