IntroductionWelcome| 00:04 | Hey there! This is Ray Villalobos and
welcome to Adobe Edge Prerelease 6: First Look.
| | 00:09 | In this course, we'll look Adobe's HTML5
animation and interaction software Adobe Edge.
| | 00:14 | I'll start by showing you how to download
and install Adobe Edge and go through setting
| | 00:18 | up understanding the Edge interface,
previewing, and publishing your Edge projects.
| | 00:23 | Then I'll show you how to work with some
of the tools in Adobe Edge, like the drawing
| | 00:27 | and text tools, plus how to work
with custom fonts and imported assets.
| | 00:32 | We'll also see how Edge animation works using
keyframes and symbols plus how to use easing and the timeline.
| | 00:38 | Finally, I'll show you how to program Adobe
Edge using timeline triggers, organizing animations
| | 00:43 | with labels, and object scripts, plus the Code
panel, a new addition to this prerelease version.
| | 00:49 | We'll be covering all these features and
lots more, so let's get started with Adobe Edge
| | 00:54 | Prerelease 6: First Look.
| | Collapse this transcript |
| Downloading and installing Edge| 00:00 | Adobe Edge is not a regular application, but
a prerelease product. Because of that there's
| | 00:05 | a couple of ways to download and
install it, so let's take a look.
| | 00:08 | One way to download Edge is to go to
Adobe's official Edge site at edge.adobe.com.
| | 00:13 | I want to scroll down and click on the Get
Edge preview 6, and that will launch the Adobe
| | 00:19 | Labs web site. You'll need to have an Adobe
ID, so you can create an account or sign in
| | 00:23 | with your existing account.
| | 00:27 | So, I need to scroll down over here
and pick a version for my platform.
| | 00:31 | I'm on a Mac, so I'll click on the Edge preview
6 for Mac, and that should download an installer
| | 00:37 | into my downloads folder. I'm in Safari so
I can just click on this icon, then click
| | 00:42 | on this magnifying glass, and I'll double-
click on this installer, open up this folder and
| | 00:49 | run this install application. I'll click on
Accept here for the License Agreement, and
| | 00:54 | then hit the Install button.
| | 00:59 | Now the Installation is Complete, so I'll hit the
Launch Now button, and that launches the application.
| | 01:04 | I am going to go ahead and quit Adobe Edge
here, and I want to show you that if you have
| | 01:09 | any problems, you may want to check to see
if you have a previous version of Adobe Edge
| | 01:13 | installed, before you install a new copy.
| | 01:15 | So, if that's the case just double-click on
the Adobe Edge Preview folder and find the
| | 01:20 | Edge Uninstaller application.
| | 01:23 | So double-click on that, and
then hit the Uninstall button.
| | 01:28 | We'll now hit the Close button, and
now the application is Uninstalled.
| | 01:32 | Now there is a second way of getting the Adobe Edge
preview, and that is if you want a Creative Cloud Membership.
| | 01:38 | If you go to the Adobe Creative Cloud at creative.
adobe.com and sign in with your Adobe ID--then we'll
| | 01:45 | click on Sign in right here--you
can log into the Creative Cloud.
| | 01:49 | I am going to go to the Apps & Services tab
right here, and I can choose to try or install
| | 01:54 | any of the Adobe applications.
| | 01:56 | If this is your first time on Creative Cloud,
you'll have to first download and install
| | 02:00 | the Adobe Application Manager.
| | 02:04 | And I'll go to Downloads folder and open up
the Adobe Application Manager application,
| | 02:10 | and there is the download, so let's wait until
that it finishes running, and I'll double-click
| | 02:15 | on that let's click Open here.
| | 02:18 | Once again if you encounter any errors make sure
that you don't have an old version of Edge installed.
| | 02:23 | If you do, look for the uninstaller application
and Uninstall Edge before you install the new copy.
| | 02:29 | So this is the Adobe Application
Manager window, and you have to login.
| | 02:33 | So I'll Sign-in, and I'll
Accept the License Agreement.
| | 02:39 | Within the Adobe Application Manager,
installing application is extremely easy.
| | 02:42 | Here is the Adobe Edge Preview, so I'll click
on this Install link and the application will
| | 02:47 | download, and then install, and you can even
launch the application from within this window.
| | 02:52 | So I'll click on Launch
App and Adobe Edge launches.
| | 02:57 | Installing Edge is easier if you
have a Creative Cloud subscription.
| | 03:00 | If you don't, the
prerelease site is easy enough.
| | 03:02 | Either way, make sure you've uninstalled older
copies of Edge before you run the installers.
| | Collapse this transcript |
| What is Adobe Edge?| 00:00 | Before we get started with Adobe Edge let's take a
minute to talk about what Edge is and what it's for.
| | 00:06 | Edge is a motion and interaction design tool
from Adobe that helps you build animated and
| | 00:11 | interactive graphics with HTML standards.
| | 00:14 | It's similar in that way to Flash, but it
uses Web standards to let you build content
| | 00:18 | that is viewable across a large number of
devices and platforms, and that includes iOS
| | 00:23 | devices like the iPhone and the iPad.
| | 00:26 | Adobe has taken the time to re-imagine how
a timeline-based interface should work for
| | 00:30 | online graphics, and focused on creating an easy-to-
use and speedy workflow for building animations.
| | 00:36 | If you're familiar with Flash or other Adobe
Timeline tools like After Effects, Edge will
| | 00:41 | be easier to work with.
| | 00:43 | A really interesting fact about
Edge is that it's a DOM based tool.
| | 00:47 | So if you're familiar with the Document Object
model or objects within an HTML page or structure
| | 00:52 | into an outline of elements, the Edge
interface will make a lot more sense to you.
| | 00:56 | Unlike Flash's ActionScript, Edge
has no built-in scripting language.
| | 01:00 | It uses standard JavaScript
and includes a copy of jQuery.
| | 01:04 | So you can build interactivity
with HTML scripting languages.
| | 01:07 | Edge is classified as a prerelease product,
so although it's quite capable, there's no
| | 01:12 | guarantee that the way to working right now
will be the way the product functions when
| | 01:16 | it's finally released as a complete application.
| | 01:19 | Adobe has undertaken a methodical and
deliberative approach to building an HTML-based interactive
| | 01:24 | application tool with Edge.
| | 01:26 | Right now, building cross-platform compatible
animations and interactivity into an existing
| | 01:31 | web site is cumbersome and time-consuming.
| | 01:33 | Edge represents the future of the Web,
and it can't wait for every new release.
| | 01:37 | Adobe is hinting a greatness with
every new peek into this application.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you're a premium member of the lynda.com
Online Training Library or if you're watching
| | 00:05 | this tutorial on a DVD-ROM, you have access to
the exercise files used throughout this title.
| | 00:11 | Inside the exercise files folder, you'll see
additional folders for each movie in the course.
| | 00:16 | If you open up some of these folders, you'll see
assets that we use when working with that particular movie.
| | 00:22 | On some folders, you may see a
finished folder as well as a working folder.
| | 00:27 | The working folder will have
a folder called RouxAnimation.
| | 00:31 | This folder has the files
when I began the project.
| | 00:34 | Adobe Edge writes a series of files to your hard
drive, so all the files are grouped into this folder.
| | 00:40 | Anytime you see something outside this RouxAnimation
folder, it's an asset that we'll be using in that movie.
| | 00:46 | Start by copying these files onto your Desktop.
| | 00:49 | I like to move any additional files to the
right of my screen and open up the RouxAnimation
| | 00:55 | folder, then double-click on the .edge file.
| | 00:59 | If you're a monthly member or annual member
of lynda.com, you don't have access to the
| | 01:03 | exercise files but, you can follow
along from scratch with your own assets.
| | 01:08 | So let's get ready to take a
look at Adobe Edge Prerelease 6.
| | Collapse this transcript |
|
|
1. Exploring EdgeUnderstanding the Edge interface| 00:00 | The interface for Edge is similar to other
Adobe products, but because of its focus on
| | 00:05 | HTML standards, Edge works a little bit differently
than most other applications, so let's take a look.
| | 00:11 | So when you first run Edge, you'll see the
standard getting started window, you want
| | 00:15 | to click on Create a New
document to start the Edge interface.
| | 00:18 | When you first run Adobe Edge, you'll be
presented with an application frame view of the interface.
| | 00:23 | For Mac users there is no option of starting
out with a normal view, but that's okay, the
| | 00:27 | application frame is a real
comfortable way for working with most projects.
| | 00:31 | There is a lot less panels than in most
applications, but like with other Adobe CS6 products, the
| | 00:37 | dark interface is
standard for working with Edge.
| | 00:40 | Panels can be repositioned like in other apps,
so I can click on these little handles right
| | 00:45 | here and put panels wherever I want them to go,
and there's even a way to create workspaces,
| | 00:50 | as well as resetting workspaces to
the default, which I'll do right now.
| | 00:54 | You can also drag the Edges of panels to
resize them, and there is usual pop-up menus under
| | 00:59 | each panel, although there are super sparse
right now I imagine as Adobe gets closer
| | 01:03 | to releasing a final product, these
will be enhanced and improved upon.
| | 01:08 | There are seven panels that come with this
prerelease and six of them are viewable in
| | 01:12 | the standard workspace.
| | 01:13 | Of course, the tools panel which is at the
top of the window, the Properties panel which
| | 01:17 | is to the left of the stage, which is the
main area where you draw things, the Timeline
| | 01:22 | which is underneath and
at the bottom of the stage.
| | 01:25 | The Elements panel which is to the right of
the stage, as well as the Library panel that's
| | 01:30 | right underneath that, and then there's a
Lessons panel that gives you some step-by-step
| | 01:34 | lessons for learning Edge, and finally,
the Code panel which is new for Prerelease 6,
| | 01:40 | and normally hidden.
| | 01:42 | So, the tools panel has a set of drawing an
object manipulation tools, as you see right here.
| | 01:47 | Of course, we have this standard Selection
tool, and we have tools for drawing rectangles
| | 01:51 | and rounded rectangles.
| | 01:53 | Rectangles and Rounded Rectangles are pretty
much the same object, so if I click and drag
| | 01:56 | on one of these, you can see that even though
I can draw a rectangle with this tool, I can
| | 02:01 | make it into a rounded
rectangle using the Properties panel.
| | 02:04 | So, really these two tools are pretty much the same,
this is just a shortcut for creating rounded rectangles.
| | 02:09 | So you can also add a clipping path to any
elements, so this is the Clipping tool, let
| | 02:13 | me go ahead and give this a rounded edge,
and I'll use this Clipping tool that allows
| | 02:18 | me to clip out some of
the edges of that element.
| | 02:20 | Of course, you have the Transform tool,
which lets you rotate an element and also allows
| | 02:26 | you to change the origin of the rotation,
so I can move this little target right here
| | 02:30 | by clicking and dragging on it, and then from then on,
whenever I rotate, I'll rotate around that origin.
| | 02:35 | Of course, there is color wells right here,
so you can change the color of any object,
| | 02:39 | as well as the stroke, right now this
element doesn't have any stroke, so we can give it
| | 02:44 | a stroke by going to the Properties panel and
just clicking and dragging on this edge right here.
| | 02:49 | So, right now I have a black stroke, I'll
switch it to a green stroke, and right now
| | 02:55 | because I'm clipped I can't really see the edge,
so I'll make this a little bit smaller, make
| | 03:01 | it clip a little bit differently there,
and I can see the entire border of my object.
| | 03:06 | And of course there is a
Text tool, you see right here.
| | 03:08 | If I click on that I can just start typing text
and move that text around like a normal element.
| | 03:15 | Of course, the Properties panel is pretty
much a standard across all Adobe products
| | 03:20 | and a super important part of this interface.
| | 03:22 | You can adjust the properties of any
elements on a page with the Properties panel.
| | 03:26 | It's context-sensitive, which means that it
adjusts to display the elements most important
| | 03:32 | to this particular object.
| | 03:33 | So, since I've text selected, I can see that
I can change the font right here, change the
| | 03:38 | font size of the text,
as well as the text color.
| | 03:41 | If I click on this other element that I drew,
I can do things like controlling the rounded
| | 03:46 | edges and also the width of the border,
as well as other rectangle like properties.
| | 03:54 | So the Timeline is where you animate elements.
| | 03:56 | If you're familiar with the After Effects
or even Photoshop's animation timeline, these
| | 04:00 | will seem familiar.
| | 04:02 | As you create elements on the
stage, you can animate them here.
| | 04:05 | Now one interesting thing is that you
can't reorder the position of these objects, so
| | 04:09 | let me go ahead and just make this a different
color, and if I want to change the positioning
| | 04:14 | in these objects, I can't do that here.
| | 04:16 | I have to do that in the Elements panel, so
the elements allow you to reposition objects
| | 04:21 | and also move objects within other objects.
| | 04:24 | So I can put this text inside this rectangle
and right now you can see that the rectangle
| | 04:29 | actually clipping the text and these
will move together as a single element.
| | 04:33 | So that's done through the Elements panel,
and it does have a relation to the Timeline
| | 04:37 | panel, as soon as I insert another object--
so I'll click on this rectangle and draw me
| | 04:41 | another rectangle here--you can see that they
both show that these are rectangles and they're
| | 04:46 | positioned in the current layering system.
| | 04:48 | I can rename any of these rectangles
by double-clicking on the Timeline.
| | 04:52 | I'll call this one big_red here, and I'll
click on this one and call it round_rect.
| | 05:00 | Notice how Edge automatically renames my layer,
so that they are HTML compatible div names.
| | 05:05 | So, the Elements panel is sort of like
a Timeline panel that you can animate.
| | 05:09 | It helps you think of it as a layers panel.
| | 05:12 | So, the Library panel is where you manage
all of your assets in Edge, it will show
| | 05:16 | any existing files that you've imported, plus
allow you to create symbols and add custom fonts.
| | 05:21 | We will be covering the
Library panel in another movie.
| | 05:24 | Of course, you see the Lessons panel here
to the right of the interface, and there's
| | 05:28 | a lot of lessons that are pretty
good for getting along in Edge.
| | 05:32 | Although they are not videos, they're step-by-step
instructions that will get you going with Edge quickly.
| | 05:37 | Although Edge comes with a pretty standard
Adobe interface, when working with Edge, it
| | 05:41 | helps to remember that this
is an HTML animation tool.
| | 05:44 | Working with Edge, means you'll be
working with an animating divs in the stage.
| | Collapse this transcript |
| Setting up the stage| 00:00 | Just about any project usually
begins by setting up the stage.
| | 00:04 | In Edge the stage can be controlled through the
Properties panel when no objects are selected.
| | 00:09 | If you've got another element here, like a
rounded rectangle, then the Properties panel
| | 00:13 | will show properties for that element.
| | 00:15 | If you want to change the Stage just click
on the background, and then you can see these
| | 00:18 | options for the Stage.
| | 00:20 | So, the first thing you see is
of course the Width and Height.
| | 00:23 | We can choose a Width and the Height by
clicking and dragging right here--and I think you
| | 00:27 | can't see it, because it's sort of hidden here.
| | 00:29 | So, I'll make it smaller, and there you
can see the Width and Height can adjust
| | 00:33 | right there and here's the Height.
| | 00:37 | If we click on this little icon right here,
they will adjust proportionally together and
| | 00:42 | of course, we can also type
in these sizes numerically.
| | 00:44 | So I can 1000x320, and that will adjust
the size of the Stage to those numeric sizes.
| | 00:51 | Of course, I can click on this well right here
and change the background color of the stage.
| | 00:56 | Now H has his option for Overflow, it means
what happens when an object goes off screen,
| | 01:01 | so if I put this object right here, and
right now I have the overflows being visible, if
| | 01:06 | a preview this in a browser, I am going to
hit Command+Return, because I'm on a Mac,
| | 01:10 | or be Ctrl+Enter on a PC, you could see that
even though the object is off the Stage, it's
| | 01:15 | still showing me the entire object, that's
because of that option to make the Overflow visible.
| | 01:21 | If I turned this on to hidden, and I hit Command+
Return or Ctrl+Enter, you can see that the Overflow
| | 01:26 | is now hidden from view.
| | 01:28 | That's actually an object by object property,
you can make any object have its overflow
| | 01:32 | show up or be hidden.
| | 01:34 | In addition to some other options that are
kind of weird, but makes sense if you know
| | 01:38 | HTML, you can said the overflow to be scroll,
which if we preview it, shows you this little
| | 01:43 | scrolling bars, and you can scroll
and see the rest of the overflow.
| | 01:46 | I am not sure if you would use that for developing
animations in Edge, but it's there, because it's in HTML.
| | 01:52 | Of course, you have the option to Autoplay,
since this is an animation program, this will
| | 01:56 | mean that the animation will
automatically play when it's loaded into the browser.
| | 02:00 | If you click that off, then you can
control the application with JavaScript.
| | 02:04 | The Composition ID allows you to customize
the name for the ID that it creates when it
| | 02:09 | places an object in HTML, so we can modify
that to make it something else, that's a little
| | 02:14 | more humanly readable.
| | 02:15 | You want to make sure that it's something
unique just in case you're planning on using
| | 02:19 | several edge animations per page, that's why it
such a random number, when you first started off.
| | 02:24 | Notice there is also diamonds next to the
stage and the color that means that these
| | 02:28 | options are something you can animate.
| | 02:30 | Now there are a few other options that allow
you to control what happens when Edge encounters
| | 02:34 | a browser without HTML5 support,
and also control the pre-loader.
| | 02:39 | We'll cover those more in depth in other
movies, but let's check them out really quick.
| | 02:43 | So first is this poster image thing, what
that means is that Edge allows you to show
| | 02:48 | something on screen for browsers
that don't support HTML5 construct.
| | 02:52 | I need to save the document before I can
create a poster image, but if I saved it, then I
| | 02:57 | can ask Edge to select a specific
keyframe or a keyframe state as my poster image.
| | 03:03 | I can also choose to show a
standard graphic as the poster image.
| | 03:07 | Now in the down level Stage Options there
are options for what happens when we're in
| | 03:12 | a browser again that does not support HTML5.
| | 03:15 | So, when I click on that, it
goes into a special timeline.
| | 03:18 | Notice that, right here it shows
you the hierarchy of the Timeline.
| | 03:22 | So right now we're in this down level timeline.
| | 03:24 | If we click back to Stage, we'll
go back to the regular stage.
| | 03:27 | So I will click on Edit here again, and if we
had a poster image, we can insert the poster
| | 03:32 | image, or we can insert a graphic that says,
sorry you don't have any HTML support or
| | 03:37 | whatever else you wanted to say when
somebody has an older browser. So let's go back into
| | 03:41 | the Stage and another thing that you can do is
control what the pre-loader image looks like.
| | 03:46 | If I click on Edit, again it goes to a
different timeline, notice the stage is right here,
| | 03:51 | and we're on the pre-loader timeline, and
I can insert a premade preloader from the
| | 03:56 | list right here or place my own preloader
on the screen, so I can hit this Loading Bar
| | 04:01 | and actually hit Insert, and it'll show
this animation when the file is loading.
| | 04:06 | Over here you can see the preloader size,
how the size of the image that I have affects
| | 04:10 | the total size of my document, and of course,
you can put anything else you want in here,
| | 04:14 | like some text or maybe even a photo.
| | 04:17 | So setting up the Stage is pretty easy in
Edge, and I, like some of these options to
| | 04:20 | control what happens when
somebody has older browsers.
| | Collapse this transcript |
| Previewing, saving, and basic publishing| 00:00 | If you're like me, you're probably
terrified of working with unsaved document.
| | 00:04 | Sooner or later, a power outage will teach
you that while we still have file systems,
| | 00:08 | saving files is often a good idea.
| | 00:11 | If you're used to other software like Flash,
Photoshop, or Fireworks, you're used to dealing
| | 00:15 | with at least two sets of files, a native
version of your files, as well as an output version.
| | 00:21 | Edge is a lot different than most software,
because saving or publishing files can easily
| | 00:26 | generate ten or more files.
| | 00:28 | So let's take a look at how Edge
previews, saves, and publishes documents.
| | 00:32 | We'll start off by creating a document.
| | 00:34 | I'll just hit the Create New button here,
and I'll resize my Stage to 1000 pixelsx320,
| | 00:40 | and I'll hit the Command+- or the Ctrl+-
on a PC, and I'm going to bring in a graphic
| | 00:46 | just to show you some of the folders
that Edge creates when exporting graphics.
| | 00:50 | Ill go to the File menu and select Import.
| | 00:52 | I have a graphic on the Desktop called art01, so I'll
click on Open, and it places the document in the window.
| | 01:00 | Now I'm going to create a rectangle just a
rounded rectangle, click and drag right there,
| | 01:06 | and I'll color it a little bit dark red, click
on the Text tool, and I'll create a text element
| | 01:11 | called Roux Academy Conference, and
I'll drag that over here, color it white.
| | 01:20 | Actually, if you're used to any other Adobe
tools, drawing is pretty simple, but I just
| | 01:26 | wanted to quickly create this document to
show you actually the exporting feature.
| | 01:30 | So I'll make that a little bigger, scoot it over,
and now I'm ready to go ahead and export this.
| | 01:35 | So we'll start by saving
the file from within Edge.
| | 01:39 | Simple enough, go to the File menu,
you can select Save or Save As.
| | 01:42 | This is the first time I save this document, so
it really doesn't matter, I'll choose Save As.
| | 01:47 | And what I want to do is I
want to place this on the Desktop.
| | 01:49 | Now before you save a document,
you'll definitely want to create a folder.
| | 01:53 | Edge is going to generate about ten or
more files depending on the amount of graphics
| | 01:57 | that I'm using in a project. So it's
often best to group them into a folder.
| | 02:01 | So I'm going to click on New Folder, I'll
call it rouxacademy, hit the Create button,
| | 02:07 | and then I'll give my document a name
and the File Format will be Html file.
| | 02:12 | So I'm going to hit Save, so let's take a
look on the Desktop and see what's happened.
| | 02:16 | So here's the folder that we
created, here's my original artwork.
| | 02:19 | So I'll open that up, and you see that Edge
has generated a number of files, including
| | 02:24 | an images folder, because I placed an image
in there, as well as an edge_includes folder
| | 02:29 | with a number of other files.
| | 02:30 | So there are quite a few files already in here, and
we have barely drawn anything at all in Adobe Edge.
| | 02:36 | So what I'm going to do is I'm going to open up
BBEdit, and we'll take a look at some of these files.
| | 02:40 | This is just a text editor.
| | 02:41 | So the .edge file is what you would consider
the native file. But it's slightly different.
| | 02:47 | Notice that it's a little bit of
text with actually some JSON data.
| | 02:51 | Now the HTML file is pretty simple HTML.
| | 02:54 | You could see that it has an HTML5 structure
with a single div right now, right here, as
| | 03:01 | well as a little bit of a style here just to show
that the Edge class here is not going to display at all.
| | 03:08 | And it also has a link to a JavaScript file
called rouxacademy_edgePreload.js, and that
| | 03:14 | is actually already in this folder.
| | 03:17 | So this is the preloader for all the other
documents, and if you scroll down to the very
| | 03:20 | bottom, you see that this one
actually calls a lot of other files.
| | 03:24 | Essentially, the files that you see right
here at the same level as the HTML, are files
| | 03:29 | that Edge is going to need for displaying the
elements that you have drawn on its interface.
| | 03:35 | Preloading certain things, applying actions so
the things animate, and also have interactivity
| | 03:39 | built onto them, and then just some basic
JavaScript with some of the data for the files.
| | 03:45 | In the Edge includes, you'll find libraries
that Adobe Edge uses in all of its projects.
| | 03:50 | So if you're creating different projects,
you're probably going to need only these files.
| | 03:54 | You're not going to need to
resave all these other files.
| | 03:57 | For example, you can see jQuery is right here,
you're not going to need another copy of jQuery
| | 04:02 | for every Edge project that you create.
| | 04:04 | And there is a jQuery easing library, as well as a
JSON celebrity and the regular Edge library itself.
| | 04:11 | So the JavaScript files can
be divided into two sections.
| | 04:14 | Everything outside the Edge_includes folder
are scripts related to the current document,
| | 04:19 | files that change dramatically as we
edit and add interactivity to our document.
| | 04:24 | Everything inside the Edge_includes folder
is a standard library that's not going to
| | 04:28 | normally change unless a
new version of Edge releases.
| | 04:32 | If you're a web developer, you can usually
dig into some of the JavaScript code, and
| | 04:35 | if you're really careful, you can
edit it without blowing up the site.
| | 04:39 | There's also an images folder which right now
has the only image that we have on the document.
| | 04:43 | That's why I wanted to import something just to
show you that any images will show up right here.
| | 04:48 | So that's kind of nice, Edge is actually organizing
things for you and placing things where they belong.
| | 04:53 | If you would have made a poster for non-HTML5
browsers, that would also be in the images folder.
| | 04:59 | So since this is a regular HTML document,
you can actually preview it in a browser.
| | 05:03 | So let's go ahead and hide this BBEdit window,
and I'll just grab this HTML file, and
| | 05:09 | there's our Roux Academy Conference site.
| | 05:11 | I didn't tell the Stage to hide Overflow,
so it's showing everything, including the
| | 05:15 | Overflow outside the Stage.
| | 05:18 | But as we could see, it's
a regular HTML document.
| | 05:20 | If it had animation, it
would show us the animation.
| | 05:23 | So let me go back onto Edge and show you how
you preview a document without publishing it.
| | 05:28 | Previewing is really easy.
| | 05:29 | All you have to do is hit Command+Return or
Ctrl+Enter, and you can do a quick preview
| | 05:35 | of what your Edge file is
looking like at the moment.
| | 05:37 | So if you wanted to fix some of this overflow
that we're having here, we'll go back to the
| | 05:42 | Stage, make sure that this Overflow is hidden,
and I'm going to hit Command+Return, and now
| | 05:47 | the overflow is hidden.
| | 05:48 | This is a really quick way, it kind of
reminds you of the way Flash deals with files.
| | 05:52 | Command+Return does a quick
preview on your current browser.
| | 05:56 | Now if you want to just preview things in
Edge itself, you can use this little player
| | 06:00 | right here to Rewind, Play, and Fast-Forward.
| | 06:03 | Right now, we don't really have an
animation, so you can't see any of that happening.
| | 06:07 | If you're ready to place your animation on
the Web, you might be tempted to just copy
| | 06:12 | all the files that we looked at in our folder
already, but it's actually best to publish them.
| | 06:16 | One of the things that publishing does is
minify the JavaScript files, so they'll be smaller.
| | 06:21 | There are also some additional options for
publishing that you might be interested in checking out.
| | 06:26 | So if we go to the File menu, we can select Publish
Settings and take a look at some of these options.
| | 06:31 | You could see that you can save the files
for InDesign just click on these little check
| | 06:36 | boxes, as well as iBooks
Author compatible files for OS X.
| | 06:41 | I'll click those off, because I'm
interested right now in just the Web files.
| | 06:44 | So if you click on that, you'll see that
there is an option for the Target Directory.
| | 06:48 | So if you don't like the folders that Edge
creates when it publishes the files, then
| | 06:54 | you can change the location of where it publishes
by clicking on this Target Directory icon right here.
| | 06:59 | If you want Edge to try to create files
that are compatible with IE6, IE7, and IE8, you
| | 07:04 | could click on this option.
| | 07:05 | This will create a version that
runs in the Chrome Frame Installer.
| | 07:09 | It's a way of running files in older browsers that
will actually prompt for an installation of a plug-in.
| | 07:16 | If users with these older browsers have
the plug-in, it will automatically work.
| | 07:20 | If they don't, then you might want to click
on this little popup menu and ask the user
| | 07:25 | to install a version of the Frame Installer.
| | 07:27 | Just click on whether you want an
IFrame Prompt or an Overlay Prompt.
| | 07:31 | If you don't care about IE6, IE7, and
IE8 compatibility, you can click that off.
| | 07:35 | You can also ask Edge to load the frameworks
like jQuery via a Content Delivery Network.
| | 07:41 | That will normally be faster,
so this is a good option.
| | 07:44 | A Content Delivery Network is a place on the Web where
the files for projects are automatically placed and loaded.
| | 07:52 | Since a lot of web sites are going to be
using these Content Delivery Networks, when your
| | 07:56 | application loads, the CDN version of say
something like jQuery, it will load a lot
| | 08:00 | quicker and probably be cached on your browser
from another site that uses the same library.
| | 08:06 | Finally, you can choose to
publish content as static HTML.
| | 08:10 | That improves search engine
optimization a little bit.
| | 08:12 | Let's go ahead and save this as it is
right now, and I'll publish it just to show you
| | 08:16 | a little bit of what the difference is.
| | 08:18 | I'm going to hit Publish here, and it
very quickly publishes the document.
| | 08:22 | And now when we go to the rouxacademy folder,
you'll see an additional publish folder.
| | 08:27 | If you click on that, you can see that there
is the web folder inside the publish folder,
| | 08:32 | and that has similar files to what we see
out here, Preload, the Actions, edge.js, the
| | 08:37 | edge_includes is right here.
| | 08:38 | So this is almost like a self--contained
version of the files that are outside here.
| | 08:44 | However, you can see that some of the
Edge files are a little bit smaller.
| | 08:47 | You can see that this one right now is 2K,
but the version that we have here is 1K where
| | 08:52 | the edgeActions are 563 bytes,
over here there are only 200 bytes.
| | 08:57 | So this is just minified JavaScript.
| | 08:59 | If we were to look at it with BBEdit, you would
see that it's pretty much all running together.
| | 09:04 | And that's what minifying does.
It just makes the files a little bit smaller.
| | 09:09 | Now if we take a look at this HTML document
in BBEdit, here's our publish folder and here's
| | 09:14 | our web folder, here's our HTML document.
| | 09:17 | So you could see that everything is really
just a single div with a style sheet right
| | 09:23 | here just a basic style that doesn't
display the element until it's loaded, and then a
| | 09:27 | simple call to our JavaScript preloader here.
| | 09:31 | Now let me go back to Edge and publish it
the other way, and I'll go to the File menu
| | 09:35 | and select Publish Settings, and
say Publish content as static HTML.
| | 09:39 | I hit Save, and I'm going to say Publish,
and that just takes a second, let me go ahead
| | 09:45 | and close this window here and reload this
HTML in BBEdit just to show you the difference.
| | 09:52 | So you can see here that in this version
of the HTML, you actually have a div for the
| | 09:58 | entire stage, you have a div for the text, and
this text is text that's actually in the presentation.
| | 10:04 | So in the previous version of this file, we
simply had a div with a call to a JavaScript.
| | 10:11 | In this version, we have every
element that is in Edge as a separate div.
| | 10:16 | Let me scoot this over.
| | 10:17 | So you can see that there is a Stage_Text
here and a RoundRectangle for this RoundRectangle
| | 10:23 | element and a Stage_art for this art element.
| | 10:27 | So every single div that we have in this document and
the text that's in here is also going to show in there.
| | 10:33 | That gives us a little bit better
structure for search engine optimization.
| | 10:37 | Any text that's in our layout in this
fashion will show up in the HTML page, which means
| | 10:43 | that search engines will be
able to see and catalog that text.
| | 10:46 | This is a little bit better option, but it
obviously will create bigger and more complicated files.
| | 10:51 | In addition to that, you have to watch out
that some of these elements are not going
| | 10:55 | to collide with some of
the elements on another page.
| | 10:58 | So if you have multiple Edge documents in the same
HTML page, some of these names might cause some problems.
| | 11:05 | So I would say that the single div with the
JavaScript link is a little bit safer, but
| | 11:10 | this is definitely a little
bit better for SEO purposes.
| | 11:13 | So saving, previewing, and publishing files
in Edge is not a traditional workflow, but
| | 11:18 | after working with the program for a
while, it will be easier to get used to.
| | Collapse this transcript |
|
|
2. Creating and Using AssetsDrawing in Edge| 00:00 | Because Edge is designed to draw and animate
HTML5 divs, Drawing tools are a little spares.
| | 00:06 | Edge really makes a lot more sense when you know
that you're manipulating objects with CSS 3 Properties.
| | 00:12 | So let's take a look at some
of the Drawing Options in Edge.
| | 00:14 | I'm going to Create New document and in this
document I'm going to just draw a rectangle.
| | 00:20 | Before I do that I want you to notice that
there is already an element on the screen,
| | 00:24 | and that element is the Stage, it's
a div, it's here down here as well.
| | 00:29 | If I create another element by clicking and dragging
a Rectangle, I'll create an element inside the Stage.
| | 00:34 | Everything in Edge goes inside this Stage div.
So the Stage is essentially the parent of all the elements.
| | 00:42 | I can rename an element by double-clicking
on it, and when I rename it, you'll notice
| | 00:49 | that Edge will correct any spaces or special
characters I make, so they are Standard HTML5
| | 00:55 | Compatible IDs for the Objects.
| | 00:59 | So I really have two tools in Edge,
but they're pretty much the same tool.
| | 01:03 | So I've the Rectangle tool, as
well as Rounded Rectangle tool.
| | 01:06 | If I click and drag on a Rounded Rectangle,
you can see that it gives me Round Edges.
| | 01:11 | So I'll go and modify the color of this one
to be something else, so let me make it sort
| | 01:17 | of a lighter kind of Mauve there, and a
Rounded Rectangle just have these round edges that
| | 01:24 | I can control over here down at the bottom
just can click and drag to make those Edges
| | 01:29 | a little bit more round.
| | 01:31 | In reality even though you have two Drawing
tools, the Rectangle and Rounded Rectangle
| | 01:34 | tool, they're pretty much the same tool.
| | 01:37 | Notice that if I click on this other rectangle,
I can also have a round edge by clicking and
| | 01:42 | dragging in the same area.
| | 01:44 | So even though you have two tools, they are
really pretty much the same tool, and it's
| | 01:48 | really just a div that has Round Edges in it.
| | 01:51 | So you can modify the location right here,
as well as the size of the objects that you
| | 01:56 | draw by clicking and dragging or double-
click and typing in a numeric value here.
| | 02:00 | You can control the Width and Height, and
if you click and drag, you'll notice that
| | 02:04 | these are linked together right now,
because I've this little Link icon.
| | 02:08 | If I click that off, then I can control
just the Width or just the Height separately.
| | 02:14 | Like with any CSS 3 object, I
can also control the Opacity.
| | 02:18 | So if I click on this, and I click and drag
this Opacity Option here, I can control the
| | 02:22 | Opacity of this Rectangle.
| | 02:24 | Just like with the Stage, you also have the
Option of making the overflow of an object
| | 02:28 | visible or invisible.
| | 02:30 | This is not going to make a lot of sense,
because there's no object inside other objects.
| | 02:34 | So what I can do is I can click on this, so
this is my Rectangle, the background rectangle,
| | 02:40 | this is the RoundRectangle here, I'll call
this pink, it's more Mauve, so I'll call it Mauve.
| | 02:44 | I can grab this Mauve RoundedRectangle
and place it inside my_Rectangle.
| | 02:50 | Now here you see that in the Elements panel my
_Rectangle is the parent of this Mauve thing.
| | 02:56 | Now my_Rectangle is set to show the overflow.
| | 03:00 | So I can modify that by clicking right here
and selecting hidden, and that will hide the
| | 03:05 | invisible part of my
RoundedRectangle, that's pretty cool.
| | 03:09 | This is kind of the Edge Version of grouping
things when you have an object inside another
| | 03:14 | object, they kind of tend
to move together like this.
| | 03:17 | Although you can still click on this Mauve object
and move it around from within the other object.
| | 03:22 | Like with any normal HTML document that has
CSS properties, you can also click to create
| | 03:27 | a solid border or a dashed border.
| | 03:30 | You can modify the Transform-Origin, and
that's the place where this object would rotate,
| | 03:35 | but it's really easier, you can click and drag
these if you want to see the center point moving over.
| | 03:40 | It's really a lot easier to do that
with the Transform tool right here.
| | 03:43 | So if you click on this, then you can click
and drag this origin to where you want, and
| | 03:47 | then when you rotate, it
will rotate around that edge.
| | 03:50 | You can do that here, but it's just much
easier to do it with this Transform tool.
| | 03:54 | Of course, you can rotate an object, again
just by clicking and dragging or by typing
| | 04:00 | in a numeric value right here.
| | 04:02 | You can also do things that you do with CSS 3,
like Skew Objects and Scale them in either
| | 04:08 | direction, right now the
scaling is linked together.
| | 04:11 | So I say scale up and down,
they are going to scale together.
| | 04:14 | You can also unlink them and change the
horizontal and vertical scale differently here.
| | 04:19 | Now the cursor is kind of interesting, the
cursor is what happens when someone moves
| | 04:23 | the pointer on top of one of these objects.
| | 04:26 | So I'll click on the Mauve Object here, and
I'll click on--right now the cursor is set to auto.
| | 04:32 | If I preview this document, I am hitting Command+
Return, see that these are divs and right now it's
| | 04:37 | just using the standard pointer.
| | 04:39 | I can see the Selection tool, if I try to
click and drag, because these are just like
| | 04:43 | normal divs in a document.
| | 04:45 | So I am going to close that and what I'll
do is I'll choose the cursor to be something
| | 04:51 | else like the pointer on this Mauve Object.
| | 04:53 | And when I preview it, you can see that when the mouse
moves over that div, I get the little pointer cursor.
| | 05:00 | Now when I go to the edge here, it's not going
to notice that this is a rounded edge rectangle,
| | 05:05 | because as far as the HTML is
concerned, this is still kind of a rectangle.
| | 05:08 | So even when I'm right here, it's
going to show me that little icon.
| | 05:11 | So let me go back into Edge.
| | 05:13 | Now something interesting about Edge is
that hiding an element doesn't exactly hide it
| | 05:18 | in the actual final documents.
| | 05:20 | If the click to hide this, and I preview my
document, I still see the RoundedRectangle.
| | 05:25 | It's just a way of previewing or hiding it
from this preview, but it still showing up
| | 05:30 | in the final Edge document.
Same thing with locking elements.
| | 05:34 | If I lock an element by clicking right here
or down here, I can still move the elements
| | 05:41 | that are inside other elements, so it's not
locking it forever, it is just really locking
| | 05:44 | it from within the position inside this
div, so that's also interesting to note.
| | 05:51 | So the final couple of things that you can
control, and you saw me do it a little bit
| | 05:54 | here is the roundness of the objects.
| | 05:58 | So you can control the
roundness in three different ways.
| | 06:01 | You control the roundness of the entire
document, so if I click on this it will control the
| | 06:06 | roundness of everything, including making this
into a circle by going all the way as far as I can go.
| | 06:12 | You can also go and control
each individual edge separately.
| | 06:16 | So I can control each one of these
edges by clicking and dragging them.
| | 06:19 | There is also a little handle right here,
you can click and drag that if you want to.
| | 06:23 | I can do the same thing for some of
these other ones, so click and drag.
| | 06:28 | I can turn some of these off, so if I turn
this off, it'll go back to being a rectangle.
| | 06:32 | Turn that one off, it'll also
be back to being a rectangle.
| | 06:35 | And I can move this one in if I want to, or
I can hit this 8 button that will allow me
| | 06:39 | to move each one of these points that
generates the roundness of the rectangle individually.
| | 06:45 | So now I can click and drag these to
make kind of more of an oval shape.
| | 06:49 | Finally, you see this clip area right here,
clipping allows you to control sort of a Rectangular
| | 06:55 | clip of an element, it's
kind of here at the bottom.
| | 06:58 | So if I click and drag you'll see
that it will start clipping my object.
| | 07:01 | But it's only really clipping in a
rectangular manner is it's not really like a complicated
| | 07:05 | clipping tool, it is just doing
a rectangular clip on an object.
| | 07:10 | Notice the little diamonds
next to each of these elements.
| | 07:13 | Everything with a diamond in Adobe Edge is
something that you can create a keyframe for,
| | 07:17 | which means it's something that you can animate.
| | 07:20 | So Edge is a lot more fun to use if you've
worked with CSS3 features before, because
| | 07:24 | everything you do in Edge relates to CSS 3
Properties, like Rotations, Skew Transform-Origins,
| | 07:31 | all those things are CSS3 constructs.
| | 07:33 | It's actually a lot of fun to be able to
control those properties with Edge, because it finally
| | 07:37 | visualizes something that
most people do with code.
| | Collapse this transcript |
| Working with text| 00:00 | Working with text in Edge is pretty
easy because there aren't a lot of options.
| | 00:05 | Text is also one of the areas that's
probably the buggiest in this prerelease version.
| | 00:09 | It sort of does remind you that this is not
exactly what the program is going to be when it's
| | 00:14 | finished, and that this is a prerelease version.
| | 00:16 | So let's find out how to work with text in
Edge, and I'll show a couple of the little
| | 00:20 | issues that I've seen with
the current prerelease version.
| | 00:23 | So I am going to go over here and Create a
New File and in this file I'll click right
| | 00:27 | here on the Text tool, and
I'll click somewhere on the stage.
| | 00:30 | As soon as I do that I can start typing text.
| | 00:33 | This is an intermediary textbox here, so let
me type in Roux Academy and notice that this
| | 00:38 | is not really what the
text is going to look like.
| | 00:41 | It's a textbox to type in the
text that appears on my stage.
| | 00:45 | When I hit Return I can
see the text on the stage.
| | 00:48 | So here I've some options.
| | 00:50 | The first option in the Properties
panel is to change the ID of this text.
| | 00:54 | So this is just what the div is going to be
called for right now, so I can change this
| | 00:58 | to be RouxText, I'll hit Enter.
| | 01:01 | And unlike Rectangles and Rounded
Rectangles with text I can change the selector that I
| | 01:06 | use for these different elements.
| | 01:09 | So for text I can choose to use a Paragraph
selector, an h1 selector or these other selectors.
| | 01:16 | So if I made my textbox bigger or smaller
notice that my text is not wrapping properly.
| | 01:21 | Now that's a little bug in Edge.
| | 01:23 | If you temporarily switch it to something
else like a paragraph tag you'll see that
| | 01:27 | it's not wrapping properly, and if you bring
it back to a div it will still work properly,
| | 01:32 | but when you first type in the
text it's not behaving like it should.
| | 01:35 | So that's a little tiny bug I found in the
interface for right now, it's really no big deal.
| | 01:40 | Now you can also change the Location of the
text, the X and Y Position just like you would
| | 01:44 | any other element as well as the Size, this will
be the size of the box, not the size of the text.
| | 01:50 | And you can unlink the Size and change the size for
the Horizontal and Vertical dimensions separately.
| | 01:56 | Of course, your Opacity works just fine
and over here you can choose the Font Style.
| | 02:00 | I like that when you roll over these
different properties, it's actually showing you the
| | 02:05 | code that you type in CSS
to change these properties.
| | 02:08 | So if you go say over the Pixel Size or the
Font Size you could see that it's going to
| | 02:12 | change the Style to be Font Size
24 pixels, that's kind of cool.
| | 02:16 | So here I can change the font to something else, and
this is exactly how you would do it in CSS as well.
| | 02:21 | You would type in the font as well as some
fallbacks so I could switch it to Arial Black,
| | 02:27 | and that's looks pretty good.
| | 02:28 | Of course, I can also change the Point
Size, and we'll make that bigger or smaller.
| | 02:33 | I can change the type of measurement system I
used to ems, and sometimes this gets a little
| | 02:38 | weird when I switch it ems.
| | 02:40 | Notice that it switch back to 25 pixels,
this is a little problem in the program.
| | 02:45 | So now the pixel amount doesn't exactly work
well, notice that I'm clicking and dragging,
| | 02:50 | and it's going very slowly through the
Measurement Systems, and it never lets me get back into
| | 02:56 | ems, and that is a little bug in the program.
| | 02:59 | If I go ahead and close this, so
I'm going to go ahead and FileClose.
| | 03:03 | I'm not going to save it, and
I'm going to create a New document.
| | 03:08 | I'll type in Roux Academy.
| | 03:10 | Notice that it is still messed up so
this is still not working properly.
| | 03:14 | The only way to currently fix that for me
is to go ahead and quit the program, so you
| | 03:19 | might have to do that occasionally.
| | 03:21 | So I'm going to quit Edge and restart it.
Create a New File, and I'll type in Roux Academy,
| | 03:32 | and now I can switch to ems,
and now it's working properly.
| | 03:36 | So you got to be really careful with text,
it's probably one of the things that's needs
| | 03:40 | a little more work in Edge.
| | 03:42 | So of course, I can the Font Color right
here and the text, either the font-weight here
| | 03:49 | to make it Bolder or the font-style here to
make it Italics or the text-decoration, so
| | 03:56 | makes it look underline.
| | 03:58 | If you click on these Alignment buttons,
you'll see that nothing is happening, that's because
| | 04:02 | my textbox by default is
the width of my element.
| | 04:06 | So if I want to see the Alignment I have to
make this bigger, and then click on Center
| | 04:10 | and Right align, so just watch out for that.
| | 04:14 | Transform Origin, you can change right here
just the location of the registration around
| | 04:19 | which things rotate.
| | 04:20 | It's always easier to just click on the
Transform tool and just reposition this registration
| | 04:26 | point by clicking and dragging it where you
want it, and then you can rotate around that point.
| | 04:31 | Of course, you can rotate right here as well
by typing in a value, and I like being able
| | 04:36 | to type in values manually.
| | 04:38 | You can also Skew the text to try to get some
maybe 3D Effects and let me try kind of link this.
| | 04:47 | And I can unlink these if I want to scale
couple of different ways, so sort of kind
| | 04:53 | of a 3D Effect I guess.
| | 04:56 | That works really well.
I can also change the Cursor.
| | 04:59 | So if I preview this you'll notice that the Cursor
by default will be this Regular Text Selection tool.
| | 05:05 | If I want it to be something other than that,
I can click on this Cursor area and switch
| | 05:10 | it to something else, like a Pointer, and that
might be better for making something clickable.
| | 05:16 | So now when I roll over the text
it becomes a little hand pointer.
| | 05:19 | You can still select the text, it gives you a
different tool right here for the way the cursor looks.
| | 05:24 | So I'll close that come back here.
| | 05:27 | And finally, I also have a
Clipping Path that I can use.
| | 05:29 | This is a Clipping Path that clips the text
in a rectangular manner, and adjust this one.
| | 05:38 | When I do that it sort of locks the size of
the text a little bit, so now when I click and
| | 05:43 | drag on these edges I am resizing the text
almost as if I was working with this Transform tool.
| | 05:49 | If I want to change the Font Size, it still works
within the box itself, but it sort of a little odd so.
| | 05:56 | Now I'd like to see some
other things happen with text.
| | 05:59 | Notice that there's no line height.
| | 06:01 | So if I've text on top of one another I can
really control the line height between them.
| | 06:06 | So oops! Let me type in Roux Academy,
and I'll make this box kind of like this.
| | 06:13 | It looks like I'm on the Clipping Path
tool right now, so I don't want to be there.
| | 06:17 | Let's try Pointer tool.
| | 06:20 | It's not stacking this properly, so I'll switch
over to Paragraph really quick, and then bring it back.
| | 06:26 | So you notice I can't really control the spacing
between the two lines, which is a little unfortunate.
| | 06:31 | Text seems like it has a way to go in Edge.
| | 06:34 | Some things aren't working properly yet, and
I'd like to see line height and other adjustments
| | 06:38 | for better typography using Edge.
| | Collapse this transcript |
| Using custom fonts| 00:00 | A really cool feature in Edge is the ability to use
custom fonts by adding the font into the Edge library.
| | 00:06 | You can use fonts from services like
Google Web Fonts. So let's take a look.
| | 00:10 | I am going to create a new document by
clicking on this Create New link, and then I'll click
| | 00:14 | on this Text tool, click on
the Stage, and type-in some text.
| | 00:18 | I can choose fonts from a
couple of different places.
| | 00:21 | I can go over here to this pop-up list, and
add a new font by clicking on this Add Font
| | 00:26 | link, and add a new font by
clicking on this Add Font option.
| | 00:30 | This takes me to this dialog box.
| | 00:31 | I can do the same thing by going to the library, and
clicking on this Plus (+) sign, takes me to the same place.
| | 00:36 | Here, I need to type-in the name of the font
that I want to add as well as some fallbacks
| | 00:41 | just in case the user cannot see the fonts at
the moment, he might be offline, for example,
| | 00:46 | and then some embed code
that the web site will provide.
| | 00:49 | So, I'm going to switch over into Safari, and you
can find fonts by going to google.com/web fonts.
| | 00:56 | Google has a number of fonts,
there is about 500 families right now.
| | 01:00 | And you can search by different categories
like Serif, Sans-Serif, Display or Handwriting,
| | 01:04 | or you can look by
specific features like Thickness.
| | 01:08 | So, I'll click on that
and find some thicker fonts.
| | 01:11 | I like this Russo One font.
| | 01:13 | So I am going to add that to my collection
by clicking on this blue button right there.
| | 01:18 | Once I got a font in my collection, then I
can click on this Use button which will take
| | 01:22 | me to the font styles.
| | 01:24 | Sometimes fonts have multiple styles, so you
can click on and off the styles that you want,
| | 01:28 | the more styles you load, the bigger the
page will be and the slower the page load.
| | 01:33 | So, I want to scroll down and go to this Add
this code to your web site section and just
| | 01:38 | select that, copy it, switch back to Edge,
and paste that in the Embed Code section.
| | 01:44 | Now, over here, I want to
type-in the name of the font.
| | 01:47 | If the name of the font has a space as in
Russo One, I want to make sure that I type
| | 01:51 | the name in quotes, so "Russo One".
| | 01:56 | So, I want to click on this pop-up menu
and just select some different fallbacks just
| | 02:00 | in case the user can't see
the font that I've chosen.
| | 02:03 | So, I'll do Arial Black,
Helvetica, and sans-serif.
| | 02:07 | So now, I can click on this Add Font button
right here, and it adds it to our library,
| | 02:13 | and it also adds it to our pop-up list.
Here it is at the very top.
| | 02:15 | So, I'll choose that, and you can see that font
that I brought in from Google shows up just fine.
| | 02:21 | Now, there is a way to
also add fonts from Typekit.
| | 02:24 | But as of this video, it's a little bit
buggy, and it doesn't work consistently.
| | 02:29 | Working with fonts is easier
right now if you use Google Web Fonts.
| | 02:32 | I like a lot of the
fonts available from Typekit.
| | 02:35 | But integrating them into Edge is
a little bit troublesome right now.
| | 02:38 | So, I look forward to some better font
integration in a future release of this application.
| | Collapse this transcript |
| Working with imported assets| 00:00 | As of this release, Edge doesn't
offer comprehensive drawing tools.
| | 00:05 | It does however let you import
graphics in GIF, JPEG, PNG, and SVG formats.
| | 00:11 | So let's take a look at how
Edge deals with external art.
| | 00:13 | So first, I'm going to create a new document,
and then I'm going to switch over to Illustrator
| | 00:17 | to show you this artwork
that I want to bring into Edge.
| | 00:20 | So normally the quickest way to move
graphics between programs is to just copy and paste,
| | 00:25 | but Edge doesn't yet have
solid support for copy-paste.
| | 00:28 | So to get graphics into Edge, you'll
need to use some other software and export.
| | 00:32 | So usually to export files from Illustrator for the
Web, you go to the File menu and select Save for Web.
| | 00:38 | Now this is going to allow you to save in a number
of different formats, including GIF, JPEG, and PNG.
| | 00:44 | It's not going to let you save an SVG,
we'll cover that in just a minute.
| | 00:48 | So GIF is an older format for online graphics.
| | 00:51 | It has 1-bit transparency and, like some of the
other formats, it can have built-in animation.
| | 00:57 | And for that reason, Edge uses
GIF graphics for its preloaders.
| | 01:01 | It builds pretty small files, but the quality
is always poor since it only supports 256 colors.
| | 01:07 | You can see some of the problems here with
the banding and also the disappearance of
| | 01:10 | out of the Space Needle as well as the
fact that only one color is transparent.
| | 01:16 | I have Transparency on right here, and because I have
that on, one of the colors in the image becomes transparent.
| | 01:22 | However, it doesn't let you see through any of these
other colors right here, which is what we really want.
| | 01:27 | So if we switch it over to JPEG, JPEG is
a bitmap graphic format for photographs.
| | 01:32 | It has no transparency options.
| | 01:34 | If you need to import a graphic into Edge with
transparency, you're going to need to use PNG or SVG.
| | 01:40 | Although you can use GIF files with
transparency, because it only allows you to use one color
| | 01:45 | as a transparent color,
it's not a very good option.
| | 01:48 | JPEG is a lossy format, so changes are made to
the original image to get better compression.
| | 01:53 | You can see some of the problems with little bit
of the artifacts that appear with JPEG files now.
| | 01:58 | I've exaggerated this quite a
bit by setting the Quality to 0.
| | 02:01 | If we went all the way to 100, you wouldn't see a lot
of that except that the file size will be pretty big.
| | 02:07 | So usually you change the Quality to some other
level, and that does add a little bit of the artifacts.
| | 02:12 | So JPEG is a better format for photos
and not artwork with a lot of colors.
| | 02:17 | So let's switch over to PNG
and see some of the options.
| | 02:19 | You see we have PNG-8 and PNG-24.
| | 02:22 | PNG-24 is better for
images with some transparency.
| | 02:26 | So you can see here we have a very nice blend
into the background because it has 8-bit transparency
| | 02:32 | which looks really great.
| | 02:34 | We're getting this nice blend right here of
the Space Needle with this color background.
| | 02:38 | And everything looks great, so PNG is
going to be the format that you want to use for
| | 02:42 | artwork with a few colors.
| | 02:44 | If you're using photographs, you usually use JPEG.
So let's go ahead and hit Done.
| | 02:49 | I'll show you the SVG export options which you
can't find in the Save for Web option under File.
| | 02:55 | You have to go to Save As.
| | 02:57 | You would think it's export,
but it's actually Save As.
| | 02:59 | Let's check that out.
| | 03:01 | So here, we can choose the
Format from this pop-up menu.
| | 03:04 | Usually, it's Adobe Illustrator, but you want to pick
this second SVG format, not this SVG Compressed format.
| | 03:11 | And from here you want to hit the Save--I'm just going
to put it on the Desktop--and you'll get these options.
| | 03:16 | You will want to keep it at SVG 1.1
and the defaults are pretty much fine.
| | 03:21 | So I'm going to hit OK, and it
will save that graphic to the Desktop.
| | 03:25 | So now I'm going to go back into Edge, and
I've already saved all those files in the
| | 03:30 | different graphic format, so I want to bring
them into Edge and show you what they look like.
| | 03:34 | The easiest way to bring graphics into
Edge is just by dragging and dropping them, so
| | 03:38 | let me go ahead and add actually the GIF file
format first, and I'll just drag it over there.
| | 03:42 | As soon as I bring that over,
it adds it into the library.
| | 03:46 | Now this image has a little bit of transparency,
but I can't see that because my background is white right now.
| | 03:51 | So I'll change the color of the background--
I'll just click on the background, and then
| | 03:54 | click right here--and I'll make
it something kind of blue and dark.
| | 03:59 | So you could see here if I select the image
that part of this image is actually transparent,
| | 04:03 | but it's not particularly useful transparency.
| | 04:06 | So I'm going to scoot that over and put it on the
side so we can see how the other formats compare.
| | 04:11 | So we'll bring in the JPEG
file next. Just drag it over.
| | 04:14 | You can also go to the
File menu and select Import.
| | 04:17 | It does the same thing.
And I'll make that smaller.
| | 04:20 | You can see that the JPEG format has no
transparency, and there's a little bit of the artifacts
| | 04:25 | and banding that you expect
when you use the JPEG format.
| | 04:28 | So I'll make these about that big, and then
we can drag them together, try to fit them
| | 04:34 | as best as can side by side there.
| | 04:36 | Okay, so let's bring in the PNG
format. So just drag it in there.
| | 04:41 | You can see the transparency looks beautiful.
Quality of the image is really good.
| | 04:46 | So this type of image just lends
itself really well to using a PNG format.
| | 04:51 | Now let's see what happens when you bring in the
SVG format and compare it to other formats as well.
| | 04:58 | So I'll drag that in and notice it's
also adding them all to the assets.
| | 05:02 | So it looks really just
as good as the PNG format.
| | 05:06 | The one difference is that this is a vector
graphic, so vector graphics are theoretically
| | 05:11 | scalable to any size as long as the original
images in the vector graphics were made with
| | 05:17 | vectors, which these were.
| | 05:18 | However, Edge has a little
bit of a problem with SVG files.
| | 05:22 | If you scale an SVG file up, it's
actually going to show a little blurry.
| | 05:26 | You could see that right there,
let me make it a little bigger.
| | 05:28 | You could see that it's not as smooth, and
it's looking a little bit blurry as if it
| | 05:33 | were a low-resolution.
| | 05:34 | Now that shouldn't be happening because
that file consists of vector graphics.
| | 05:39 | So it's a problem with Edge.
| | 05:40 | I think it's something that they're
going to fix in one of the next releases.
| | 05:44 | So for the time being, if you want to bring
in a graphic, make sure you bring it in bigger
| | 05:48 | than what you need it. So that if you scale it
down, you can get it looking good at any size.
| | 05:53 | So let me go ahead and scale this down.
And now let's go ahead and save this file.
| | 05:57 | So I'm going to go to the
File menu and select Save As.
| | 06:00 | I'm going to click on Desktop, and I want to
always make a folder when I'm saving things
| | 06:05 | in Edge because Edge will generate about
ten different files and folders and so I don't
| | 06:10 | really want to put them on the Desktop.
| | 06:12 | I want to first go ahead and create a New
Folder here, I'll call it import, Create,
| | 06:17 | and then I'll call my file index
.html, and then I'll hit Save.
| | 06:21 | So now that creates a
bunch of stuff in our folder.
| | 06:25 | Notice that when you import images into the
library, Edge places them in an images folder
| | 06:30 | and all the files that we
imported into Edge are right there.
| | 06:33 | This is actually really cool because you
never have to worry about making sure that these
| | 06:38 | files are somewhere in a specific folder.
| | 06:41 | Edge is going to automatically grab all the
originals and put them all in the images folder for you.
| | 06:47 | So you don't have to worry about
missing links and stuff like that.
| | 06:50 | So let's go ahead and publish this so we
could see what it looks like when we're published.
| | 06:55 | So Publish, and we'll go to the import folder
that we created and here's the publish folder.
| | 07:01 | If we open that up, there's the web folder,
and you'll see just the copy of all the files.
| | 07:06 | Our images folder is right here as well and
all of our images look really good and are
| | 07:13 | in the right place.
| | 07:15 | Now once you have an asset in the library, you can
drag an additional copy of that asset onto the stage.
| | 07:21 | So if I want another copy of my buildings
that are PNG, I can just drag another copy
| | 07:26 | from the library and have a clean
new copy that I can do stuff with.
| | 07:30 | This is also pretty interesting, under
Properties, you can determine whether an imported image
| | 07:36 | appears as a div or an image.
| | 07:39 | So it's just the way that
it's going to write the HTML.
| | 07:41 | It's either going to create this as a
div with a background or an image tag.
| | 07:46 | So you can delete assets from the stage by
just clicking, and then hitting the Delete button.
| | 07:52 | That retains the graphic in the Assets folder.
| | 07:55 | So even though I delete the GIF document from
here, you can see that it's still right there.
| | 08:00 | You can swap the version of the assets that's
been used by an element on the stage pretty easily.
| | 08:06 | So if I wanted to switch this asset from
using the JPEG file to using the PNG file, I can
| | 08:11 | click on that asset, and then click on
this little icon right here and switch it to a
| | 08:15 | different version of the asset.
| | 08:16 | So I'll switch it over to the SVG, and
then I'll just click somewhere else, you could
| | 08:20 | see that it applied the SVG
graphic onto this element as well.
| | 08:23 | So I can switch all of my graphics
to another format pretty quickly.
| | 08:28 | Now you can also copy and
paste between documents.
| | 08:31 | This is a new feature in this release.
| | 08:33 | So to get to another document is a little
weird because you're probably used to the
| | 08:37 | tabbed interface, additional
files appearing as different tabs.
| | 08:40 | Edge doesn't do that.
| | 08:42 | If we create a new document, the document
sort of takes over the tab right here, but
| | 08:47 | there is a pop-up menu where
you can switch to another file.
| | 08:51 | And as you keep on opening files,
you'll just see them in this list right here.
| | 08:55 | So I'm going to switch over to this and
notice that I can grab this file, I'll copy it, and
| | 09:01 | switch back to the new document, and I can
hit Paste, and it brings in the graphic into
| | 09:05 | the Assets folder as well.
| | 09:07 | I don't really mind that Edge doesn't offer
drawing tools, I'm really comfortable drawing
| | 09:11 | things in Illustrator or Fireworks, so I
don't really miss being able to draw in Edge at all.
| | Collapse this transcript |
|
|
3. Animating with EdgeUnderstanding Edge animation| 00:00 | Experience with other timeline programs is
really useful when working with Edge animations.
| | 00:05 | However, animating within Edge means you
will be working in JavaScript time, moving DOM
| | 00:10 | or Document Object model elements.
| | 00:13 | You'll also be introduced to a new way of animating elements
with something called the Pin. So let's take a look.
| | 00:18 | So, when working with Edge, it's always useful
to remember that Edge is an online animation tool.
| | 00:24 | The way you do things in Edge is tied to
the way you do things with CSS and JavaScript.
| | 00:28 | A good example of that is animation.
| | 00:31 | Edge doesn't use frames as its unit of measure
like Flash, it uses milliseconds because that's
| | 00:37 | how CSS and JavaScript work.
| | 00:39 | So, the timeline
measures things in milliseconds.
| | 00:41 | If you click on this right here which is the
playhead, and you move it around, you'll see
| | 00:45 | that you're moving in units of
measure that are in thousandth of a second.
| | 00:50 | So, I can scoot this round and
over here, we are moving to 00:01:000.
| | 00:54 | So, anything in Edge is done in milliseconds,
much like what happens in CSS and JavaScript.
| | 01:01 | The elements you move on the stage are divs or
other selectors that get animated and layered
| | 01:07 | according to the structure of an HTML page.
The structure lives in the Elements panel.
| | 01:12 | So, you could see that I can turn the
box that's behind that text on or off.
| | 01:16 | If I move this to the top of the title,
you'll see that now the box is on top of the title.
| | 01:22 | I can also do things like move the title inside the box,
so they're kind of grouped together and move together.
| | 01:28 | So, you could see that there's now a
hierarchy right here, and that's what would happen
| | 01:32 | if you were creating an HTML document.
| | 01:34 | Now, one of the things that you do have to
watch out for is when you click and drag things,
| | 01:38 | you have to make sure that if this is an element
inside another element, that you're choosing the right item.
| | 01:43 | So, take a look at the Timeline here.
I have right now selected just the title.
| | 01:48 | So if I click and drag, I'll move just that.
| | 01:50 | If I click on the box, I can move the box with
the title because the title is inside the box.
| | 01:56 | You could do selections within the Timeline like
this or do selections within the Elements panel.
| | 02:01 | You can also select things directly on the
Stage, but sometimes that's a little bit tricky,
| | 02:05 | because you don't know whether you're
clicking on the title or the background.
| | 02:09 | So, I just clicked on the screen here, and
it actually selected the title, not the box.
| | 02:13 | So just watch out for that.
| | 02:14 | In that case, I would just click on this box to
make sure I'm moving these two elements together.
| | 02:18 | So, as I said before like with other
animation tools, Edge lets you use keyframes and time
| | 02:24 | to control how an animation works.
But Edge introduces a revolutionary workflow.
| | 02:29 | It can be tough to understand at
first, but makes animating super fast.
| | 02:34 | Central to animating within
Edge is the concept of the Pin.
| | 02:37 | Traditionally, when you want to animate an
object, you specify the beginning and ending
| | 02:42 | point of the animation and ask software to
draw the steps in between the two points.
| | 02:46 | The Pin allows you to create entire
sequences with just a couple of steps.
| | 02:50 | You can activate the Pin in a number of ways,
you can double-click on the playhead, that
| | 02:55 | brings you this tiny little
icon, that's blue right here.
| | 02:57 | You can also see that you get this
additional time measurement right here.
| | 03:02 | And as you move the Timeline, you'll see that
this measurement also tells you the difference
| | 03:06 | between the Timeline or
the playhead and the Pin.
| | 03:09 | The Pin is also an icon on this panel,
so you can toggle it on and off like this.
| | 03:13 | Finally, you can also hit the
shortcut which is the P key.
| | 03:16 | So, if we hit P, it will unpin the Timeline.
| | 03:19 | Now, what's kind of strange about the Pin
and the Timeline is that they're not tied
| | 03:23 | to any object on the stage.
| | 03:24 | So, if I have an object selected like this box,
I can set the beginning and ending position
| | 03:29 | of the animation by double-clicking and moving
the playhead to the left or the right of the Pin.
| | 03:36 | That doesn't mean that I am doing
anything or setting an animation for this object.
| | 03:40 | I can simply click on another
object if I want to animate it.
| | 03:43 | It's just setting the beginning
and ending points of my animation.
| | 03:46 | So, once you've pinned the playhead, you tell
Edge that you want to animate something whose
| | 03:51 | position will be pinned at this marker.
| | 03:53 | You then move the playhead to another
position to establish what's going to happen before
| | 03:58 | or after this Pin position.
| | 04:00 | So, if I want to create an animation that
makes this text with the background slide
| | 04:05 | in from the left, what I am going to do is click
on the playhead, and drag it to the left of the Pin.
| | 04:10 | This position is the Pin position, and it
looks like I need to make sure that I'm on
| | 04:14 | the box, not on the title.
I really have to watch out for that.
| | 04:18 | So now I am going to click and drag the box
and title to the left, and now I've created
| | 04:22 | an animation in just a few steps that goes
from the left to the right of the screen.
| | 04:27 | Let's move the playhead.
| | 04:28 | I'll double-click on the Pin to unpin the
current playhead and scoot over to the right-hand
| | 04:32 | side, and now I am going to make an
exit animation for this right here.
| | 04:35 | So, it's just going to go to the right.
| | 04:36 | So, what I'll do is I will double-click on
this to pin the playhead again, and I've pinned
| | 04:41 | this position, so I can say, I will move the
playhead away from the pin position, and then
| | 04:47 | I'll move this object to the right.
| | 04:48 | So, what that does is it locks in the
beginning position, and since I move the playhead to
| | 04:54 | the right, it's going to
animate to that right position.
| | 04:57 | So very quickly I created an entry
animation and an exit animation by creating the Pin.
| | 05:02 | The Pin is independent of this animation,
so notice, I can move this pin around if I
| | 05:05 | want to, and use it to animate something else.
| | 05:08 | So, if you're animating a bunch of objects,
this is a really quick way of getting things done.
| | 05:13 | So, the concept of pinning things is really
powerful, but it does take a while to get used to.
| | 05:18 | So make sure you practice
animating with the Pin a little bit.
| | 05:21 | Once you get used to it, other methods of animating
keyframes might begin to seem a little antiquated.
| | Collapse this transcript |
| Working with keyframes| 00:00 | Once you've got the concept of pinning down, its
time to talk about some other ways Edge animations work.
| | 00:06 | We'll focus on different ways to create
keyframe based animation, so let's check it out.
| | 00:11 | Although the pin is a slick way to create
animation tweens, it's not the only way.
| | 00:15 | You can animate any attribute that's
available through the Properties panel.
| | 00:18 | So here is our animation sequence, I'm
going to come over here and create a little bit
| | 00:23 | of an Opacity tween by using keyframes manually.
| | 00:25 | So I'm going to position my playhead right
here, and I'm going to click on this Box to
| | 00:29 | make sure I select the box
that has these two elements.
| | 00:32 | And I will make this Opacity right here 0.
| | 00:37 | And that create a keyframe right there
that's the Opacity for that position.
| | 00:41 | I'll move the playhead over here, and then I
will click on this little diamond to create
| | 00:45 | another keyframe, move the Opacity to 100.
| | 00:48 | So now I've created a sequence by using
keyframes that let's you see the box moving as well
| | 00:53 | as changing Opacity.
| | 00:55 | So let's add another keyframe for rotation, so we'll
make the words actually rotate into position as well.
| | 01:01 | So I'll come over here, and I will click on
this Rotate diamond on the Properties panel
| | 01:06 | to create a keyframe right there,
you could see it appear down here.
| | 01:09 | And then at some other position say like
right there, if the property is already down here,
| | 01:14 | you can create another
keyframe by clicking right there.
| | 01:17 | And so here I will change the Rotation to 720.
| | 01:20 | That should make it rotate a
few times, looks like I messed up.
| | 01:24 | You can always double-click here and
just type in 720, and that fixes it.
| | 01:28 | So if I move that you could see that it
rotates into position until this point, and then it
| | 01:33 | kinds of slides into place.
| | 01:35 | So you could move that rotation around by
clicking and dragging this, so now it'll slide
| | 01:39 | in first, and then it will rotate into
position towards the end, so that's pretty cool.
| | 01:44 | And it's still a good way of doing
animations, there is nothing wrong with keyframes.
| | 01:48 | So another way to animate
elements is through instant transitions.
| | 01:52 | Can turn this icon on and create
transitions that don't have tweens.
| | 01:57 | Let's say that we want it to blink the Roux
Conference element, so we want to blink this
| | 02:02 | box and just give it a different color.
| | 02:04 | We don't want it to be a blink that fades in
and out, we just want it to be an instantaneous
| | 02:08 | change to a different color.
| | 02:09 | So you do that by turning this on, and then
creating some keyframes for some type of change.
| | 02:15 | So I'll do that on this background color,
I'll create a keyframe right there that will
| | 02:20 | be a background color change just to
lock the original background color.
| | 02:23 | And then I'll move to another position, I'll
create another keyframe, and then I'll come
| | 02:27 | over here, and I'll change
the color to something else.
| | 02:31 | And you can see that now as I scrub my Timeline,
the background color is that blue, and then
| | 02:37 | when it gets to this point it
switches to another color immediately.
| | 02:41 | There is no tween right here,
so it's an instantaneous change.
| | 02:44 | If I wanted to just do a blink, I am going
to go ahead and undo that a few times and
| | 02:49 | what I could do is also create my keyframes
all at once, so I'll create a keyframe there
| | 02:54 | and another one here, and then I'll just
scroll back into this position and change the color
| | 02:59 | to whatever else I want.
| | 03:01 | Now I have instant
transitions from here to here to here.
| | 03:04 | So you can always move those little points
around to make that little blink happen a
| | 03:08 | lot quicker and just hit the Spacebar to
see how that blink is working right now.
| | 03:11 | So it rotates, blinks just for
second, and then it moves out.
| | 03:14 | So that's pretty cool.
| | 03:15 | Make sure you turn that off
that can be a little annoying.
| | 03:18 | This option right here also will allow you
to turn off Auto-Keyframe generation, because
| | 03:23 | if you've got an object at a position, and
you just do something to the object, say you
| | 03:27 | move it, it actually starts
creating a tween for you automatically.
| | 03:31 | If you unclick this, then when you move
something it's not going to create any keyframes, it's
| | 03:36 | just going to move it temporarily, so you
could do a few things to it, and then add
| | 03:40 | the transition or add the tweens after that.
| | 03:42 | So I'm going to undo that
just to leave it like it was.
| | 03:45 | So I got this thing moving in, rotating
into position, and when I rotate out I'm going
| | 03:50 | to add a anticipation sequence, I'll add a
little bit of a rotation going the other way
| | 03:56 | before I go clockwise.
| | 03:59 | So I'm going to add here a rotation keyframe,
and then I'm going to add another one right
| | 04:05 | here and then another one here.
| | 04:08 | It's for my ending position, so what I'm
going to do is when I'm here it's going to animate
| | 04:13 | to a position here that's rotated the other
way, so back a little bit this way so that
| | 04:19 | creates the tween right there.
| | 04:21 | So it is sliding, so I don't want it to slide
during that time period that it's moving back.
| | 04:26 | So all I have to do is
change this Translation keyframe.
| | 04:28 | I can just click and drag that over here,
so it'll stay put until it finishes rotating.
| | 04:34 | And then when it moves it's
going to move just like that.
| | 04:37 | I want a more dramatic transition here so I'm going
to add some rotation here, and let's do one more 2880.
| | 04:46 | And so when I scrub that, this thing has a
little bit of an anticipation sequence, and
| | 04:51 | then as the animation
happens, it rotates to the right.
| | 04:54 | Let's go ahead and add some Opacity to that just
to fade that out as its rotating out of position.
| | 04:59 | So again just click on a keyframe here,
click on another keyframe here and move back to
| | 05:05 | this position make sure we
change the Opacity to 0 right there.
| | 05:09 | So you can change the Opacity
also directly from the Timeline.
| | 05:12 | And let's take look at that animation now,
so it comes into view, blinks, and it has
| | 05:17 | a little bit of an anticipation sequence here.
May be I need to expand that a little more.
| | 05:22 | You can move these things around by clicking and
selecting a group, and then scooting them over.
| | 05:28 | And then I will move this, this way you.
Notice that they're moving in proportion.
| | 05:33 | So this is just going to be a slower
transition now since I've got them selected.
| | 05:37 | You might be rotating a little bit too much.
| | 05:39 | There is not enough frames
for it to rotate that much.
| | 05:43 | So what I could do to is if I click
and Command+Click on some keyframes.
| | 05:48 | Then I can move those
keyframes at the same time.
| | 05:50 | So let's see if adding some keyframes
to this will make it a little better.
| | 05:55 | So ta-da!, okay that looks a little better
because it has a few more frames to draw that
| | 06:00 | transition of it rotating like
that, so let's take a look at it.
| | 06:03 | You can also control the animations with these
Timeline buttons here, so I'll back it up and hit Play.
| | 06:09 | So its looks pretty good, really good
sequence, and I did that all with keyframes.
| | 06:14 | So remember that pinning is not the only way to
animate, you can still use traditional keyframes.
| | 06:19 | I think keyframe is useful for some things, especially
things like building some of these instant transitions.
| | 06:24 | Now before I'll go I wanted
to show you one more thing.
| | 06:27 | Let's come back here and the fact that the word
march is there at the beginning kind of troubles me.
| | 06:32 | So what I want to do is create a keyframe
for this property right here called Always On.
| | 06:36 | So by default every single element in the
Timeline is going to be on at all times, and
| | 06:41 | you may not want that to happen.
| | 06:43 | So I change the property of an element,
and I want to click on this march 2012.
| | 06:47 | If I want to go ahead and collapse this I
can collapse like this with this triangle
| | 06:52 | and of course turn things on and off.
Say that I turn this box off.
| | 06:56 | This is just a temporary hiding of the view,
if you actually preview this you'll see that
| | 07:00 | the box is still there, and refresh that.
| | 07:03 | This is kind of showing you the
animation past the edge of the stage.
| | 07:08 | To fix that make sure you click on the
background where nothing else is showing and make sure
| | 07:12 | that you turn the Overflow to hidden.
| | 07:15 | So let me preview that again, and you could see that the
rotation is kind of hidden, because this is clipping everything.
| | 07:20 | I want to make sure that the March 2012
is not showing until a certain point.
| | 07:24 | I am going to click on the March layer here, and
I'll modify it from Always On to On at this position.
| | 07:32 | That means that before this keyframe this object will
be off, when it is at this position it's going to show up.
| | 07:39 | So let me turn on my Box again, so that
means that this will rotate, and then this will
| | 07:46 | blink, and then this object will appear.
| | 07:48 | So now that I've got it turned on I want
to go ahead and fade that in, so I'll create
| | 07:52 | a keyframe for Opacity scoot this over a
little bit and create another keyframe for Opacity
| | 07:58 | and just change the Opacity in this keyframe to 0,
and that creates the tween that makes that go.
| | 08:04 | And I probably want to make sure that
at this point somewhere I fade it out.
| | 08:09 | So a couple of other keyframes,
Opacity, Opacity and change it to 0.
| | 08:15 | Remember I can always do that from
right here that creates the tween.
| | 08:18 | So as this is snapping in anticipation
I fade this out, and when it rotates.
| | 08:25 | It's still there is just not showing up, so
remember you can add another keyframe here,
| | 08:29 | and then turn this element off at that position.
So it doesn't exist after that position.
| | 08:35 | Even though you might be doing less
keyframe animation in the future, once you get used
| | 08:39 | to the pin, it's still a valid way to do
certain things, and it's a great way of setting up
| | 08:43 | these kind of anticipation sequences.
| | Collapse this transcript |
| Exploring Timeline options| 00:00 | So, before we go any further, I wanted to talk
about some of the options available in the Timeline.
| | 00:05 | There are a lot of little icons around the
Timeline, so I wanted to talk about those
| | 00:09 | and show you some of the
options that you have here.
| | 00:11 | So, starting here from the left-hand side, you can
choose to show only the elements that you're animating.
| | 00:17 | This will make your Timeline a lot smaller.
So I am going to click on that.
| | 00:20 | You can see that the background as well as
the title are hidden when I turn that on,
| | 00:24 | so that lets me see just
the stuff that I'm working on.
| | 00:27 | The next one right here is Timeline Snapping.
| | 00:30 | If I don't have that on, the
Timeline doesn't snap to certain positions.
| | 00:33 | By default, it's usually on, so I am going
to turn that on, and you'll see that when
| | 00:38 | I reach certain points in the animation,
my Timeline will snap to those points.
| | 00:42 | So, half-a-second right here, three-quarters-of-a-
second right here, and a second, and so on and so forth.
| | 00:48 | You also have ways of zooming into the Timeline
or zooming out right here by clicking these icons.
| | 00:53 | And if you click on this icon, it will make the
Timeline fit to the entire width of the window.
| | 00:57 | So, I will click on that, and that's kind
of cool. It takes the whole Timeline and puts
| | 01:01 | it as wide as it can fit on the current window.
| | 01:03 | There are a couple of other little things here.
| | 01:05 | You may have noticed the Play,
Rewind, and Fast Forward buttons.
| | 01:09 | So, I can rewind by clicking on this, hit this
button to play, you can stop it while it's playing.
| | 01:15 | Now, one cool thing that you could do here is say
that you want to see the animation from here on out.
| | 01:20 | You can hit this Play button,
and it goes all the way to the end.
| | 01:24 | You can hit this button to return to the
last play position and see the animation from
| | 01:28 | that position that you had it previously.
| | 01:30 | Again, always remember, hit the
Spacebar to play animations as well.
| | 01:34 | Remember, too, that each of these layers
can be hidden from view or shown.
| | 01:38 | So let me scroll and show
all the animated elements.
| | 01:42 | I can choose to hide certain things.
| | 01:44 | This is not a permanent way to hide things.
| | 01:46 | If you turn something off, when you
preview it, you will see that it is still there.
| | 01:51 | This is not permanently hiding something.
| | 01:54 | In addition to that, you can lock certain
elements, so that you're not able to move them.
| | 01:59 | But again, they will still
animate just like anything else.
| | 02:02 | Notice that I have this box. And the title
I can see inside the box. I can't see that
| | 02:07 | in the Timeline, but I can see that in the
elements when they're right here that my title
| | 02:11 | is a little element that is within the box,
and so if I lock the title, it means that
| | 02:16 | I can't move the title within the box,
but I can still move the box itself.
| | 02:20 | So that's kind of weird about locking things.
It doesn't permanently lock something, especially
| | 02:24 | when elements are inside other elements.
| | 02:27 | And of course, I have already shown you that
these little triangles allow you to expand
| | 02:30 | or contract certain elements so that I can
see the options that I can animate and keyframe.
| | 02:35 | There is also an option
to add labels right here.
| | 02:38 | So, if you click on this icon, you will be able
to insert a label and type that into the Timeline.
| | 02:44 | That is related to the way that you
create actions for different elements.
| | 02:48 | The scripting options are right here.
| | 02:50 | You can insert trigger in the
Timeline that does certain things.
| | 02:53 | We'll talk about that more when we
get into scripting in another movie.
| | 02:56 | So, I think Adobe has done a really good
job of making this Timeline super functional
| | 03:01 | and something that's easy to work with
and obviously a lot of fun to use.
| | Collapse this transcript |
| Easing with Edge| 00:00 | In real life, objects
never move at the same rate.
| | 00:03 | Physical forces like gravity and friction
speed basketballs towards the ground or slow
| | 00:08 | down cars unless we keep
on hitting the gas pedal.
| | 00:11 | You can simulate those forces through a
technique called Easing, and that's a traditional way
| | 00:16 | of animating objects.
| | 00:17 | So let's take a look at how
you could do that with Edge.
| | 00:20 | Here's an animation that I've created.
It's pretty simple.
| | 00:22 | I'll scrub it so you can take a look at it.
So these words come in.
| | 00:26 | They rotate a little bit,
and they just stop right there.
| | 00:30 | So let me actually scroll this up a
little, so I can see it a little bit better.
| | 00:33 | So, those words will come in, rotate and end
right there, and then these words will appear,
| | 00:38 | and then this will do an anticipation sequence,
rotating backwards, and then rotates forward
| | 00:43 | and gets out of the stage.
| | 00:45 | So let's take a look at how we can improve
on that by adding a little bit of Easing.
| | 00:49 | I am going to do something here.
I'll create a copy of this Box layer.
| | 00:53 | So, right-click on this and select Duplicate
just so that we could see a little bit of
| | 00:57 | a difference between the different
types of Easing that you can apply.
| | 01:00 | So, all the Easing in Edge is applied through the
Easing panel which is right here in the Timeline.
| | 01:08 | So, if I click on an element like that, and I click
on this Easing, I can apply a different type of Easing.
| | 01:13 | Actually, I can go ahead and scrub the
Timeline a little bit further, say, like right there
| | 01:18 | so I could see the difference
between this Box and this BoxCopy.
| | 01:22 | And on this box right here, I am
going to apply a Quadratic Easing Out.
| | 01:26 | So, these secondary options here are how
fast or how slow it's going to apply the Easing.
| | 01:33 | One of the things that I like to do when I
am working with Easing is I like to take the
| | 01:36 | word Ease and change it the word Slow, and
the word in and change that to the word at
| | 01:42 | the beginning, and then out, and
change that to the word at the end.
| | 01:46 | If I ease in, I'm slowing down at the beginning of
the animation, and I'm going faster towards the end.
| | 01:52 | If I ease out, that's the opposite.
| | 01:54 | I am slowing down at the end, but I'm being faster at
the beginning, and that's how these animations work.
| | 02:00 | So I am going to apply that quadratic equation.
| | 02:02 | You could see that now
these two boxes are different.
| | 02:06 | So, the Box that is the copy that has the
original linear easing is a little bit slower
| | 02:12 | than this Box right here.
| | 02:13 | So, I applied an Easing Out, that means it's
going to be slower at the end, faster at the
| | 02:18 | beginning, and you can see the difference here.
| | 02:21 | If I scrub, you will see that they
will both end up at the same position.
| | 02:24 | And notice that this one right here that's in
the front which is this Box one, it's actually
| | 02:27 | slowing down as it gets to its ending position.
| | 02:29 | The other one is a little bit faster towards the
end, and that's exactly what we want to happen.
| | 02:34 | So, let me go ahead and delete this one.
| | 02:36 | I'm just clicking on that and right-click,
and then selecting Delete, and now we could
| | 02:41 | see the result of this animation.
| | 02:43 | So, sometimes the results
are going to be dramatic.
| | 02:45 | You might have to change the length of
this animation to see a more dramatic effect.
| | 02:52 | So let's go ahead and do that.
| | 02:53 | I am just clicking and dragging on the edges,
and let's see, so now you could see a little
| | 02:59 | bit of a slowing down towards the end.
| | 03:02 | So that's actually pretty cool.
Let's try a different one.
| | 03:05 | Let's say that we wanted to put a little bit of
Easing over here in our anticipation sequence.
| | 03:11 | So, as I'm winding this the wrong way
before I go this way and out, I want this to slow
| | 03:18 | down, and then I want it to be slow at the
beginning and fast at the end over here, so
| | 03:23 | that there's almost like a little bit
of a point at which nothing is moving.
| | 03:27 | So, if you've watched any cartoons like Bugs
Bunny or stuff like that, you know that they
| | 03:32 | exaggerate some of these movements.
So, see how we could do that.
| | 03:35 | We will open up this box part right here
to see all the individual transitions, and I
| | 03:40 | am going to click on this segment here.
| | 03:42 | Notice you can click on each
one of these individual segments.
| | 03:46 | I'll take that segment.
| | 03:47 | I'll apply some Easing to it, and what I
want for this one is I want it to slow down at
| | 03:53 | the end when it's all the way wound up.
| | 03:56 | So, I'll Ease Out, slow down
at the end, Quadratic is fine.
| | 04:00 | Some of these other options is control the
speed that the winding happens, so you may
| | 04:04 | want to try some of these.
| | 04:05 | I'll leave it as Quadratic right
there, and then I will click over here.
| | 04:09 | So now, this will wind, and it will sort of
slow down as it reaches its final position.
| | 04:16 | Then I want to do the opposite right here.
| | 04:17 | So, I'll click on that one, click on Easing, and I
want it to be slow at the beginning, fast at the end.
| | 04:25 | So, Ease In, Quadratic is fine.
| | 04:28 | And so when I look at this--let's take a look--
I will see that it almost like stops right
| | 04:33 | at this Timeline position, and you can
exaggerate that just by making this stuff bigger.
| | 04:38 | I'll click and Shift-click on this other one.
| | 04:41 | So that's another way you can click right
here, and then Shift-click right there, selects
| | 04:43 | all of them, and I can expand this Timeline
just to make that happen a little bit slower.
| | 04:49 | So, this will wind up and go away.
| | 04:52 | Usually, your anticipation sequence
lasts longer than the actual animation.
| | 04:57 | So I will grab these three different keyframes.
| | 05:02 | I'm holding down the Command key, it would be
Ctrl on a PC, and clicking on these keyframes,
| | 05:06 | and then I can move those this way.
| | 05:08 | Now, I am going to leave that gap there,
because what's going to happen is it will move this
| | 05:13 | way and it will just stay there for
just a second and then it will go away.
| | 05:17 | So let's took a look.
Maybe that's a little bit too much of a gap.
| | 05:21 | So I will just make the gap a little bit smaller,
and maybe this could be a little bit shorter.
| | 05:29 | So let's check it out.
Now, that looks pretty good.
| | 05:32 | I like the way that, that makes it
have a little bit more anticipation.
| | 05:37 | Anticipation is one of the keys to animation.
| | 05:39 | So what I always say is anticipation is
having the bread in your car before you get home
| | 05:45 | and having that great bread smell that
makes you just want to pull out the butter from
| | 05:49 | the bags and start buttering up that
bread and eating it before you get home.
| | 05:53 | That's anticipation, and that's a really good
thing that you can add to animation and Easing
| | 05:58 | makes it--not necessarily realistic--
but a little more interesting.
| | Collapse this transcript |
| Working with symbols| 00:00 | The ability to create symbols is a real
integral part of any animation program, and Edge has
| | 00:06 | its own implementations.
| | 00:07 | So let's take a look at
how Edge deals with symbols.
| | 00:10 | So I am going to modify my file a little bit.
| | 00:11 | I am going to hide this and show you that on
the Desktop I have three different versions
| | 00:15 | of that background where I have separated
the different elements from the background.
| | 00:20 | So I have just the background gradient, and
then just the background buildings, as well
| | 00:24 | as the foreground buildings.
So I need to import those into my animation.
| | 00:28 | I'll bring Edge back up, and I'll simply
just drag and drop them into the Timeline, and
| | 00:35 | there they all are.
| | 00:36 | Actually, it looks like it just
did one of them, so let's see.
| | 00:40 | It looks like I just got the buildings,
so let me do that again for the other ones.
| | 00:44 | So here is the building background
as well as this background right here.
| | 00:48 | So I don't need this other background that's kind of
like a combined version of all this, so I'll delete it.
| | 00:54 | And I am going to need to
stack these appropriately.
| | 00:57 | The Box right now is behind everything, so let me
scroll this up so you could see what's happening.
| | 01:05 | So if you look at this scrubbing item, you can
see that my building is right now, everything
| | 01:09 | is on top of that Box.
You need to have everything be behind the Box.
| | 01:13 | So you may try moving this down here, but
you may run into the problem where sometimes
| | 01:18 | it's easy to put the Box inside the background.
| | 01:21 | If that happens, just go ahead and
move the Box on top, and the word March.
| | 01:25 | It might be easier to grab these two and move
them up than it is to grab these backgrounds.
| | 01:30 | So now let me scrub this so I could see what's
happening, and yep! Everything is working fine
| | 01:34 | and is right on top of the buildings.
| | 01:37 | My animation layers aren't stacked up properly.
| | 01:39 | This is my background. That should be in the
background, so I want to move this to the way back.
| | 01:45 | And the buildings--let's see the buildings in
the front are actually behind the buildings
| | 01:51 | that are supposed in the back.
| | 01:53 | So I'll stack it differently
just by dragging these over.
| | 01:56 | And then I just need to
arrange everything in the Timeline.
| | 01:58 | So I am going to scoot this
background over a little bit.
| | 02:01 | I am going to take this and just position
it down here, and I'll grab my background.
| | 02:08 | That one is kind of hard to grab, so I could
just grab it from here and then scoot it over.
| | 02:12 | Now my buildings right here
are not exactly long enough.
| | 02:15 | That's not going to matter because I am going to
create a symbol to repeat this background a few times.
| | 02:21 | So now we got that going on.
| | 02:22 | What I want to do is animate
the front buildings a little bit.
| | 02:25 | Notice that I've drawn a few more
buildings to the right of the original building, so
| | 02:30 | my animation is going to start right here,
and then it's going to animate into its ending
| | 02:34 | position over here.
| | 02:36 | So what I am going to do is set myself up an
animation with the pin. And let's see.
| | 02:42 | Let's go ahead and put it at the
ending position right here.
| | 02:46 | So now I'll double-click over here to pin
that position as the ending position, and
| | 02:51 | then I'll come over here, and I'll move the
playhead over here, and then move the animation
| | 02:56 | this way, so that this animation will play
from here, and it'll end up right here at
| | 03:01 | its final position.
So let's take a look at that.
| | 03:03 | I'll hit Command+Return or Ctrl+Enter on a PC.
That's looking pretty good.
| | 03:08 | Maybe it looks like I have a
little bit of a gap right there.
| | 03:10 | So just let me scroll down and yeah sure
enough, didn't move this down far enough.
| | 03:15 | So I'll move it down, and
let me check that out again.
| | 03:20 | So that looks pretty good.
Maybe it's a little bit fast.
| | 03:23 | So I'll close that out, come back here
and just kind of expand this a little bit.
| | 03:28 | So this animation happens from here to here.
| | 03:31 | I'll go ahead and expand that somewhat,
so it's a little bit slower, test it out.
| | 03:35 | That looks a lot better.
| | 03:37 | I don't really want this animation to happen
right at the beginning, so I want it to start
| | 03:42 | a little bit later, talking
about the animation of the Box.
| | 03:45 | So I can move the entire animation sequence
by first clicking on that layer, select all
| | 03:50 | these different animations on that
layer and just scooting them over.
| | 03:53 | So let me scrub here, and when that Space Needle is
about to come up, I want that animation to happen.
| | 04:01 | And when it falls into position
right here, I want it to stop moving.
| | 04:05 | So that looks pretty cool.
| | 04:06 | I think maybe I need to
move my March stuff around.
| | 04:10 | So I'll drag these and move them over, and
that will happen sometime like right there.
| | 04:17 | So let's see. Let's put this one over this
way. Oops! I don't want to do that because
| | 04:22 | that will happen after it stops existing.
| | 04:25 | So let's check it out.
It's looking pretty good.
| | 04:32 | So I want to create a movement for these
buildings, but the buildings aren't wide enough, and
| | 04:39 | I need to scoot these down a little bit.
They are also kind of out of position.
| | 04:43 | So what I could do is I could create a symbol,
and then have that symbol repeat over and
| | 04:47 | over, and then I can animate it so that it just
moves at a different speed than the foreground,
| | 04:52 | maybe a little bit slower.
| | 04:54 | And it gives you a little
bit of a parallax effect.
| | 04:56 | So let's go ahead and do that.
Symbols in Edge are really easy.
| | 05:00 | All you have to do is right click on an
element and then select Convert to Symbol.
| | 05:06 | You can also click on Symbols right here.
| | 05:09 | That will add a symbol that you either import,
or you convert the selection to a symbol.
| | 05:13 | So let's go ahead and do that.
And I'll call this BuildingAnimation.
| | 05:17 | So we'll double-click on that.
So now we have a BuildingAnimation symbol.
| | 05:23 | Symbols work in the same way in
this program as in other programs.
| | 05:26 | So if I click and drag in a symbol, and then
put it in the Timeline, I'll see another copy
| | 05:31 | of that symbol appear there.
So this is just a copy of what's right there.
| | 05:35 | If you double-click on a symbol,
you enter that symbol's Timeline.
| | 05:39 | Notice how everything grays out.
And I have access now to this symbol.
| | 05:44 | That Timeline can also be animated, so that
is another pretty cool thing you could do
| | 05:48 | with Symbols. And any change that I make here
will also affect this other copy of the symbol.
| | 05:53 | So what I am going to do is delete that copy of that
symbol and then double-click to get onto this one.
| | 05:59 | And what I need to do here is I want to make
a couple of copies of this other symbol--make
| | 06:04 | sure that they overlap really well.
| | 06:06 | Let me just preview that to make sure--
yeah, there is a little bit of a gap there.
| | 06:10 | So I'll just kind of scoot this one over.
| | 06:13 | And it looks like when I came back, I am
inside the Main Timeline, so I'll double-click to
| | 06:19 | get into the BuildingAnimation Timeline and
click on that and just kind of move it over
| | 06:24 | a little bit with the arrow keys.
| | 06:25 | So I am going to hit
Command+Return or Ctrl+Enter.
| | 06:27 | Looks like my gap is gone. That's pretty good.
| | 06:30 | So I want those buildings to move, and again
I'm back in the Main Timeline, so I need to
| | 06:34 | double-click to get into this animation.
| | 06:37 | I want to grab these two buildings
and make a new symbol out of them.
| | 06:40 | I need to select both of them, and I'll
just right click and select Convert to Symbol,
| | 06:46 | and I'll call this twobuildings.
| | 06:50 | So now I've got twobuildings in
the BuildingAnimation Timeline.
| | 06:54 | If I animate this Timeline now, it's going
to move those twobuildings along, and that's
| | 06:58 | exactly what I want.
| | 06:59 | So I am going to position my playhead over
here, and I'll double-click to lock the position
| | 07:05 | of the playhead, and then I'll come back,
and I'll scrub the playhead to the left, and
| | 07:10 | then move these objects all the way to the end.
| | 07:12 | That creates that tween, and now I can see that
tween with the buildings moving towards that position.
| | 07:19 | Let's see how that looks.
| | 07:20 | So we'll play it, and it looks
like the buildings are moving.
| | 07:22 | And that's actually pretty cool.
| | 07:23 | I like how they're moving at slightly different
speeds. I want to go ahead and slow them down
| | 07:28 | a little bit further.
| | 07:29 | So, once again, I'm in the Main Timeline.
| | 07:32 | For some reason, Edge kind of keeps on snapping
you back to the Main Timeline after you preview.
| | 07:36 | So, you got to remember to double-click to
get into this Timeline, and I'll just click
| | 07:41 | and drag these over, so the animation
happens over a longer period of time.
| | 07:46 | I don't really need my playhead to be in pin mode,
so I'll just double-click on that, and I'll play this.
| | 07:53 | And I like the way the buildings
are moving at a different speed.
| | 07:57 | So I am going to do that even further.
| | 08:01 | So I'll just go ahead and
drag this over a little bit more.
| | 08:04 | Actually, I'll just drag both of them over,
so the twobuildings together, right here I
| | 08:09 | could just grab this top
Timeline and scoot it over.
| | 08:11 | So let's try it out now.
That's looking pretty good.
| | 08:17 | Now if I wanted to keep that going, I could
just keep on adding buildings to the right
| | 08:21 | of those other buildings in the background.
| | 08:23 | There's a better way of doing that with actions,
and I'll be showing how to do that in another movie.
| | 08:28 | So I want to show you something else.
| | 08:29 | Let me go ahead and close out
of here and go back in here.
| | 08:32 | You may remember from something like Adobe
Flash that it has different types of symbols,
| | 08:37 | like button symbols or graphic symbols.
| | 08:39 | And the graphic symbols in Flash can be made to
automatically show the animation while they're moving.
| | 08:47 | Now you only have one type of symbol in Edge,
you don't have button symbols, and you don't
| | 08:52 | have graphic symbols.
| | 08:53 | But you can control whether or not a symbol
that has an animation in its separate Timeline
| | 09:00 | shows the animation in the Main Timeline.
| | 09:03 | So I am going to go ahead and click on this
button to just make the animation last the
| | 09:08 | entire width of the screen.
| | 09:11 | And then I'm going to show you over here how
you can turn off the animation of this Timeline
| | 09:18 | of these buildings in the
background by clicking this scrub off.
| | 09:21 | So when I scrub this, you'll see the
buildings in the background aren't moving.
| | 09:25 | If you click this on, then it shows you
the buildings in the background moving.
| | 09:30 | And that's something that's similar to
the way that graphic symbols work in Flash.
| | 09:34 | So you can choose here whether or
not you want the symbols to scrub.
| | 09:39 | Right now, I have the buildings in the front
hidden, so that's why you're not seeing them.
| | 09:43 | Scrub, the buildings in
the background aren't moving.
| | 09:46 | If I turn that on, then the
buildings in the background are moving.
| | 09:49 | Sometimes when your animations are really
confusing, you may want to turn that on or off.
| | 09:53 | So there you have it.
| | 09:55 | Symbols are a great way of reusing artwork and also
a good way of achieving certain animation effects.
| | Collapse this transcript |
| Exporting and importing symbols| 00:00 | I wanted to show you a really cool
feature about this new release of Edge.
| | 00:04 | It has the ability of
exporting and importing symbols.
| | 00:08 | That's pretty cool, so let's take a look.
| | 00:09 | So I've got a couple of symbols in this animation,
this BuildingAnimation and these twobuildings
| | 00:15 | which are inside the BuildingAnimation.
| | 00:17 | So exporting a symbol is going to allow me to
bring any of these symbols into a new composition.
| | 00:22 | So I can right-click on these symbols and
select Export to export them, and I'll just
| | 00:27 | put up on the Desktop for right now.
| | 00:29 | I'll call it buildings,
and I am going to hit Save.
| | 00:32 | Notice that you can save as the Edge
Symbol File format which is down here.
| | 00:36 | You don't have any other option, so that
is going to create .eglib or an eglib file.
| | 00:41 | So I'll hit Save, and if I look at my
Desktop I'll see that we have an eglib file.
| | 00:46 | Now this is pretty interesting. Let's take
a look at that file in a text editor like
| | 00:51 | BBEdit, and we'll see that this is actually a
folder, and that folder encapsulates everything
| | 00:56 | about that composition, including
images that are within that composition.
| | 01:02 | So it added inside that file that's also a
folder a buildings_back.svg which is the assets
| | 01:09 | or that building background in SVG format.
| | 01:13 | So it's adding everything that belongs to
this symbol into this file, and that file
| | 01:17 | is actually composed of a
bunch of different elements.
| | 01:19 | So you can see right here,
so that's pretty cool.
| | 01:22 | When you want to import that into another
document--I'll go ahead and create a new document.
| | 01:26 | I'm just going to go to the Symbols here
and hit this Plus sign, and then I'm going
| | 01:31 | to select Import Symbols.
| | 01:34 | And I'll go ahead and click on the
new buildings.eglib file and hit Open.
| | 01:39 | Now here is my Symbols. You could see that it
not only imported the symbol that I exported,
| | 01:44 | but also any dependent symbols. So these two
building symbols also were imported into this composition.
| | 01:50 | When I use that, all I need to do is just click
and drag that over, and there are my two buildings,
| | 01:55 | if I double-click on them I get into the
BuildingAnimation, and if I double-click on this you will see
| | 02:01 | that here's my twobuildings internal animation.
So it's actually pretty cool.
| | 02:05 | It's really doing a good job of
encapsulating everything into a single file
| | 02:09 | that you can use in other projects.
| | Collapse this transcript |
|
|
4. Scripting EdgeCreating Timeline triggers| 00:00 | Edge allows you to create
scripts in a couple of different ways.
| | 00:03 | You can create triggers that are attached to the
Timeline or create actions that are attached to objects.
| | 00:08 | In this movie, I'm going to show you how to
create frame triggers. So let's take a look.
| | 00:12 | So right now if you play this Timeline,
I'm going to hit Command+Return, I'm on a Mac,
| | 00:15 | so Ctrl+Enter on a PC.
| | 00:17 | To see the animation plays in, we've got a
little box that that says Roux Conference,
| | 00:21 | it comes in, and then it leaves the screen.
| | 00:23 | So the Timeline just plays
from the beginning to the end.
| | 00:26 | We have a separate symbol on the background
that's animating the buildings at a separate speed.
| | 00:29 | So I'm going to close that, and I will
show you how to stop the flow of the Timeline.
| | 00:34 | So if I wanted to stop the Timeline at a
position after these words come in, then I can create
| | 00:39 | a frame trigger by clicking right here in
this diamond, and it'll create a frame trigger
| | 00:44 | at that position in the Timeline.
It goes in this special Actions layer.
| | 00:48 | So I'm going to click right
there, and it creates a trigger.
| | 00:50 | Now from here, I can type in some JavaScript
code to control the playhead, or I can just
| | 00:55 | click on one of these presets.
| | 00:56 | So I'm going to click on
the Stop the timeline preset.
| | 01:00 | Notice right now it says sym.stop.
That means symbol.stop.
| | 01:03 | It's going to stop the
current symbol from playing.
| | 01:06 | So we don't really need this.
| | 01:08 | This is a comment, it typed in
by typing in two slashes.
| | 01:10 | So you can type one, and if you
wanted to you could delete that.
| | 01:13 | I'm going to close this out,
and I'll preview this movie again.
| | 01:16 | So I'm going to hit Ctrl+Return, and it's going to
play words coming in, and then they are going to stop.
| | 01:20 | I'm going to hit Reload by hitting Command+R.
| | 01:23 | Notice that the background movie of the
buildings coming in is in a different symbol, and it
| | 01:29 | has its own Timeline, so it's not
stopping when we stop the Main Timeline.
| | 01:32 | So let me close that out, and I'll show you
a couple more things about frame triggers.
| | 01:36 | So frame triggers get this little icon at
the position in the Timeline that I activated.
| | 01:41 | I can move them around just by clicking on
them, and then clicking and dragging on them.
| | 01:44 | When I click on them, the little
diamond becomes yellow like that.
| | 01:47 | Once you have a frame trigger
selected, you can also copy and paste it.
| | 01:51 | So if I have it selected like that with the
yellow fill, I can go to the Edit menu and
| | 01:54 | select Copy, and then move the playhead to
another position and just select EditPaste.
| | 02:01 | So there I have another copy of that other
trigger, and if I double-click on the trigger,
| | 02:05 | I enter the trigger editing mode.
| | 02:07 | So you could see that this is a copy of the
original trigger that we created over here.
| | 02:11 | To delete a frame trigger,
all we have to do is select it.
| | 02:14 | This one is already selected,
and then hit the Delete key.
| | 02:16 | Now our triggers can also send the
Timeline to a different position.
| | 02:20 | So instead of stopping the Timeline, I can
also say something like Play from, and you
| | 02:24 | can see here the explanation play the timeline from
the given position in milliseconds or also a label.
| | 02:31 | So let's play this from position
zero, which would be at the beginning.
| | 02:36 | So I will close this out, and whenever it
reaches this position in the timeline, it's going
| | 02:40 | to start playing again from position
zero and sort of do the animation again.
| | 02:45 | So let's try that out.
| | 02:47 | You could see that the main
timeline repeats over and over.
| | 02:50 | Now notice the background timeline, because it's a
separate symbol, runs independent of this timeline.
| | 02:57 | So that's kind of cool.
We can send that to any time in the timeline.
| | 03:01 | As you can see, right now we're asking it
to go to the beginning, but you could you
| | 03:04 | type in whatever time we want in
there, remember it's in milliseconds.
| | 03:07 | So I am going to go ahead and delete this
and set it back to stop at this position.
| | 03:12 | So I'll close this out. Let's preview it.
| | 03:15 | And now the animation plays,
and it stops right there.
| | 03:18 | So I like the way these buildings
are animating in the background.
| | 03:21 | It would be really nice if we could have that
animation continue to play forever as if there
| | 03:25 | were just an infinite amount of buildings
animating in the background. So let's do that.
| | 03:29 | What I am going to do now is I need to get
into the timeline for this background symbol.
| | 03:34 | Now the background symbol I know is back here.
| | 03:37 | If I click there, I would be
clicking on the foreground buildings.
| | 03:40 | I know that if I click here, I
can get to the background buildings.
| | 03:43 | So let me double-click on that.
Here I am in that Symbols timeline.
| | 03:47 | Notice that it's an animation that plays from here
to here, and there are two copies of these buildings.
| | 03:52 | So I actually have a symbol call twobuildings.
| | 03:55 | So let me double-click in
here to get to that symbol.
| | 03:58 | I have two copies of the
movies, so one here and one here.
| | 04:01 | So what I want to do is I
want to animate this forever.
| | 04:04 | If you look up here, I can see
the structure of the animation.
| | 04:08 | So right now, I am in twobuildings.
| | 04:10 | If I want to back up one level, I am
going to click on BuildingAnimation.
| | 04:13 | This is very familiar to you,
if you have used Flash before.
| | 04:16 | So what I want to do is animate this timeline,
so that when it reaches this position, it
| | 04:20 | starts playing over and over again.
So let me see how I could do that.
| | 04:24 | I can create a frame action just by
clicking right here, and I'm going to add an action
| | 04:28 | that just says Play from, and
I want to put in 0 right there.
| | 04:32 | So let me close that out.
And let's see what happens now.
| | 04:35 | So we'll play, the front animation stops,
back animation keeps on going, but there's
| | 04:41 | a little bit of a jump, and that is because if
we take a look at how this background is animated--
| | 04:47 | and one of the things you have to be
careful with Edge is that when you finish editing
| | 04:53 | a symbol--so if I double-click to get in
the symbol--as soon as I preview the timeline,
| | 04:59 | and I close, when I come back,
I am back in the main timeline.
| | 05:04 | So don't forget that
because it kind of freaks you out.
| | 05:06 | You have to double-click back to
get into the symbol that you were in.
| | 05:08 | So let's take a look at what's happening here.
| | 05:11 | My animation starts right
here, and it ends over here.
| | 05:16 | And if you look at the size of the background,
my objects, my twobuildings don't quite exactly
| | 05:23 | fit properly in that sequence.
| | 05:26 | So if I look at where my building starts right
here, you will see that it starts at this position.
| | 05:30 | There is a black line right here.
That's the edge of the visible area of my stage.
| | 05:35 | But when I come all the way to the end, my building
that's supposed to be at this position ends right here.
| | 05:44 | Now if I try to take this--I'll move the
playhead to this position, and I just move it out here.
| | 05:49 | That's not quite going to
work because I have a little gap.
| | 05:51 | The problem is my art isn't wide
enough to cover the whole screen.
| | 05:56 | So what I am going to have to do is I am
going to have to create a third copy of the symbol
| | 05:58 | and put it over here, so that when I animate to
this position, everything is going to look right.
| | 06:04 | So I'll double-click right there to
go into what's called twobuildings.
| | 06:07 | I probably want to rename that into many
buildings because I'm about to make a third building here.
| | 06:13 | So I'm going to double-click right here
and call it manybuildings and hit Enter.
| | 06:18 | And what I want to do is make another copy,
so I have one copy of the buildings right
| | 06:21 | here, one copy of this symbol that's
another copy of the buildings, here.
| | 06:25 | And I want to create another one over here
just so that I have this little piece repeating.
| | 06:29 | So, the easiest way to do that is just to
hold down the Option key and click and drag,
| | 06:33 | that makes a copy of those buildings.
| | 06:34 | If I hold down the Shift key, I'll constrain.
When it's over here, I am going to let go.
| | 06:37 | I can see that it's not
quite overlapping properly.
| | 06:40 | So I'll just hit the Arrow keys
to the right a couple of times.
| | 06:43 | And then I will click over here to
make sure that it looks really good.
| | 06:46 | So I'm going to back up
to the BuildingAnimation.
| | 06:49 | Now let's see if I scrub here, I have a building
right at this edge, and if I go all the way to the end.
| | 06:55 | I should have that same copy of that building
here, and here's the new copy of that building
| | 07:00 | that I put on the left-hand side.
| | 07:01 | So let's check out that animation, and
we'll hit Command+Return. So there you go.
| | 07:07 | The buildings now look like they're going on
forever, even though my foreground animation
| | 07:12 | is being stopped by a frame action.
| | 07:14 | So frame triggers are super useful for
controlling the flow of the timeline.
| | 07:18 | They're pretty easy to generate, but you have to
remember that Symbols have their own individual timeline.
| | 07:23 | That's actually kind of cool because you can generate some
cool special effects once you understand how that works.
| | Collapse this transcript |
| Organizing animations with labels| 00:00 | One of the ways so you can organize
your timeline in Edge is by using labels.
| | 00:05 | So in this movie, I'm going to
show you how to work with Edge labels.
| | 00:07 | So in the same way that we have an Actions
layer, there's also a sort of hidden Label
| | 00:12 | layer, and it is right here,
right by this little triangle.
| | 00:15 | So, the way that you insert a label is by just
clicking right here whenever you want to add a label.
| | 00:22 | So let's add a label at the beginning of our
animation by moving the playhead to the beginning
| | 00:26 | and then clicking right there.
And I'm going to call this label start.
| | 00:29 | So when this animation reaches this point,
it starts rotating the text out of the screen.
| | 00:34 | So I'm going to create a
label right here and call it end.
| | 00:36 | I want to bring a new
animation into this sequence.
| | 00:39 | So I've already created a symbol outside of Edge,
and I'm going to import it into this composition.
| | 00:45 | If you need to learn how to import and
export symbols, make sure you check the movie on
| | 00:49 | exporting and importing symbols.
| | 00:51 | So I'm going to go over here to the Symbols panel
and hit this Plus sign and select Import Symbols.
| | 00:56 | I've got a symbol on my
Desktop called SpeakerBox.eglib.
| | 01:00 | So I'll double-click on that, and it
will add it into the Symbols panel here.
| | 01:04 | So, what I need do is add that symbol right
in here somewhere in between the time that
| | 01:10 | these words come in and the
time that they start going out.
| | 01:13 | So I'm going to need a little
bit of breathing room right there.
| | 01:15 | So, let me open up this Box layer right here,
and this March layer right here, and I'll
| | 01:21 | make my timeline a little taller.
| | 01:23 | And I'm going to click and drag a selection
box to select all of these points, and then
| | 01:28 | click right here in the middle of this object
and move it over just so I have a little more
| | 01:32 | breathing room in my animation.
Now, I need to move the label over.
| | 01:36 | To move a label, you just click
and drag it onto its new position.
| | 01:40 | Now I need to insert the
symbol into this sequence.
| | 01:43 | So I'll just click and drag the
SpeakerBox symbol and put it into our stage.
| | 01:48 | There are our speakers that are
going to be talking at this convention.
| | 01:52 | So I'll put them right over here, and what
I want to do is make sure that they don't
| | 01:56 | exist when the movie starts playing because
it doesn't really make sense for them to be
| | 01:59 | there when I first start my movie.
| | 02:01 | So to do that, I am going to go to the
Properties panel and click on where it says Always On
| | 02:05 | and switch it to On.
| | 02:07 | What that will do is before this
keyframe, the animation won't even exist.
| | 02:12 | Now I need to create an animation that
brings that or slides that in from the top.
| | 02:16 | So what I will do is I will pin right here my
Timeline by double-clicking on the playhead
| | 02:22 | and then I'll move the playhead over to the
left and then click and drag this animation up.
| | 02:27 | So, that creates a little sequence that
brings this animation like that into position.
| | 02:33 | So I'm going to add some easing to this.
So I'll click right here.
| | 02:36 | Then I will click on this Easing button
right there and make sure that we slow it down at
| | 02:41 | the end or Ease Out and Quadratic is just fine.
| | 02:44 | So now let me take a look
at that. That slides in.
| | 02:47 | So let's preview our animation
and see what's happening right now.
| | 02:50 | Something curious is going to happen.
| | 02:52 | We're going to miss that part of the
animation because we have a Stop action.
| | 02:55 | Right here, we have a Stop action
right when the words finish moving.
| | 02:59 | So let me go ahead and close that.
| | 03:01 | So this part right here of the movie
will never play because of that Stop action.
| | 03:05 | So we can also completely skip this area.
| | 03:08 | So I could come over here and double-click
on this and take this Stop action out.
| | 03:12 | So let me do that right now,
and I'll play the movie.
| | 03:16 | So I'm hitting Command+Return or Ctrl+Enter
on a PC, and it will play the whole thing.
| | 03:20 | So the speakers come in and the words come
out and the speakers are still on-screen.
| | 03:26 | So let me do this a little bit differently.
I'll click right here.
| | 03:29 | Let me double-click to get that, and I
will issue a command called Play from.
| | 03:34 | So, Play from normally takes
milliseconds, but it also takes labels.
| | 03:38 | You could see it right here when you scroll
down to the right, you could say milliseconds
| | 03:42 | or labels when you specify a
time for the Play function.
| | 03:46 | So to specify a label, all I have to do is
in quotes put in the name of the label that
| | 03:50 | want to play. I'll call this label
end because that's my label right here.
| | 03:54 | I'll close this out, and let
me play the movie right now.
| | 03:57 | So when it reaches this point in the Timeline,
it's just going to jump to this position.
| | 04:01 | Notice that there is an
animation that brings this down.
| | 04:04 | Let's see what's happening right
now when I play this animation.
| | 04:07 | So, my words come in, and this
appears on the screen immediately.
| | 04:11 | It doesn't slide in.
| | 04:13 | The reason that's happening is because when
this animation gets to this point, it's going
| | 04:18 | to skip the part of the sequence that scrolls
that animation down and jump directly to this
| | 04:23 | position where it's already on-screen and exit.
| | 04:27 | So I don't really want that to happen.
| | 04:28 | What I'm going to do is take this object
and in this position in the Timeline, I'll go
| | 04:33 | ahead and turn it off.
| | 04:36 | So now we have a sequence that appears
only right here, slides into view, and after it
| | 04:43 | reaches that position, it
completely gets deleted from the Timeline.
| | 04:48 | So what that's going to do is just totally
skip that piece where that animation happens.
| | 04:53 | So let me go ahead and hit Command+Enter
and take a look at what's happening now.
| | 04:58 | So the words come in and they completely exit.
| | 05:01 | So we've completely skipped
this middle part of the animation.
| | 05:04 | I'm going to label it because I
might want to get into it later.
| | 05:08 | So I'm going to come over here and
create another label right there.
| | 05:12 | I'll call it speakers.
| | 05:14 | And now I can move my Timeline when something
else happens to play that animation if I want to.
| | 05:20 | So labels are more than just markers.
| | 05:22 | You can use them to control
the flow of the animation.
| | Collapse this transcript |
| Creating object scripts| 00:00 | In addition to being able to create Timeline
Triggers, to let our animation do things at
| | 00:05 | certain points in the Timeline, we can
also create object triggers or object scripts.
| | 00:10 | Those scripts will execute whenever
we perform an action on an object.
| | 00:14 | So let's take a look.
Let's play our animation right now.
| | 00:16 | I'm going to hit Command+Return, and we see
that we have an animation that brings some
| | 00:20 | words in, and then the words exit.
| | 00:22 | If we take a look at our Timeline,
we'll see that we have some labels.
| | 00:26 | Here's the start label, the speakers label, as well as
the end label, and we have a little action right here.
| | 00:31 | Right now, our animation is playing to this
point, and then it's completely skipping this
| | 00:35 | section that brings the speakers down.
| | 00:38 | It's jumping to this end part where the
Roux Conference logo just rotates out of view.
| | 00:43 | Now remember that the background
buildings are in independent timeline.
| | 00:46 | So they're kind of doing their own thing.
| | 00:47 | What we want to do is create a button that
allows us to bring these speakers into view.
| | 00:53 | So to do that, first I'm going to
need to change this trigger right here.
| | 00:56 | So I'm going to double-click on an end.
| | 00:59 | So I'm going to change it, so it doesn't go to the
end label, but it stops the Timeline from playing.
| | 01:04 | So I'll hit Delete here.
| | 01:05 | Actually, let me get rid of that
comment because it's no longer relevant.
| | 01:09 | And I'm going to click on this Stop the
timeline button here, and it was to say symbol stop
| | 01:14 | (sym.stop) and what that does is let me
play the Timeline, Command+Return, Ctrl+Enter.
| | 01:19 | So it brings the logo
right here, and then it stops.
| | 01:21 | So that's pretty cool.
Now we need to add a button.
| | 01:25 | So I'm going to scroll down a little bit,
and I'll grab the Rounded Rectangle tool right
| | 01:30 | there and draw myself a little rectangle
on the bottom-left. I'll color it red.
| | 01:35 | And then I'll put some words right here, see
speakers, and I'll move it over here, color
| | 01:43 | it white, make it a little smaller.
| | 01:49 | And just to make it a single element let's
take a look, see if it looks really good,
| | 01:53 | and let's scoot it over a
little bit that way, scoot the whole thing in.
| | 01:57 | It's looking pretty good.
And what I'll do is I'll make it into a symbol.
| | 02:01 | So I'm going to select both of these objects,
and then click on this Plus (+) sign and choose
| | 02:06 | Convert selection to symbol.
That makes it into a single element.
| | 02:10 | I'll call it speakerbutton and hit OK.
| | 02:16 | Let's take a look at how
it's showing in the Timeline.
| | 02:19 | So right now that speakerbutton
is right here, and it's always on.
| | 02:24 | So if I want to, I can make that just appear
whenever we reach this point in the Timeline.
| | 02:30 | So right here what I want to do is
switch it from Always On to just On.
| | 02:35 | That makes it not be viewable right here and
just appear automatically when we reach this
| | 02:40 | point in the animation.
| | 02:42 | So the next thing I want to do is make
that button have a script or an action.
| | 02:48 | So to do that, I am going to go to where
that button is right here at this layer, and I
| | 02:53 | want to click on this script tag right here.
So notice how it says Open Actions.
| | 02:58 | So if I click on that, then what I could
do is choose something from this pop-up that
| | 03:03 | will trigger the action.
| | 03:04 | So in this case, I want to make sure that
when I click on this object, something happens
| | 03:09 | and what I simply need to do now is choose
one of the options from this menu right here.
| | 03:13 | There are a lot of different options here.
What I want to do is play from a specific label.
| | 03:19 | So if I say Play from the label, I can choose
one of these labels and the one that I want,
| | 03:24 | the speakers, I need to put that in
quotes of so "speakers", and I'll close.
| | 03:30 | Whereas the timeline script appears in the
timeline, the object scripts appear to the
| | 03:34 | left of each object layer.
So let's take a look at how that works now.
| | 03:39 | So, this animation plays, it stops moving,
and then this button appears, and I can click
| | 03:46 | on it, and it'll play that animation.
Now it's playing also the exit animation.
| | 03:52 | So what we need to do is add another timeline
trigger that stops that animation sometime in here.
| | 03:58 | Now this is a little tight right there.
| | 04:01 | So I'm going to click on this Display frame
or keyframe and scoot it over, so that I have
| | 04:06 | a little bit of breathing room, and I
can put a Stop action right here somewhere.
| | 04:11 | So over here, I am going to just create
another keyframe or another timeline action there.
| | 04:18 | So I'll click on this and on the next line, I'm
going to click the Stop button, and I want to play this.
| | 04:25 | I have an animation.
| | 04:26 | When the log reaches its final position
and stops, I have this see speakers button.
| | 04:31 | When I click on it, the speakers come into view.
| | 04:33 | That's pretty cool, and it's a
pretty easy way of handling buttons.
| | 04:37 | You might be bothered by the fact that my
mouse switches to a selection icon when I
| | 04:40 | am in top of that text.
| | 04:41 | So what I could do is I need to be on the
speakerbutton which is this button right here,
| | 04:47 | and I can go to this Cursor section and click on where
it says auto and switch it to something like the pointer.
| | 04:53 | So I'm going to click on that and click away,
and then Command+Return, Ctrl+Enter on a PC.
| | 05:00 | And now when I roll over on this, I can
see the pointer button, and if I click on it,
| | 05:05 | my speakers come into view.
| | 05:06 | So the combination of timeline triggers and
object scripts gives you a way of creating
| | 05:11 | awesome interaction features with Adobe Edge.
| | Collapse this transcript |
| Using the Code panel| 00:00 | One of the new editions to this release of
Adobe Edge is a new panel called the Code panel.
| | 00:06 | It's a way to combine all the code for your
project in one place, so let's take a look.
| | 00:11 | Now normally the way you get to code in Edge
is by double-clicking somewhere in the Timeline
| | 00:15 | where you see a keyframe for a code, so
here's the layer with all of the actions, if you
| | 00:19 | see a little keyframe like this, you double-
click, and it brings up a little Code panel.
| | 00:23 | Now you can also access this when code is
attached to an object by clicking right here
| | 00:28 | on this Open Actions area right to
the left of the current Timeline.
| | 00:33 | So here's the Code panel for here.
| | 00:34 | You could see there is the shortcuts on the
right-hand side, now you can also access all
| | 00:39 | of the code in your project by going
to the Window menu and selecting Code.
| | 00:43 | Now here you could see that we have all of
the elements in our Timeline, and it allows
| | 00:47 | us to see any code within the Timeline itself or
any code that has been added as actions to objects.
| | 00:55 | We can edit the code right here if we want to, and
we can add code to other elements in our Timeline.
| | 01:00 | This is a great view, because it saves you a
lot of time, and it makes sure that it combines
| | 01:04 | all of the code in a single place.
There is a few options to this panel.
| | 01:08 | So, for example, we can click on this button
right here to display the code snippets that
| | 01:13 | appear over here on the right-
hand side, and that's pretty cool.
| | 01:16 | You can also click on this button to
edit the entire actions JavaScript file.
| | 01:21 | This is one of the files that Edge creates for
you, and you can edit it directly from right here.
| | 01:25 | Just in case you want to do
some custom JavaScript functions.
| | 01:29 | So let's go and hide that, and there's a few
other options right here under this pop-up menu.
| | 01:34 | If you click on that you can change the Font
Size from Small to Large, and you can choose
| | 01:40 | whether or not you choose
to show Snippet Comments.
| | 01:43 | So the way that that works is if you add an
element from this shortcut right here, and
| | 01:48 | you have Include Snippet Comments on, you may
see a comment appear at the top of each edition.
| | 01:54 | If you turn that off, then it won't put the
comment at all when you insert the new piece of code.
| | 02:01 | So let me undo these changes here.
| | 02:02 | So you see the Code panel gives you a great
way of looking at all your code, accessing
| | 02:07 | every single object, add code to an object,
take a look at the JavaScript file that Edge
| | 02:11 | generates with your project, and it has some
additional options that make it a really nice
| | 02:16 | edition to this prerelease.
| | Collapse this transcript |
|
|
5. Backwards CompatibilityUsing preloaders| 00:00 | In Adobe Edge you can control what happens
when the user is waiting for certain libraries
| | 00:05 | to load, so we do that by playing around
with the Preloader stage, so let's take a look.
| | 00:10 | You can access the Preloader stage by making
sure you don't have anything selected in the
| | 00:14 | Timeline, so if we have a building right here, the
Properties panel shows a contact-sensitive set of option.
| | 00:19 | You want to make sure you are not on an
object, and that shows the stage options.
| | 00:25 | So from here we can click on this
Edit button to Edit our Preloader.
| | 00:29 | That takes us to a special stage, tells us
right now we haven't set up a Preloader yet,
| | 00:34 | but if we want to we can add a Preloader
just by clicking on this button right here, and
| | 00:39 | it'll insert some Clip Art, we can choose
from one of these options, some of these bars
| | 00:43 | or some of these rotation symbols,
I'll choose this one right here.
| | 00:47 | I'll just click on it, and then click on
Insert, and it adds that graphic onto the screen.
| | 00:52 | This is a very limited Timeline.
You can animate things on the stage.
| | 00:56 | This is a Preloader so you probably don't
want it to be that large, and over here it's
| | 01:00 | telling you how big the
Preloader is going to be.
| | 01:03 | So this one is going to be 8 kilobyte, once
we add up the images as well as the JavaScript
| | 01:07 | required to show the Preloader.
| | 01:10 | We can add images from our assets if we want to,
so maybe you can bring the buildings_background.svg
| | 01:16 | (buildings_back.svg), I'll just drag that
onto the stage, and that adds a little bit
| | 01:20 | off-size to our Preloader, not that much
because this is an SVG file so I can go ahead and
| | 01:25 | scale this a little bit bigger just to make
it cover up the screen, and maybe just put
| | 01:29 | it down here at the bottom,
while the rest of the libraries load.
| | 01:33 | You can even add text, you can't really
draw anything with the Rectangle or the Rounded
| | 01:37 | Rectangle tool, but at least you can draw some
text, and you can put in the word loading...please
| | 01:44 | wait, and that's what Edge will show
while it's loading some of the libraries.
| | 01:49 | So you are not going to be able to see it
that well when you previous this animation,
| | 01:52 | but it will appear for a fraction of a second.
| | 01:54 | Let's go ahead and hit
Command+Return or Ctrl+Enter.
| | 01:57 | So you'll see it there for just a fraction of
a second, but if you are in a slow connection
| | 02:03 | on a computer this accessing this animation
you will be able to see that animation until
| | 02:08 | the entire file will load.
| | 02:10 | So this is meant to show that animation if
a user is having problems or there are some
| | 02:15 | delays when downloading some of the
libraries that Edge needs to operate.
| | Collapse this transcript |
| Creating a poster and using the down-level stage| 00:00 | In addition to the Preloader stage, Edge has
another special stage called the Down-level stage.
| | 00:06 | This is for people who do not have support
for HTML5 options in their browser, so perhaps
| | 00:12 | a browser like IE6 or IE7 or IE8.
| | 00:15 | So to get to that stage, you go to
the Down-level Stage area right here.
| | 00:19 | You have to make sure
that you're not on an object.
| | 00:21 | So if you click on an object, you'll see that the
Properties palette takes on the properties for that object.
| | 00:27 | So you need to make sure you click somewhere else, and
then click on where it says Down-level Stage and hit Edit.
| | 00:32 | So this is what people will see if they don't
have support for some of the features in Edge.
| | 00:37 | Now this is a very limited stage.
| | 00:39 | You don't have animation
features, you can barely do anything.
| | 00:42 | You can enter some text if you want to, you
can import some images from the library, and
| | 00:47 | one of the options is to also
insert something called a Poster.
| | 00:51 | So what you could do is tell Edge to take a
screenshot of this animation at some point.
| | 00:56 | So I'm going to scrub this into the place
where maybe everything is showing right here,
| | 01:02 | so this will be may be a good
spot for a little screenshot.
| | 01:05 | I'll leave my playhead right there, and
then I'll click on this Capture stage as poster
| | 01:10 | button and click the Capture button,
and now a poster image has been captured.
| | 01:15 | It's also been added into our library.
| | 01:18 | So now if I go to the Down-level Stage, I
can hit Edit, and I can click on this Insert
| | 01:22 | button to insert the image
that is a screenshot that we took.
| | 01:26 | And you can of course, like I said, add some
text to that or bring in another image altogether.
| | 01:31 | If users don't have modern HTML5 support in
their browsers, this is what they get to see.
| | 01:36 | And it's not so bad, it's also an important thing to
do if you're exporting to something other than HTML.
| | 01:42 | So if you are doing some of the exports to
InDesign or iBooks, you want to make sure
| | 01:46 | that you have a poster frame, and
that you have a Down-level Stage.
| | Collapse this transcript |
|
|
ConclusionNext steps| 00:00 | I'm really excited to see that Adobe
Edge is becoming an amazing program.
| | 00:05 | Here's a couple of resources you can check
online for some other ways of learning about Edge.
| | 00:10 | So the best place to go to learn more about
Edge is of course the official Edge web site.
| | 00:14 | Adobe just released this web site at edge.adobe.
com where you can find the latest version of Edge,
| | 00:21 | get connected and engage with people about Edge.
| | 00:23 | That's definitely something you want to take a
look at and see some samples of Edge in action.
| | 00:28 | I highly recommend clicking on Getting
Connected and finding ways to connect in social networks
| | 00:33 | like Facebook, reading the Edge
Blog, or attending one of the forums.
| | 00:37 | Now Adobe Edge is part of Adobe Labs, so
you may want to check out that web site.
| | 00:42 | It has not only Edge, but some of the
other technologies that Adobe is working with.
| | 00:47 | Now Edge works in a couple of core
technologies that you should know more about.
| | 00:51 | One of them is JavaScript.
| | 00:52 | So I highly recommend Simon Allardice's
JavaScript Essential Training as a course that you should
| | 00:57 | follow up on after
learning a little bit of Edge.
| | 01:00 | Everything to do with scripting
in Edge is done through JavaScript.
| | 01:04 | So this is a great course that's going to
give you core knowledge of how to use the
| | 01:07 | JavaScript language.
In addition to that, Edge includes to jQuery.
| | 01:10 | So you should take a look at jQuery
Essential Training with Joe Marini.
| | 01:15 | So once again, this is Ray Villalobos, and
I hope you continue to explore Edge as we
| | 01:19 | get closer and closer to a final release.
| | Collapse this transcript |
|
|
