1. Building a Web SiteGeneral Encore workflow| 00:00 | Really what we're doing when we
create Flash web sites in Encore is we are
| | 00:05 | creating Encore projects in a standard way,
and then just outputting them to Flash.
| | 00:10 | The real magic of Encore is that we
create DVDs and Blu-ray Discs the same way
| | 00:14 | we create Flash web sites.
| | 00:15 | It's a same process.
| | 00:17 | So before we get to the Flash stuff in
the next chapter, we are going to talk a
| | 00:21 | little bit about the basics of Encore.
| | 00:23 | In this movie, I want to just give you a
basic idea of the overall workflow in Encore.
| | 00:27 | Now, I think this can probably best
be summed up with four major steps.
| | 00:32 | Now, the first step is that we
import stuff into the Project panel.
| | 00:37 | We'll be taking an extra close look
at this one step in the next movie.
| | 00:40 | Once we have our stuff imported into the Project
panels, you can see I have a couple of items here.
| | 00:46 | Then we need to create Encore objects.
| | 00:49 | These include such things as menus,
Timelines, Slideshows and more.
| | 00:56 | The third step is that we
need to create Navigation.
| | 00:59 | In other words, we need to create
links that ties this stuff together.
| | 01:03 | So I've imported this surfing video.
| | 01:06 | I am going to play this
here in the Project panel.
| | 01:08 | See the water there, I'm just
going to go ahead and stop that.
| | 01:11 | But we have a little Timeline,
we can scrub that if we wanted to.
| | 01:15 | What I need to do now is
connect this menu to this video.
| | 01:19 | So as you can see the menu here, I am
going to click on this top button, the Our
| | 01:23 | Story button, and then in the Properties
panel on the right-hand side, you could
| | 01:26 | see that we are looking at
the characteristics of a button.
| | 01:30 | So now, to link this button to our
video, or in other words the Timeline that
| | 01:35 | contains the video, we'll talk about
that a little bit later on this chapter.
| | 01:39 | I need to go over here to the
Properties panel, click the Pick Whip, next to Link.
| | 01:43 | That's this little curly Q thing here,
and then click and hold your mouse down
| | 01:47 | and drag this over to the Project
panel and let go over your mouse, once it's
| | 01:53 | over the Surfing Timeline.
| | 01:55 | That's not surfing.mov, that's just
Surfing, let go, and now this is linked.
| | 02:01 | So we could do more in terms of
navigation for this particular project.
| | 02:04 | But my point is, is that the third step
is navigation, connecting things together.
| | 02:10 | And that's what we've got to
really think of the user's experience.
| | 02:13 | What are they going to experience
first and where would you like them to go
| | 02:16 | next, and how do they find the
information that you have on your site?
| | 02:20 | It's the exact same way you might
create a roadmap for your web site.
| | 02:24 | How are people going to access
the data that you have there?
| | 02:27 | Now, the fourth and final step, once
we've imported the objects, once we've
| | 02:31 | created Encore objects, and then
created navigation and linking all these
| | 02:34 | things together, is to go to the
Build panel and to output your project to
| | 02:40 | either DVD, Blu-ray, or Flash.
| | 02:43 | Now, from a basic outline point of view,
you'll notice that this is kind of like
| | 02:48 | the basic outline of
creating a Flash web site in Flash.
| | 02:52 | In Flash, we import stuff, although not
to a Project panel, to a library, and we
| | 02:56 | also create Flash objects such as
Movie Clips and other symbols, and then we
| | 03:02 | link all those things
together and then output them.
| | 03:04 | Now, the big difference here being
that the linking together step in Encore
| | 03:09 | really is almost instantaneous,
it's a very, very brief step.
| | 03:13 | In Flash, you're going to have to
write all kinds of ActionScript and code in
| | 03:17 | order to get these buttons to
do what you want them to do.
| | 03:20 | So hopefully this bird's eye view get
you a little bit more acquainted with
| | 03:23 | the overall workflow here in Encore
and now we are going to back up a little
| | 03:27 | bit, start from scratch, from
importing footage, and get a little bit more in
| | 03:32 | detail into this process.
| | Collapse this transcript |
| Importing footage| 00:00 | Now we're going to look little bit more
closely at importing footage into our project.
| | 00:04 | Now importing takes place in the Project
panel and again the Project panel here
| | 00:09 | in Encore is very similar
to the library in Flash.
| | 00:13 | Basically bring in all the stuff that
we want that we might use say video,
| | 00:16 | audio, still images, you name it,
you bring it all here into the Project panel
| | 00:21 | and you could use the elements here
throughout your work in your project.
| | 00:25 | As with most Adobe video apps, if you
want to import something in the Project
| | 00:28 | panel simply double-click in a blank
area here, like this big huge gray area in
| | 00:32 | the Project panel, and that will
open up the Import as Asset dialog box.
| | 00:36 | Now in the Exercises Files folder
you'll find the Media folder and in that
| | 00:40 | folder you'll find the Video folder, and
in that folder you'll find surfing.mov.
| | 00:44 | Go ahead and click Open on that
to import this clip as an Asset.
| | 00:48 | Now that this video is in our
project we can use it for whatever we want.
| | 00:51 | We could link a menu button to this video.
| | 00:54 | We could also use this video as a
Motion menu Background so this video might
| | 00:59 | play in the background while
somebody is looking at a menu.
| | 01:02 | Now in the case of videos, if we want
a button to link to this video we can't
| | 01:07 | just link straight to the video, we have
to put this video in something called a
| | 01:10 | Timeline and all you've to do that is
select the clip, go down here to the New
| | 01:15 | drop-down looks like a piece of
paper turning and then select Timeline.
| | 01:21 | So then later on when you are
creating your navigation you wouldn't link to
| | 01:24 | the surfing movie clip, you'd actually link
to the Timeline that contains the movie clip.
| | 01:28 | Now I'm just going to select these and
delete them by clicking the Trash Can
| | 01:32 | icon and then clicking Yes, here
at the bottom of the Project panel.
| | 01:35 | Now if already know that you are going
to import something as a particular type
| | 01:40 | of Encore element, let's say a Timeline,
then what you could do is right-click
| | 01:43 | in the Project panel, select Import As,
and instead of choosing Asset which
| | 01:47 | basically just imports it as a generic asset,
we could say import something as a Timeline.
| | 01:53 | So that if we go back to the surfing.
mov clip in the Video folder and we click
| | 01:57 | Open, it will automatically
bring this in as a timeline.
| | 02:02 | This is particularly important when
we import menus, as we'll talk about in
| | 02:05 | the next movie.
| | 02:06 | menus are basically Photoshop
documents and if were to just double-click here
| | 02:12 | and import this as an Asset, go into the
Media folder, the PSDs folder, we could
| | 02:16 | bring in Groundswell menu Final
here, go ahead and click that.
| | 02:20 | Then it brings this in as a generic
Photoshop document just as still image as
| | 02:25 | you could see up here in the Project
panel, once the footage is selected here.
| | 02:28 | But if we want this to be a menu and
really menus when we were creating these
| | 02:32 | Flash web sites these are our web pages.
| | 02:35 | So these are very important elements.
| | 02:37 | So I am going to right-click
and select Import As, Menu.
| | 02:40 | Now when I bring the same
Photoshop document in and open this up,
| | 02:45 | it actually creates a menu.
| | 02:47 | So again, this looks exactly the same
as the menu we just imported as an asset,
| | 02:51 | but the asset against this still image,
it has no functionality whatsoever, we
| | 02:55 | can't link any navigation to it and those
buttons are basically just text on the page.
| | 03:00 | Now one important thing to keep in
mind about Encore, Encore like most video
| | 03:05 | applications does not allow you
to embed footage into the project.
| | 03:11 | So it makes these projects .NCOR and
when you first launch Encore you'll have to
| | 03:16 | basically create a name
for your project and save it.
| | 03:20 | But that project really only
maintains the change that you make here.
| | 03:24 | So these PSD files and this movie clip,
it will not be embedded into your Encore
| | 03:30 | project, only a link to them will
be stored in the Encore project.
| | 03:35 | So then let's say, on my hard drive I
renamed this surfing.mov clip or moved it
| | 03:40 | somewhere else or deleted it, then
this Encore project would not work.
| | 03:43 | Now the bad news here is you've got
to keep track of all the files that you
| | 03:46 | import into your project.
| | 03:48 | I usually setup my Encore projects
the same way I showed you, I setup the
| | 03:51 | Exercise Files in the last chapter.
| | 03:53 | That just keeps things nice and
organized and makes sure that you don't have
| | 03:56 | any linkage breaking.
| | 03:57 | Now the real benefit here though, the
good side, is that you can import as much
| | 04:01 | stuff as you want into your Encore
project, it really doesn't affect file size
| | 04:05 | all that much, they allows you
lot of creative freedom here.
| | 04:08 | Let's say I'm not really sure which
video to link up, maybe I don't want to use
| | 04:12 | the surfing movie or maybe I've a
different clip that I want to use.
| | 04:15 | I can put all those all those video
clips into my Project panel and then swap
| | 04:19 | them out, as I see fit later on.
| | 04:21 | By not embedding those video clips into
my Encore project, then the size of my
| | 04:26 | Encore project really
isn't getting that much bigger.
| | 04:28 | Now of course, our eventual
destination here is to output this to Flash and
| | 04:33 | so the more videos you have linked up
to and used in your project, then you
| | 04:37 | will definitely notice a big hit
there and there'll be more load times, but
| | 04:42 | there won't be any penalty to your
Flash project by simply importing objects
| | 04:46 | in the Project panel.
| | 04:48 | Again, this is very
similar to the library in Flash.
| | Collapse this transcript |
| Creating menus| 00:00 | As previously mentioned, menus are
the most important component in making
| | 00:05 | Flash web sites in Encore.
| | 00:07 | Again, menus are like the web pages.
| | 00:10 | So in this movie, I'm going to show you a
couple ways to create menus here in Encore.
| | 00:14 | Now one of the first ways, the easiest
way, is to go to the Library panel by
| | 00:19 | defaults in the bottom right
hand corner of the screen down here.
| | 00:22 | Encore generously ships with
about four gigabytes of extra stuff.
| | 00:29 | If you go to the Set drop-down, you
could see all these different categories.
| | 00:34 | By the way, if you're not seeing all
this categories, then you need to install
| | 00:37 | the extra data that comes with Encore.
| | 00:40 | You could find this data either on the
discs that came with it or you could find
| | 00:45 | it on the web, if you've purchased on the web.
| | 00:47 | Now what we would do is click this first
button on left hand side because Encore
| | 00:51 | actually ships with tons of stuff, not
just extra menus but extra buttons and
| | 00:56 | shapes and backgrounds
and a whole bunch of stuff.
| | 00:58 | We only want to see the menus now though.
| | 01:00 | So I'm just going to click on this
first button, and then we get the little
| | 01:03 | menu icon which is this little thing
right here on the left hand side and then
| | 01:06 | we see a list of menus.
| | 01:09 | If we click once on one of them, then
we'll get a little thumbnail preview and
| | 01:14 | you got to be a little careful here,
when you see these menus that have a folder
| | 01:18 | like a dog ear, here on
the upper right hand corner.
| | 01:21 | That means that these are menus
with a motion menu background.
| | 01:24 | In other words, they are not just regular menus;
| | 01:27 | they have full motion video
playing in the background.
| | 01:30 | That will add a lot to your file size
and therefore the download time when you
| | 01:34 | put this on the web, so
be very careful about that.
| | 01:38 | I'm just going to choose Element menu
here, as you could see it's just square
| | 01:42 | with no dog ear at corners.
| | 01:43 | So we know it's just going
to be a still image menu.
| | 01:46 | So I'm just going to double-click
that, and then this Element menu will
| | 01:49 | automatically be added to my project.
| | 01:52 | We can click on Volume 1, Volume 2,
Volume 3 and Volume 4 and we could see over
| | 01:56 | here in the Properties panel which
we'll talk about in the next movie, that
| | 01:59 | these are buttons already set up for you.
| | 02:02 | We could also change the name here;
| | 02:03 | we might want to call this Portfolio
for making this for portfolio web site.
| | 02:08 | I type in Portfolio and even our case
and that was a lowercase here, that comes
| | 02:13 | through and we've renamed the button.
| | 02:15 | Keep in mind that we could
add as many menus that we want.
| | 02:18 | In other words, many web pages as we want.
| | 02:20 | In this Set, we can change the
category from General to let's say Corporate,
| | 02:25 | and then give that just a minute to update and
we have a whole new set of menus to choose from.
| | 02:30 | So I could double-click the Arrows 1
menu, and now we have a new menu here.
| | 02:35 | We could also click the Type tool and
click in text such as Company Name here,
| | 02:39 | and change this to something different.
| | 02:43 | Let's call it Chad's Company.
| | 02:45 | We'll go ahead and select the black arrow,
the Selection tool to accept my change.
| | 02:49 | Now another thing that you'll be aware
of here, and one of the cool parts about
| | 02:53 | Encore is that these menus are nothing
more or less than Photoshop documents,
| | 02:57 | just plain old Photoshop documents, PSD files.
| | 03:01 | I'm going to hover over here to
Photoshop, and let me show you how I've created
| | 03:04 | one such menu from scratch.
| | 03:05 | I've this photo of a surfer here, and
basically I went and play around with
| | 03:10 | some of the color, added a curves adjustment
and what not and cropped it, added some text.
| | 03:15 | And what I did and again, this is a
little bit more complicated than I care to
| | 03:20 | get into in this training series,
but as we look here for these different
| | 03:24 | buttons, let's say the Our Story button.
| | 03:26 | We see that's actually a button group
in Photoshop that has this prefixes.
| | 03:30 | If you open up the
button group, you'll see this.
| | 03:32 | We have this Plus sign in the
parenthesis is a prefix for the name of the button
| | 03:36 | group, and then we also
have in parenthesis equals one.
| | 03:39 | Well all these things are components for
Encore and when we bring this Photoshop
| | 03:45 | document as PSD file into Encore as a
menu, then these are little secret codes
| | 03:50 | are recognized by Encore and it
tells Encore what these layers should be.
| | 03:56 | So again, after a little bit more
cropping, color correction, adding text we
| | 04:00 | have a completed Encore menu here
which is what we have been looking at so
| | 04:04 | far in this chapter.
| | 04:05 | If you would like to dissect both of
these menus and take them apart, and while
| | 04:08 | you're going to do so, you'll find both
of them in the PSDs folder in the Media
| | 04:12 | folder of the Exercise Files.
| | 04:14 | Now one more thing, you'll notice as
we go back to Encore and we go to the
| | 04:18 | Layers panel, which there actually is a
Layers panel here in Encore, you could
| | 04:21 | see the different layers from
the original Photoshop document.
| | 04:25 | If you want to change one of these
default menus to something your own, maybe
| | 04:29 | customize it a little bit more, you
can select it and then click this button
| | 04:33 | right here at the top of the interface.
| | 04:34 | Edit menu in Photoshop, it will open
this PSD file in Photoshop and you could
| | 04:38 | play with it as you wish.
| | 04:40 | So there are three ways to make a menu.
| | 04:43 | First of all, you could go to the
Library and open up one of the menus
| | 04:46 | that ships with Encore.
| | 04:48 | You could also adjust and tweak one of
those existing menus, or you could make
| | 04:53 | the whole link thing from
scratch by yourself in Photoshop.
| | 04:58 |
| | Collapse this transcript |
| Creating links and navigation| 00:00 | So now the step is that we
need to create navigation.
| | 00:03 | In other words, we need to be able to
link the objects in our project together.
| | 00:08 | Now as we've mentioned before one of
the key ways to do that is by using
| | 00:11 | this Properties panel.
| | 00:12 | The Properties panel is context sensitive.
| | 00:15 | So in other words, it give us
information and options for whatever is
| | 00:19 | currently selected, whether it's a
Timeline, as is currently the case, or
| | 00:24 | whether it's a menu, or whether a
Button, whatever we select we get options
| | 00:28 | for it here in the Properties panel.
| | 00:30 | So again, the simple way to link up
buttons here in this menu is to select the
| | 00:34 | button, make sure it's showing in the
Properties panel and then we have the Link area.
| | 00:39 | Now what we could do is we can click the
Pick Whip and drag this to something we
| | 00:42 | want to link that button to.
| | 00:44 | In this case, the surfing timeline.
| | 00:46 | So now when we output this as a SWF
file, when people click this button, they
| | 00:50 | will watch the surfing timeline.
| | 00:53 | Alternatively, we could also set links
by going to the fly-out menu for the Link
| | 00:57 | area here, this little arrow
on the right side of the Link.
| | 01:00 | We'll then get this pop-up here that'll
show us the selectable objects, or the
| | 01:04 | linkable objects in the Project panel;
| | 01:06 | we could choose from items here.
| | 01:08 | Now you could also create multi-page
web sites using these menus.
| | 01:13 | So we could link this button to another
menu and on that menu we could have more
| | 01:18 | text and images and other
buttons that linked to other menus.
| | 01:22 | So we could create a full,
complete complex web site.
| | 01:26 | Encore also lets you set
links to external web sites.
| | 01:29 | Let's say we'll click on the
Products button and then we'll click on
| | 01:33 | Enable web link for Flash.
| | 01:36 | Once we do that it's going to ask us
for a URL, and we could put that in here,
| | 01:40 | let's say lynda.com.
| | 01:42 | And then when we output this to SWF,
when you click on the Products button it
| | 01:46 | will take you to lynda.com.
| | 01:48 | Now there are few other things I want to
cover really quickly that pertain to navigation.
| | 01:53 | I'm going to go ahead and
select the Our Story button quickly.
| | 01:55 | What we need in our project is
something called a First Play object,
| | 02:00 | every project needs it.
| | 02:01 | Basically we've all these elements in
our Project panel and when you have a more
| | 02:06 | complex project you might have dozens here.
| | 02:08 | We need to be able tell our program
whether it's a web site or a DVD, what is the
| | 02:14 | first thing to play.
| | 02:15 | So what I'm going to do is right-click
on the menu after selecting it and
| | 02:19 | choose Set as First Play.
| | 02:22 | Then the web site will know
what our home page is essentially.
| | 02:26 | What you set as an object to be a First
Play object, we get this little circle
| | 02:30 | with an arrow in it here in the Project
panel, and when it selected we also have
| | 02:34 | this little nomenclature, lets us
know this is the First Play object.
| | 02:38 | You may wish to start your web site with
some type of Splash page, maybe a little
| | 02:42 | movie or something, and if we want
to start, and say for example with the
| | 02:45 | surfing movie, then we will make
this Timeline our First Play object.
| | 02:49 | This brings us to another important
navigation point and that is that of End Actions.
| | 02:54 | Once this timeline has done playing,
where does it go, what happens?
| | 02:57 | If you have several menus or
several timelines it could link to other
| | 03:02 | timelines or other menus.
| | 03:03 | So you have to be able to tell it where to go.
| | 03:06 | Now if you don't set these
End Actions it's a bad thing.
| | 03:09 | I've watched DVDs before where there
was no End Action on the movie, and once
| | 03:13 | the movie is done playing the DVD
just goes black and nothing happens.
| | 03:16 | The same will happen to your web site,
so what you do is select the timeline and
| | 03:21 | then over here under End Action, in
the Properties panel we need to select an
| | 03:25 | action to happen after the
timeline is done playing.
| | 03:29 | So I'm going to drag the pick whip over
to the menu because after the timeline
| | 03:32 | has done playing we want
to back to the menu again.
| | 03:35 | Now there's another way to create
navigation that I really like using and that's
| | 03:39 | called the Flowchart.
| | 03:40 | It's by default grouped over here at
the top, and you could go to the Window
| | 03:43 | menu and show the Flowchart, if you are
not seeing it, here it is right there.
| | 03:48 | You could use the scrollbars to
navigate to this Flowchart and this gives you a
| | 03:53 | visual representation of what's going on.
| | 03:56 | So the disc is basically the beginning
of our disc, and so the first thing that
| | 04:00 | we link to is essentially our First Play object.
| | 04:03 | So it's basically saying that
there is a First Play object.
| | 04:06 | The Our Story button links to the
surfing timeline and the End Action is the
| | 04:11 | Groundswell menu again.
| | 04:13 | Now what I'm going to do is I'm going
to click on the Our Story button, and you
| | 04:16 | can see the three different buttons we had in
our menu that we can select in the Flowchart.
| | 04:20 | I'm going to select Our Story,
do something kind of unusual.
| | 04:22 | I'm going to go over to the Link area
and I'm going to select Delete from the
| | 04:26 | Fly-out menu to clear that link.
| | 04:28 | And now there is no link to this menu,
so basically our web site would go to this
| | 04:33 | menu and nothing would happen.
| | 04:35 | We also notice that the
surfing timeline shows up down here.
| | 04:39 | This is referred to as the orphanage
because these little elements that we don't
| | 04:43 | use are called Orphans.
| | 04:44 | In other words they are in our project
but they are not being used in our actual
| | 04:49 | projects, so even though they're here
in the Project panel they would not be
| | 04:52 | seen on the web site once we export it.
| | 04:55 | So what we could do to link this is
to grab the right side of the Our Story
| | 04:58 | button and click-and-drag kind of like
makes it a little make shift pick whip
| | 05:01 | here, drag to the surfing timeline,
let go, and there's our linkage.
| | 05:07 | The End Action is already set to be
the menu again, but if it wasn't set we
| | 05:11 | can click the right side of the timeline and
drag that to the menu to set the End Action.
| | 05:17 | So whether you're using the
Properties panel or whether you're using the
| | 05:20 | Flowchart, it doesn't really make a difference.
| | 05:22 | It's whatever your preference is.
| | 05:24 | I find them both to be very easy and
quick and much easier than creating links
| | 05:29 | and navigation in Flash.
| | Collapse this transcript |
| Creating slideshows for the web| 00:00 | Whether creating an online portfolio or
simply sharing your vacation pictures,
| | 00:04 | slideshows are all over
the place on the internet.
| | 00:08 | Thankfully, slideshows are one
of Encore's strongest features.
| | 00:11 | It is remarkably quick, easy and
intuitive, creating slideshows in Encore, that we
| | 00:17 | then output to our Flash-based web site.
| | 00:19 | So, I've imported some flower images
here and what I'm going to do is just go
| | 00:24 | down to this new drop-down and
create a New Folder and I am going to call
| | 00:29 | this folder Flowers.
| | 00:31 | Then I am going to click the first
flower image, Shift+Click the last flower
| | 00:36 | image, then drag these into the
Flowers folder and that really doesn't do
| | 00:40 | anything for a slideshow, but that
makes things a little bit more orderly in
| | 00:44 | our Project panel.
| | 00:45 | So, now what I'm going to do is open
up the Flowers folder, again select the
| | 00:49 | first flower image and Shift+Click
the last flower image, so that all of
| | 00:52 | them are selected.
| | 00:53 | Then go back down to the new drop-down
one more time and this time
| | 00:57 | select Slideshow.
| | 00:58 | That will take all these images and put
them into our brand new slideshow that
| | 01:03 | it creates for you, and now we have
this panel down at the bottom, the
| | 01:07 | Slideshow Viewer.
| | 01:09 | This shows us the
different slides in our slideshow.
| | 01:11 | You can have up to 99
different slides in your slideshow.
| | 01:16 | The slideshow is also an Encore object,
up here you'll see this in the Project
| | 01:20 | panel and we could link to this slideshow
from a button in the menu or what have you.
| | 01:26 | There's also End actions for
slideshows as we look at the properties for
| | 01:30 | slideshows, here in the Properties panel.
| | 01:33 | That way, once your slideshow is
complete, you can go back to menu or if you
| | 01:37 | have more than 99 images that you would
like to show off, you can just link this
| | 01:40 | to the next slideshow.
| | 01:43 | Now, by default, each slide will play
for the slide duration shown down here.
| | 01:47 | The default slide duration is 6 seconds.
| | 01:51 | You can actually see the time code
that each slide will appear over here.
| | 01:53 | So this one plays at the first frame,
this one plays at 6 seconds in, then 12
| | 01:58 | seconds in, 18, 24 and if you want it to,
that seems a little long, I guess go
| | 02:02 | ahead and change this from 6 seconds to
let's say 3 seconds and now, all of the
| | 02:08 | timing automatically updates for all slides.
| | 02:10 | If I want to, I can go ahead and click
the first slide, preview that up here in
| | 02:14 | the monitor panel and I can also hit
the Play button to preview what this
| | 02:19 | slideshow will look like.
| | 02:20 | So it holds for three seconds and
then goes to the next slide, it holds for
| | 02:24 | three seconds, goes to the next slide and so on.
| | 02:27 | So there's your typical slideshow,
kind of boring for my liking.
| | 02:30 | So what I'm going to do is
spice this up a little bit.
| | 02:33 | What I'm going to do is select the
slideshow in the Project panel, then come
| | 02:36 | over here to the Properties panel.
| | 02:38 | What I can do is with this whole
slideshow selected, not individual slides,
| | 02:42 | I could select random pan and zoom.
| | 02:45 | This will make it so that each
slide automatically moves and animates.
| | 02:50 | So it will move, pan across and
zoom in and zoom out randomly.
| | 02:54 | So it looks like we have some cool, random
motion we spent a long time setting up.
| | 02:59 | It's definitely not the case, and so we
have a great result here and one that I
| | 03:05 | might add, we really didn't have
to spend too much time setting up.
| | 03:08 | I'm going to go back and
select the slideshow one more time.
| | 03:11 | If we go to transition for the
slideshow, we could see that we can create a
| | 03:15 | default transition, so as each
slide goes into the next slide, here's a
| | 03:21 | little transition here.
| | 03:22 | So we like Cube Spin will
be very visible and obvious.
| | 03:25 | You see this icon shows up as this is I do that.
| | 03:27 | I'll click the first slide and play
this and so it will zoom in, pan and then
| | 03:33 | cube spin to the next slide.
| | 03:35 | Now, I actually wanted something
a little bit more subtle for this.
| | 03:37 | So, I'm going to select the slideshow,
go back to the Transition and change
| | 03:41 | this to Cross Dissolve.
| | 03:42 | So, they kind of cross-fade, one
fades out and the next one fades in.
| | 03:47 | Now I also have this audio
clip in the Project panel.
| | 03:50 | Ideally, what I want to do, as you can
see it's about 15 seconds long, I want my
| | 03:54 | slideshow to be exactly as
long as my piece of audio.
| | 03:58 | Well, what I can do is click the
Pick Whip here in the audio area in the
| | 04:03 | Slideshow Options area, click and drag
this to the audio clip and then what we
| | 04:08 | can do is select Fit
slideshow to Audio Duration.
| | 04:12 | So that makes our entire slideshow
15 seconds, and actually 27 frames, it
| | 04:16 | gets that precise.
| | 04:17 | Encore does all the math for us, so
it's divided up 15 seconds 27 frames by
| | 04:23 | six slides.
| | 04:25 | Now if we select the first slide, we could
hit the Play button and preview our slideshow.
| | 04:30 | (Music playing.)
| | 04:45 | Pretty nice, pretty nice and the
best part about that, as you saw how
| | 04:49 | incredibly easy, simple, quick it was
and also how flexible it was if you want
| | 04:54 | to make changes later.
| | 04:56 | Now I should probably point out
here though that if you're going to add
| | 04:59 | transitions between the clips and if
you're going to add Random, Pan and Zoom,
| | 05:03 | then this will encode like a movie and
that will add a lot to the file size of
| | 05:08 | the Flash movie that's exported.
| | 05:10 | So if the file size, the download time,
if that's your chief critical concern,
| | 05:15 | that you'll probably want to keep away
from the transition and from the effects
| | 05:20 | like Random, Pan and Zoom, we just
have the images flip one to another.
| | Collapse this transcript |
| Testing a project for errors| 00:01 | So, once you've created your projects, set up
your links, and you're ready to export to Flash,
| | 00:05 | there is still one more step you need
to be aware of and that is that you want
| | 00:09 | to test and also preview your project.
| | 00:13 | Now there is a built-in way in Encore to
do this, kind of like there is in Flash.
| | 00:16 | We can go to the Build panel, and I'm going
to click this button that says Check Project.
| | 00:21 | So the Check Project panel pops up, and
we can check all of these things, that
| | 00:25 | we want Encore to check for.
| | 00:27 | These are all errors, the
potential errors in our project.
| | 00:31 | Now if you're only going to be
outputting to Flash, there are certain things
| | 00:34 | that you don't really need to be aware of.
| | 00:37 | Things like Title Remote, menu Remote,
Disk Capacity, these things are a disc
| | 00:41 | specific and not really
pertinent when we're outputting to Flash.
| | 00:44 | So we're just going to go ahead and
start the troubleshooting, error checking
| | 00:48 | process by clicking this Start button here.
| | 00:50 | And in just a split second, we
see a big list of problems here.
| | 00:54 | Now the first thing is that we have a
button, this little icon tells us that
| | 00:57 | this is a button and the button is Locations.
| | 01:01 | I can just double click this right here,
even in the Check Project panel and we
| | 01:04 | see the menu pops up in the background.
| | 01:06 | So we don't have to be looking at the
menu, we simply double click Locations,
| | 01:09 | not only does the menu pop up, but the exact
button that's the problem is also selected.
| | 01:14 | The problem with Locations button is
this is not linked to anything, and I
| | 01:17 | actually want to link it to the slideshow.
| | 01:20 | So I'm going to go over to the
Project panel and with the Locations button
| | 01:23 | selected, I'm going to drag the pick
whip Link here and drag this over to the
| | 01:29 | Slideshow and that actually fixes two problems.
| | 01:32 | Now we've created a link for
Locations and one of the problems for this
| | 01:35 | Slideshow, this is slideshow icon here
is that it's an Orphan timeline, in other
| | 01:40 | words an Orphan slideshow, nothing links to it.
| | 01:43 | The other problem with the
slideshow is that the End Action is not set.
| | 01:46 | So I'm going to select the Slideshow
in the Project panel, and then go to the
| | 01:51 | Basic tab of the Properties
panel with the Slideshow selected.
| | 01:54 | Before the End Action, I'm
going to drag this back to the menu.
| | 01:57 | So, once the slideshow is done
playing, I want to go back to the menu.
| | 02:01 | Now if I select the Products button
here in the menu, you can see that I've
| | 02:05 | actually enabled a web link, and we do
still get a problem here and errors says
| | 02:09 | that the link is not set.
| | 02:11 | But it can be ignored for Flash,
not tells us that there is a web link.
| | 02:15 | So we didn't get the same error here
because there was no web link or a regular
| | 02:19 | link and here we have no regular
link but it does have a web link.
| | 02:23 | To see this exception, you'll need
to make sure that web Link for Flash is
| | 02:27 | checked up here at the top or
towards the top of the Check Project panel.
| | 02:31 | Finally, the surfing
timeline doesn't have an End Action.
| | 02:34 | So I'm going to select it here in the
Project panel and then the End Action, we
| | 02:37 | will drag the pick whip over to the menu.
| | 02:41 | Now there is one other problem that
didn't show up here in the list of errors.
| | 02:44 | We wanted it to check for First Play
and for some reason the First Play problem
| | 02:49 | did not show up here.
| | 02:50 | But actually, we do not
have a first play object.
| | 02:51 | So before we test our project, let me
get to even just click Start here and make
| | 02:56 | sure that we don't have any other
problems and all those problems went away, so
| | 02:59 | we're all good there.
| | 03:00 | We need to create a First Play
object here in the Project panel.
| | 03:02 | So I'm going to right click on our
menu, and I'm going to select the Set
| | 03:06 | as First Play.
| | 03:08 | So now with all of our first play
objects and End action set and our links
| | 03:13 | are ready to go.
| | 03:14 | We're ready to test our project.
| | 03:16 | So the way that we do that is we go to
this little icon right here, looks like a
| | 03:20 | disc with an arrow, click that and we
get a Preview window and that will allow
| | 03:24 | us to test our disc.
| | 03:26 | You'll see that I have this little
mouse rollovers, so as someone selects an
| | 03:30 | icon, their cursors goes to Our
Story or Products or Locations.
| | 03:34 | We're getting these little rollovers
here, and these are called subpicture
| | 03:37 | highlights in Encore's language.
| | 03:39 | Now the first link Our Story, links
over to the Timeline, and the timeline has
| | 03:45 | a surfing video.
| | 03:46 | It's a few seconds and then the end
action takes us back to the DVD menu.
| | 03:52 | Products is a web link, we'll test that
in Flash in the next chapter, and then
| | 03:56 | Locations, we also go to our slideshow.
| | 03:59 | (Music playing.)
| | 04:14 | And once that's done playing, the end
action takes us back to our menu and
| | 04:18 | our project looks good.
| | 04:19 | So now we're ready to move on to the
next chapter where we're going to talk
| | 04:22 | about exporting this to a Flash movie.
| | Collapse this transcript |
|
|
2. Exporting a Web SiteExporting to Flash| 00:01 | Once you've made your project, tested it
and previewed it, and everything works
| | 00:05 | right, it's time to export.
| | 00:08 | Exporting is one of the simplest
and easiest parts in this process.
| | 00:11 | To do this, simply go to the Build menu,
and then in the Format, change from DVD
| | 00:17 | or Blu-ray to Flash.
| | 00:20 | Now, there are tons of options
here that we're going to be looking at
| | 00:22 | throughout this chapter.
| | 00:24 | Under Output dropdown, you
only have one choice, that's SWF.
| | 00:27 | What this is going to do is create
a SWF that's basically your web site.
| | 00:32 | In other words, this menu right
here, is going to become a SWF file.
| | 00:37 | web links will retain their web linkness,
they will still stay web links, link
| | 00:41 | to other web sites on the Internet.
| | 00:43 | The links that link to timelines and
slideshows, will link to those timelines
| | 00:47 | and slideshows, and they will
be converted to Flash video.
| | 00:50 | You'll notice that the Build button is
grayed out here in the upper right-hand
| | 00:53 | corner, that's the magic button
that makes this whole thing happen.
| | 00:56 | Now what you need to do first is click
the Browse button to open up the Browser
| | 01:01 | window and choose a folder to save your project.
| | 01:05 | Then you could also change
the name or what have you.
| | 01:08 | But once you've chosen a location,
let's say, for example, I chose my Desktop,
| | 01:12 | then I could go ahead and click Build in the
Build panel and I can create this Flash-based web site.
| | 01:20 | Now there are a lot of options here in
the Build panel, as we scroll down here.
| | 01:23 | We're going to spend the rest of this
chapter looking at these options, so you
| | 01:27 | can create the Flash-based web site
from Encore, that you want to create.
| | 01:32 | At the end of this chapter, after
we've customized our Flash-based web site,
| | 01:36 | we'll actually build it and check out the
files it creates and preview it in a browser.
| | Collapse this transcript |
| Changing the output size | 00:01 | In the Build panel, when you're
exporting for Flash, Encore lets you choose the
| | 00:06 | size of the video that you're going to export.
| | 00:09 | In the Settings area, if you scroll
down here, there are a bunch of presets.
| | 00:12 | Unfortunately, you can't specify
exactly the size of the video, but there are a
| | 00:16 | lot of presets here to choose from.
| | 00:18 | The ones above the divider line are
standard dimensions and the ones below the
| | 00:23 | line are Widescreen dimensions.
| | 00:27 | If your original video footage was
meant for broadcast or DVD, then you might
| | 00:32 | want to choose a 640x480 preset.
| | 00:35 | If you're working with Standard
Widescreen video, meant for broadcast or for
| | 00:39 | DVD, you probably want to
choose one of the 960x540 presets.
| | 00:44 | The bottom three presets are
720p for high-definition video.
| | 00:48 | Also notice that for each pixel
dimension, Encore gives you three choices, low,
| | 00:52 | medium or high quality.
| | 00:55 | Now, again, this doesn't affect the
size of the output of the entire SWF, only
| | 01:00 | the dimensions of the
video they are going to output.
| | 01:04 | Now keep in mind that these
dimensions don't specify the final size of
| | 01:08 | the entire project.
| | 01:10 | What Encore is going to do is going to create
a SWF file that is housed in an HTML document.
| | 01:17 | So these preset sizes really determine
the size of the SWF file and not really
| | 01:22 | the size of the entire
document with the HTML template.
| | 01:25 | Let's go ahead and look in the next movie,
a little more closely at these HTML templates.
| | Collapse this transcript |
| Using HTML templates as backgrounds| 00:01 | As we talked about in the last movie,
when Encore creates your Flash-based
| | 00:05 | web sites, it does so by creating a
SWF that's housed in an HTML file.
| | 00:10 | Now you can create your own HTML template.
| | 00:13 | You can do that by clicking Import
Template, and then choosing a folder that has
| | 00:17 | an Index.html file in it, but we're not
going to do that here, I'm just going to
| | 00:21 | hit Cancel, or you could use
templates that ship with Encore.
| | 00:24 | Now you don't have to choose a template.
| | 00:27 | If you choose None, then there won't be
any template, but I actually do want one.
| | 00:32 | So I'm going to select corporate1 and I
want to check and see what this looks like.
| | 00:34 | So with corporate1 selected, I'm
going to click Preview Template.
| | 00:37 | This opens this template in your web
browser, mine happens to be Firefox, and so
| | 00:43 | we have a bunch of cool, little
graphics going in the background like an image.
| | 00:47 | Then this little box right
here is where the SWF would go.
| | 00:50 | So HTML templates are essentially a way
for you to customize the look and feel
| | 00:55 | of your Flash-based
web site created here in Encore.
| | 00:59 | Now if I'm not mistaken, I believe
you might be able to find more of these
| | 01:03 | HTML-based templates online at
Abobe.com or through other web sites.
| | 01:09 | But even the four that we have here to
choose from, let's look at another ones,
| | 01:12 | look at corporate 2 here,
even these are pretty cool.
| | 01:15 | So again, for those who are like me
that aren't masters of HTML, there is a
| | 01:19 | solution for you, in HTML templates.
| | Collapse this transcript |
| Exporting FLV versus F4V video| 00:01 | Another choice that Encore gives
you is how to encode the video, again,
| | 00:05 | we're working in the Build panel, the
Settings area, and you could choose between
| | 00:10 | F4V and FLV.
| | 00:12 | Now, if you just have a static menu,
it will become a regular old SWF file.
| | 00:15 | But if you link to a timeline that
plays video or to a slideshow with
| | 00:19 | transitions and effects like pan and
zoom, then it's going to need to encode
| | 00:24 | that into video and you have,
again, a choice between F4V and FLV.
| | 00:29 | Now F4V might sound a little bit new to you.
| | 00:32 | It's a new Flash video format.
| | 00:35 | I say it's new, it's fairly new,
it was introduced in late 2008.
| | 00:40 | So only Flash video players
from late 2008 will support it.
| | 00:46 | So it's a more efficient means of compression.
| | 00:49 | In other words, you're going to get
better quality at lower file sizes, but it's
| | 00:53 | not going to be as compatible with as
many players because not so many people
| | 00:56 | have that version of the Flash
player which will understand F4V.
| | 01:00 | FLV, again, not is efficient
means of compression, but it's very
| | 01:04 | ubiquitous, it's all over the place, and most
Flash players out there will support this format.
| | 01:09 | So, it depends on the audience
that you're going for and what you're
| | 01:12 | really trying to achieve.
| | Collapse this transcript |
| Creating a SWF file with streaming video| 00:01 | The final Flash output option that I
want to cover here is the ability Encore
| | 00:05 | gives you to output a
progressive or streaming video.
| | 00:09 | So scroll all the way down to the bottom of
the Build panel and we'll see these two
| | 00:12 | options here, Progressive Download
and Flash Media Server Streaming.
| | 00:16 | For a Progressive Download, basically,
the viewer downloads the entire movie,
| | 00:22 | and when we have a Media Server
Streaming, then they don't have to download the
| | 00:26 | entire movie before they start watching.
| | 00:28 | It's basically just streamed to their computer.
| | 00:31 | Now if you select Flash Media Server,
you don't actually have to have a Flash
| | 00:36 | Media Server, we can go over to the
Server here and we could have a Level3.
| | 00:40 | In other words, this is a Flash Media
Server that you might have, or you could
| | 00:44 | use a service such as PlayStream.
| | 00:46 | Now PlayStream is actually a web site,
PlayStream.com, and what you can do is use
| | 00:52 | PlayStream to upload your videos here
and then you will stream from PlayStream.
| | 00:57 | So this is great if you have a lot big
video, you don't want the user to have to
| | 01:01 | download this to their machine
before they start watching their video.
| | 01:04 | Also, Flash Media Server Streaming
is a little bit more secure as well.
| | 01:08 | Now if you're not signed up for
PlayStream, and that doesn't interest you,
| | 01:12 | and you don't have a Flash Media Server,
then you'll need to choose Progressive Download.
| | Collapse this transcript |
| Previewing the final product| 00:01 | So now the time has finally come to
export this project and see what it looks
| | 00:05 | like as a Flash-based web site on the web.
| | 00:08 | So I'm using FLV 640x480 Standard
Medium Quality, I believe, and I'm going
| | 00:15 | to scroll down, and I'm going to use the
corporate1 template, this Progressive Download.
| | 00:21 | I'm going to save this in the Chapter
03 folder of the Exercise Files and once
| | 00:26 | you're all done go ahead and click Build.
| | 00:28 | Now this is going to take a little while
probably depending on the size of your project.
| | 00:33 | This current project is fairly small so
it'll only take about three minutes, or
| | 00:37 | less than three minutes to
transcode this on my computer.
| | 00:41 | Once you are done, you can go over to
where you saved your Flash project and it
| | 00:47 | automatically creates a new folder for
you, so you don't have to worry about all
| | 00:49 | these files just kind of being dumped somewhere.
| | 00:52 | It created a folder for me
automatically and it created an XML file, and it
| | 00:57 | created the SWF, and it also created
the HTML file which is the template which
| | 01:02 | holds the SWF file, and then in the Sources
we have all the different sources that it uses.
| | 01:07 | It converted some of the images
to PNGs and that type of stuff.
| | 01:09 | But what I'm going to do is just
double-click the index.html file to open
| | 01:13 | this in my browser.
| | 01:15 | As you can see here we have a
pretty faithful recreation of our Encore
| | 01:19 | project here on the web .
| | 01:21 | I'll click Our Story and we play the
video, I'm just going to pause that to show
| | 01:26 | you this cool interface, we can back up,
we can go the next marker, we can go to
| | 01:32 | the main menu, we can go up a menu
and also we can play with the audio.
| | 01:38 | I'll just go ahead and play this
again and skip to the end which will take
| | 01:41 | us back to the menu.
| | 01:43 | We can click this button which will
open up our link, and what it's telling us
| | 01:47 | here, is that there's a security
measure on my computer with my browser, that's
| | 01:54 | not letting us open this up.
| | 01:56 | But if this were a link on the
Internet it would work, it's just my privacy
| | 02:00 | settings are preventing this from opening up.
| | 02:02 | And I found also that along that same
line is that when you are trying to use a
| | 02:08 | Flash-based web site from a local drive,
in other words from your hard drive, web
| | 02:12 | links often have a difficult time working.
| | 02:15 | I found this to be the case even
after I've changed my privacy settings.
| | 02:19 | But if you use this web site from a
remote server, you won't have any problems.
| | 02:24 | Now I come just short of giving you a
full guarantee for that, but more than
| | 02:29 | likely that's what's going to
happen, it's going to be fine.
| | 02:31 | We can click Locations, to get to
our slideshow and hear some audio.
| | 02:35 | (Music Playing)
| | 02:39 | Now I could also adjust this little speaker
icon on the left- and right-hand side here.
| | 02:43 | I can click No Audio, if I don't want any audio.
| | 02:45 | But as I play this I can change the volume
by clicking these little light bars here.
| | 02:53 | (Music Playing)
| | 02:57 | So again I can click one of these
buttons, get back to our main menu.
| | 03:00 | And you can see we have a complete
presentation here, a SWF that links to FLV
| | 03:06 | files, a slideshow, the whole bit,
navigation, web links, everything done
| | 03:12 | in just a few clicks of a mouse in Encore.
| | Collapse this transcript |
|
|
