IntroductionAbout this course| 00:04 | Hi, I'm Chris Converse, and this is
Edge Animate Essential Training.
| | 00:07 | In this course we'll learn to compose layouts,
animate objects, and create interactive elements
| | 00:11 | inside of Adobe Edge Animate.
| | 00:12 | We'll also cover various publishing options,
which will allow us to use our projects on
| | 00:16 | the web, in an iBook, or share them
with other Adobe authoring applications.
| | 00:21 | We're going to start by creating symbols and
elements, working with actions, all while working
| | 00:25 | with a fixed layout
size and standard web fonts.
| | 00:28 | We'll branch into larger areas of web design
and layout, which Edge Animate also supports.
| | 00:33 | These things include using web fonts from
online services, and preparing projects to
| | 00:37 | gracefully downgrade for older browsers.
| | 00:39 | So with all that, we've got a lot to cover.
| | 00:40 | So let's get started.
| | Collapse this transcript |
| How do I get the software?| 00:00 | The first shipping version of Edge
Animate version 1.0 is completely free.
| | 00:05 | All you need to do is sign up for a free Adobe
Creative Cloud account and you'll have access
| | 00:08 | to all of the Edge application
and services including Edge Animate.
| | 00:12 | After you log in to the Creative Cloud
service, you're going to go to the Apps section, and
| | 00:17 | in the centre you'll see a group of
tools called Edge Tools & Services.
| | 00:21 | On the far left the first item you'll see listed
under the Edge Tools & Services will be Edge Animate.
| | 00:25 | Simply click on the Download button and the
Creative Cloud service will download a copy
| | 00:29 | of Edge Animate to your computer.
| | 00:31 | Once you have a copy of the software on
your computer you're ready to continue on with this course.
| | 00:34 |
| | Collapse this transcript |
| Using the exercise files| 00:00 | Now there's a series of exercise files
that go along with this particular course.
| | 00:04 | If you're Premium Member of the lynda.com
Online Training Library you'll have access
| | 00:08 | to these exercise files.
| | 00:09 | I've broken all of the files into individual
chapters and each chapter contains a different set of files.
| | 00:15 | So Chapter 3, for example, contains files that
you can use inside of Illustrator and Photoshop
| | 00:19 | to prepare artwork for Adobe Edge Animate,
whereas Chapter 4 actually contains projects
| | 00:23 | in Adobe Edge Animate that
we're going to be modifying.
| | 00:26 | So throughout the course I'll be
instructing you on which files we're working with and
| | 00:29 | which chapter folder those file are located in.
| | Collapse this transcript |
| What does Edge Animate actually create?| 00:00 | Now one of the first questions you might have
with Edge is, what kind of files does it create?
| | 00:04 | When you save an Edge Animate file to a
particular folder, what Edge is going to do is create
| | 00:09 | an HTML file with the same name and then a series
of JavaScript files that hook into that HTML file.
| | 00:15 | In addition Edge will also create a folder
called Edge Includes and inside of that folder
| | 00:19 | is a copy of the Edge API, a copy of
jQuery, and other JavaScript files.
| | 00:24 | It's all of these files combined that the
browser sees and loads to replicate your Edge
| | 00:29 | project within a web browser.
| | 00:31 | Now the way Edge writes all of the JavaScript
in HTML is in such a way that it is compatible
| | 00:35 | with as many browsers back as possible,
but in addition Edge gives us a few ways that
| | 00:39 | we can create things like downloadable stages,
for example, that will allow us to create user
| | 00:44 | experiences for people who don't have a
newer browser, and we'll talk about a lot of that
| | 00:48 | stuff in the publishing section.
| | 00:50 | In addition to web browsers, your Edge Animate
projects can be used in a bunch of other places,
| | 00:54 | including inside of EPUBs, inside of
digital magazines, and anywhere that HTML, CSS, and
| | 00:59 | JavaScript are supported.
| | 01:00 | To see a sample of the folder structure that
Edge creates I'm going to come over here to
| | 01:04 | the Exercise Files.
| | 01:06 | Let's open up Chapter 1 and
let's open up the myAnimateProject.
| | 01:10 | This is simply creating a blank document inside
of Edge and simply hitting Save into this folder.
| | 01:15 | So here we see we have our animate project,
our HTML, a series of JavaScript files that
| | 01:20 | hook into that HTML file, and a folder called
edge_includes, again with all of the JavaScript
| | 01:25 | that's necessary to run these entire project.
| | Collapse this transcript |
| What's new in Edge Animate 1.5?| 00:00 |
Edge Animate 1.5 gives us some new
features around CSS and fonts.
| | 00:05 |
the color panel has a new interface and
features a CSS3 gradient creation tool.
| | 00:09 |
And additional CSS3 tools include
creating CSS filters, box shadows and
| | 00:14 |
text shadows.
In addition to these CSS3 capabilities,
| | 00:18 |
Adobe Edge Web Fonts, a service from
Creative Cloud, has been integrated
| | 00:22 |
directly into Edge Animate, making
searching and adding web fonts from Adobe
| | 00:25 |
Typekit quick and easy.
For more information on using these new
| | 00:29 |
CSS3 features, look for new lessons
inside of chapter 2, and to animate these
| | 00:34 |
new CSS3 capabilities, look for new
lessons inside of chapter 5.
| | 00:37 |
And for information on adding Adobe
Typekit Web Fonts into your composition,
| | 00:41 |
look for the Edge Web fonts lesson in
chapter 11.
| | 00:45 |
| | Collapse this transcript |
|
|
1. Understanding the Edge Animate InterfaceThe splash screen| 00:00 | Now when you launch Edge Animate
you're going to get this splash screen.
| | 00:03 | In the upper left-hand corner here you
have the option of opening a file that already
| | 00:06 | exists on your computer's hard drive.
| | 00:08 | You have the ability to create a new file or
to access any other recent files that you
| | 00:13 | had open inside of Adobe Edge.
| | 00:15 | On the right-hand side we have a series of tabs.
| | 00:17 | First is Get Started, which is open by default,
and this contains links into here, which will
| | 00:21 | bring you into the Edge environment and open
up the Lessons panel and walk you step by step
| | 00:26 | through some of the courses that
they have built into the product.
| | 00:29 | Under Key Features they list some of the
features that are unique to Edge Animate.
| | 00:34 | The Resources tab contains
links to other training material.
| | 00:37 | And lastly, my favorite
one, is the one called Quiet.
| | 00:40 | Just selecting this will turn all of the right-
hand panels off and just give you a nice clean
| | 00:45 | space that you can decide what you
want to do before you start your project.
| | Collapse this transcript |
| Overview of the interface| 00:00 | Now in order to see the Edge Animate
interface we need to create a new project.
| | 00:04 | So from the splash screen let's come
over here and just click Create New.
| | 00:08 | Once this opens up we can see the Adobe dark
interface is also being used inside of Edge Animate.
| | 00:12 | On the left-hand side under Properties here,
this is a contextual panel which will change
| | 00:16 | based on whatever content we have selected in
the stage in the Elements panel or in the Timeline.
| | 00:21 | Now over here on the right where it says
Untitled-4, this is our stage and the file that we're
| | 00:26 | working in, and notice that it says .html.
| | 00:29 | As we talked about before, every time we save a file
in Edge Animate, we also get an associated HTML file.
| | 00:36 | Further to the right is the Elements panel.
| | 00:38 | This is where edge will show us the HTML
structure of any document that we're working within.
| | 00:44 | Underneath is the Library panel.
| | 00:45 | This is broken into asset, symbols, and fonts.
| | 00:47 | On the right-hand side
this is the Lessons panel.
| | 00:51 | From the splash screen, if we were to click
on one of those items on the Getting Started
| | 00:54 | tab, it would bring us into this interface
here and start us in a particular lesson.
| | 01:00 | Then at the bottom of the panel is our timeline.
| | 01:02 | We're going to be doing most of our work
between the Timeline panel, the Stage panel, and the
| | 01:06 | Properties panel over here.
| | Collapse this transcript |
| Customizing Edge Animate| 00:00 | There are a few things you can do to
customize the interface of Adobe Edge Animate.
| | 00:04 | One of the first things you might want to
look at is under the Edit menu, come down
| | 00:07 | to Keyboard Shortcuts.
| | 00:09 | If you've been using other animation software
which gives you keyboard shortcuts for things
| | 00:12 | like creating keyframes or transitions, you
can come in here and redefine shortcuts that
| | 00:17 | are already in Edge Animate to match
software that you're already used to.
| | 00:22 | In addition, all of the
panels are resizable as well.
| | 00:25 | So I can grab all of these panels and move them
around and the other panels will adjust accordingly.
| | 00:31 | Once you've arranged the panels in a way that
you like, you can come up to the Window menu,
| | 00:35 | choose Workspace, and then New
Workspace and give your workspace a name.
| | 00:39 | So if you resize your panels again in the future,
you can always go back to a saved workspace.
| | 00:44 | Now in addition to just resizing panels you can
also grab a panel and pull it out of the interface.
| | 00:49 | So I can pull the Lessons panel out here
and just have it be its own floating window or
| | 00:53 | I can simply close it.
| | 00:55 | For the remainder of this course I am
going to leave the Lessons panel closed so I can
| | 00:58 | get a little bit more room on the right-hand
side and a much bigger stage area in the center.
| | Collapse this transcript |
| For those familiar with HTML and CSS| 00:00 | Now if you are familiar with HTML and CSS
you are going to be very curious as to how
| | 00:04 | Edge actually creates these
animations and layouts with HTML and CSS.
| | 00:09 | So in order to demonstrate this I want to
show a couple of examples on how Edge will
| | 00:13 | change the code based on what
we do in the Properties panel.
| | 00:16 | Now I don't want you to
follow along in this video.
| | 00:18 | I just want you to watch.
| | 00:19 | So what I am going to do is select a
graphic that I have here on the stage.
| | 00:23 | When I select this, you will see the Properties
panel lights up with all the different properties
| | 00:26 | that we can change.
| | 00:27 | What I want to call your
attention to is in the corner here,
| | 00:30 | we see this little item called div.
| | 00:32 | If I click on this I can change between
a div and an image tag for this graphic.
| | 00:36 | By default Edge is going to put the graphic
into a background property of a div tag and
| | 00:42 | define that background property with CSS.
| | 00:44 | This gives us the ability to move
the background position of this object.
| | 00:48 | So I can click-and-drag this around and very
much like InDesign, I can move the background
| | 00:53 | position while keeping the
original container in the same spot.
| | 00:57 | If I have my Clipping tool selected, I can
come in here and change the clip of this as well.
| | 01:02 | And even with the clip changed I
can still move the apple around.
| | 01:06 | Now if were to publish this out and inspect
it in a browser, I would see that I have a
| | 01:10 | div tag with the graphic assigned into the
background with CSS and the clipping properties
| | 01:15 | defined in CSS are also
attached to the div element.
| | 01:20 | Now if I come back to Edge, let me just undo some of
these changes and come back to the original graphic.
| | 01:25 | Now with the graphic selected, instead I am
going to tell Edge I don't want to use a div
| | 01:28 | tag, I just want to use an image tag.
| | 01:31 | With the image tag selected I am going to
come back to the clipping tool and now when
| | 01:35 | I assign clipping properties into this graphic,
you will notice that I don't have the ability
| | 01:38 | to move the background graphic.
| | 01:40 | This is because an image tag cannot have a
background graphic as part of that image tag.
| | 01:45 | So Edge's interface won't
show me that as an option either.
| | 01:49 | Now I were to publish this out and inspect
this in a browser, I would see that instead
| | 01:52 | of having a div tag with a background graphic, I
simply have just an image tag, no CSS background,
| | 01:58 | because this is an image element, and all of
the clip items are assigned to the image tag.
| | 02:02 | Now one of the most elegant aspects of
Edge Animate is that as we go through and make
| | 02:06 | changes in the Properties panel and adjust
our layout and composition on the stage, Edge
| | 02:11 | is constantly changing the HTML and CSS
necessary to replicate our design inside of various
| | 02:16 | browsers. And if there is ever a point when
you want to actually customize what Edge is
| | 02:21 | actually writing, you can select any item
and choose the HTML container, or you can come
| | 02:25 | up here to this button at the top here, which
will allow us to customize specific elements.
| | 02:30 | I can click on this for example and define
what always happens with the element I have
| | 02:35 | selected as far as Edge is concerned.
| | 02:37 | So if you always want images tags specified
with an image, for example, you can check on
| | 02:41 | this box here and it will
always use the image tag.
| | 02:44 | So again, for those who are familiar with
HTML and CSS, as you're working inside of Edge,
| | 02:49 | when you publish out your projects, just take
a peak at your inspection tool inside of your
| | 02:52 | browser, and just take a look at how Edge is
actually constructing the layouts that you're
| | 02:56 | creating inside of the interface.
| | 02:57 |
| | Collapse this transcript |
|
|
2. Creating Content in Edge AnimateCreating a new project| 00:00 | So to start working with an Edge Animate project,
I want to first create a folder on the desktop.
| | 00:04 | We will cal this myAnimateProject and
open this up and just resize it a little bit.
| | 00:09 | Now with that in place let's
come back to Edge Animate.
| | 00:13 | From the splash green
let's come over the Create New.
| | 00:16 | Now by default Edge is going to create a
550 pixel wide by a 450 tall pixel stage, and
| | 00:22 | notice next to the pixel
measurements we have this little button here.
| | 00:26 | If I click on this, this will
change from pixels to percent.
| | 00:30 | When we have the have the measurement set
to percentage, this is how Edge Animate is
| | 00:34 | going to let us create
responsive designs of our content.
| | 00:37 | So when the browser size changes we can
control where our content moves around.
| | 00:42 | For the first few chapters we are
going to change this back to pixels.
| | 00:45 | Once you get comfortable with Edge in
creating your different layouts, then we are going
| | 00:48 | to be switching to responsive designs later
on in the course and then having our designs
| | 00:52 | change with the browser width.
| | 00:55 | After all of the stage measurement,
you will see the Composition ID.s
| | 00:58 | Every project gets a unique ID and we have
to have a unique ID inside of each HTML file.
| | 01:04 | Next is the Down-level Stage.
| | 01:05 | This gives us a very nice visual way to create
an alternate layout for older browsers, giving us
| | 01:11 | a way to progressively
enhance our user experience.
| | 01:14 | The next two items, Poster frames and Preloaders,
these are also part of the publishing settings
| | 01:19 | and we are going to talk more about Down-
level Stage, Poster frames, and Preloaders in the
| | 01:24 | publishing section of this course.
| | 01:26 | Now without changing anything at all, what we
are going to do is come up to the File menu.
| | 01:29 | We're going to choose Save, and from the
Desktop let's choose the myAnimateProject that we
| | 01:34 | created, and for the name we
are going to call this myProject.
| | 01:38 | Then we'll click Save.
| | 01:41 | Now if we look inside that folder that we
created on the desktop, we will see the myProject.an,
| | 01:45 | which is the animate file we got from Edge,
and automatically Edge created the HTML file,
| | 01:51 | these three JavaScript files all with the
same name, and then the edge_includes directory,
| | 01:56 | which contains jquery, jquery.easing, a json2
JavaScript file, and a copy of the Edge Animate framework.
| | 02:04 | Now with this in place you have a project that
you can work through the rest of this chapter with.
| | 02:07 |
| | Collapse this transcript |
| Using the Rectangle and Ellipse tools| 00:00 | Now to create content inside of Adobe Edge Animate
we're going to be working with a blank project.
| | 00:05 | For those who joined us in the beginning of
this chapter you can use the blank project
| | 00:08 | we created on the desktop.
| | 00:10 | Once inside of the Edge interface what we're
going to do is come up here to the upper-right
| | 00:12 | hand corner and select the Rectangle Tool.
| | 00:16 | With that tool selected come over
to the stage and click and drag.
| | 00:19 | Edge Animate is going to create a rectangle
on the stage, and then in the Properties panel
| | 00:23 | you're going to see all of the different properties
light up with all of the things that we can change.
| | 00:27 | The first thing I want to look at in
the toolbar is the stroke and fill.
| | 00:31 | Now in CSS these are referred to as
background color and border color.
| | 00:35 | So let's click on background color.
| | 00:36 | Let's come over here and select a color.
| | 00:39 | You can hit Return or click on the
swatch again to get the dialog box to go away.
| | 00:43 | And you'll see two different places that we can
assign background colors, in the toolbar at
| | 00:47 | the top, and in the Properties panel under Color.
| | 00:51 | Next to color we can assign a border color.
| | 00:53 | Let's click on this.
| | 00:55 | Let's assign a border color.
| | 00:57 | Now in CSS we don't actually see a border until we
define three properties - color, style, and size.
| | 01:04 | So this dropdown menu next to the border
gives us the ability to define the style.
| | 01:09 | Let's come down and choose solid.
| | 01:11 | As soon as I do that I
see the one pixel show up.
| | 01:13 | I can roll my cursor over top of the
value here and I get the scrubby sliders.
| | 01:18 | So I can click and drag this.
| | 01:20 | Give this a border size.
| | 01:23 | I'll make the color a little
bit lighter so you can see it.
| | 01:27 | You'll notice that as I make changes we
can see the live representation on the stage.
| | 01:32 | Now above color we have all of
the Position and Size properties.
| | 01:35 | So I come over here and scrub the
width, for example, or the height.
| | 01:40 | I can even lock these two properties
together so they will scale in proportion.
| | 01:46 | Underneath Color we have
all the Transform tools.
| | 01:48 | We can scale the entire object,
unlink these and just scale one property.
| | 01:54 | We can shear these or we can come down
to the Rotate and rotate this object.
| | 02:03 | Now underneath Transform we have Corners.
| | 02:06 | This might be close by default, but you
can toggle this open, and Corners controls the
| | 02:10 | effect of the border radius of this object.
| | 02:13 | So by default number one is selected, which means
changes I make here are going to affect all four sides.
| | 02:18 | So if I scrub this value here we can see the
effect of the rounded corners on the stage.
| | 02:23 | Another nice feature in this interface is
we can change which borders we are affecting.
| | 02:27 | If I change from the number one to the number
four this gives me four values that I can change.
| | 02:32 | So I can grab the upper-right corner
for example and change that to be 0.
| | 02:36 | So I can affect the corners individually, or
again, go back to number one and affect all
| | 02:41 | of the corners at the same time.
| | 02:43 | There's also an option for eight where I
can affect the beginning and ending points of
| | 02:47 | a corner for each item.
| | 02:49 | So as I change this upper-right corner
here you can see that I actually have a border
| | 02:53 | radius that's different on the
top versus the border on the right.
| | 02:57 | Now I'm going to come back to the corners
area and just set this back to a lower number.
| | 03:00 | So these are the basic things
that we can affect on a rectangle.
| | 03:04 | I'm going to come up here to the stage,
select my rectangle, and delete this.
| | 03:09 | Now the tool next to the Rectangle
Tool is the Rounded Rectangle Tool.
| | 03:13 | If we select this come over to the stage, click
and drag, you'll see that we get rounded corners.
| | 03:18 | What's really happening here is Edge is
automatically assigning border properties.
| | 03:22 | So when we do this what you'll see is Edge
is actually just creating another div element
| | 03:26 | and adding corners to the object automatically.
| | 03:29 | There's really no difference between the
Rectangle Tool and the Rounded Rectangle Tool.
| | 03:33 | In both cases you might notice in the upper
right-hand corner under the Elements panel
| | 03:38 | these items that we're
drawing are being assigned div tags.
| | 03:41 | So again everything we're doing in the Edge
interface is represented with HTML and then
| | 03:46 | the CSS is being applied to the
object to create the visual effects.
| | 03:50 | Now let's come in here, let's delete this,
and let's go to the third tool here, which
| | 03:53 | is the Ellipse Tool.
| | 03:55 | So with the Ellipse Tool selected
I'll click and drag, get a circle.
| | 03:59 | I can hold the Shift key to constrain proportions,
and when I let go the one change you'll notice
| | 04:03 | here is we still have a div tag, but in
the corners property we have our measurements
| | 04:07 | changed from pixels to percents.
| | 04:10 | This is how we define circles in CSS, and
again Edge will automatically assign those
| | 04:15 | objects based on which of
the tools we've selected.
| | 04:18 | Let's come back to the stage, delete this.
| | 04:20 | Now one tool that seems to be missing is the
Line Tool, but we can actually create lines
| | 04:24 | or rules with our Rectangle Tool.
| | 04:26 | So let's come up to the Tool panel.
| | 04:28 | Let's select the Rectangle Tool.
| | 04:29 | I am going to come in here
and click and drag on the stage.
| | 04:33 | First thing I'm going to do is
come over to the rule inside of Color.
| | 04:37 | Let's set that property to none.
| | 04:39 | Let's set the size down to 0.
| | 04:41 | Then we can come up to the Position and Size
and move this down to let's say a 5 pixel rule.
| | 04:46 | So now when I click away I actually have
a div here which just has a height of 5.
| | 04:50 | Then I can come in here and affect this by
changing things like the rotation, for example.
| | 04:55 | Again, if we go over to the Elements panel we'll
see again that we just have the div on the stage.
| | 05:00 | So as I mentioned before, Edge is creating
HTML elements for all the objects that we
| | 05:03 | drawn on the stage, and then using CSS to
replicate all of the different properties we're setting
| | 05:08 | in the Properties panels.
| | 05:09 |
| | Collapse this transcript |
| Using the Transform tool vs. the Properties panel| 00:00 | Now in the toolbar in the upper left-hand
corner of Edge Animate next to the Pointer
| | 00:04 | Tool we have a Transform Tool.
| | 00:06 | So what this does is basically let us transform a
series of properties really quickly inside of Edge Animate.
| | 00:12 | So let's come over to the Rectangle Tool,
let's click and drag a rectangle to get something
| | 00:16 | on the stage, and let's come
over here to the Transform Tool.
| | 00:19 | With the Transform Tool selected, I want you
to watch the properties in the Transform area
| | 00:24 | in the Properties panel.
| | 00:25 | So if I come over here and just simply grab
one of these corners and click and drag, notice
| | 00:30 | that both the Width and
Height properties are now changing.
| | 00:33 | If I put my cursor outside of the bounding
box, you'll see I have a rotation symbol here.
| | 00:39 | When I click and drag, notice
the rotation actually changes.
| | 00:42 | Now these give me tools inside of Edge that
allow me to transform objects very much the
| | 00:47 | way I would transform in tools like
Illustrator and InDesign, but all of the CSS properties
| | 00:52 | are being assigned in that
transform area in the Properties panel.
| | 00:55 | Now I can also change the origin of this object,
which is very similar to a registration point.
| | 00:59 | So I can click and move this around, and
again in the Properties panel you can see under
| | 01:03 | Transform the Origin property is changing.
| | 01:06 | Once I let go, come back out and rotate
this and it will now rotate around that Origin
| | 01:09 | property, and scale on that Origin property.
| | 01:13 | When I come on to the right-hand or left-hand
side of the object I can actually shear this
| | 01:17 | as well, and the same thing
for the bottom properties.
| | 01:20 | We can see the shearing effect again
changing inside of the Transform area.
| | 01:25 | Now the Transform Tool isn't doing anything
different than we could do manually by going
| | 01:29 | into the transform area of the Properties
panel, but it gives us a very visual way to
| | 01:33 | quickly access the different transform properties
using one tool and making our transformations on the stage.
| | 01:39 |
| | Collapse this transcript |
| Using the Text tool| 00:00 | To add text objects inside of Edge Animate
we're going to come up to the Tool panel.
| | 00:04 | We're going to select on this
letter T here, the Text Tool.
| | 00:07 | Come down to the stage and
we're going to click and drag.
| | 00:08 | Now as soon as we let go, Edge is going to
give us a dialog box where we enter our text.
| | 00:14 | So right now we can't
actually type directly on the stage.
| | 00:17 | All of the text for an individual item
is controlled through this text block.
| | 00:21 | So I'm just going to type in here,
This is a text box. Let's close this.
| | 00:25 | Then we can see the text is
actually showing up inside of that object.
| | 00:28 | To make changes to the text we can
simply double-click and bring this back.
| | 00:32 | Now this also supports line-breaks.
| | 00:34 | So I can hit a Return, close this out and
I'll get a return inside of my element here.
| | 00:40 | Now one thing we can't do
is affect this with HTML.
| | 00:42 | So we can't style
individual words and characters.
| | 00:46 | We can inject HTML into these objects, and that's
something that we'll look at later on in the course.
| | 00:51 | With this textbox selected we'll see all of
the different properties over here and all
| | 00:55 | of the properties in the Properties panel
will now change to things that I can do to
| | 00:59 | affect the typography as well
as the container of the object.
| | 01:02 | So down here under text we can choose the
different fonts, all of the built-in web safe
| | 01:07 | fonts are in here as well, and later on in
the course we'll be looking at adding web
| | 01:10 | font into Edge Animate as well.
| | 01:12 | So for now we'll just keep Arial,
Helvetica, and generic sans-serif.
| | 01:17 | To change to point size we can grab
this object and move this up and down.
| | 01:20 | We can also change measurements
from pixels, percents, or ems.
| | 01:25 | The next set of styles have to do with the
weight, style, and text transformations, and
| | 01:31 | text-decoration. Underneath there we can
change the alignments. And then under this special
| | 01:36 | area here we have the ability to
change additional CSS properties.
| | 01:40 | We can do letter-spacing by dragging this,
word-spacing, we can set line-height, and we
| | 01:46 | can set the indent for the first line.
| | 01:48 | So again these are all standard CSS properties, and
these are the things we can access inside of Edge as well.
| | 01:54 | In the upper right-hand area of the
text property we can even change the color.
| | 01:58 | So I can click on this and come in
and change the color of the text.
| | 02:03 | So inside the text area in the Properties
panel is everything that we can do to affect the
| | 02:06 | typography of the text
elements we created in Edge Animate.
| | 02:09 |
| | Collapse this transcript |
| Importing content into Edge Animate| 00:00 | Now that we've covered creating individual
content elements inside of Edge, it's most
| | 00:04 | likely that you're going to want to bring
in content from other sources such as web
| | 00:08 | graphics and SVG graphics.
| | 00:10 | So as we explore bringing content into Edge
we're going to work with our blank project.
| | 00:14 | Inside of that project we're going
to open the file called myProject.an.
| | 00:19 | Now to import content into Edge we can
come up to the File menu and choose Import.
| | 00:24 | We can also go over to the Library panel and under
Assets we can click on the plus (+) sign over here.
| | 00:31 | In either case we're going to get the Import
dialog box and be able to browse our operating system.
| | 00:35 | Let's go into the Exercise Files.
| | 00:37 | Let's go into Chapter_02 into Artwork and
let's open red_apple.png. Then click Open.
| | 00:44 | Once we do that we'll see that we have an
Images folder that shows up inside of Assets
| | 00:48 | and we have a file inside
up here called red_apple.png.
| | 00:52 | Now if we go back to the operating system
and look at the project folder we'll see that
| | 00:55 | Edge actually created an images directory
and if I open this we can see the red_apple
| | 01:00 | file inside of here.
| | 01:01 | So what Edge is actually doing is it looks at
the directory just like a web browser would.
| | 01:06 | So as we add content into our project Edge
is creating folders and putting all of that
| | 01:10 | content inside of the folders.
| | 01:12 | Now we can also manually
add files to our Edge project.
| | 01:16 | So with the myAnimateProject open
let's come back to the Exercise File.
| | 01:20 | Let's go into Chapter_02, let's go into Artwork,
and let's drag a copy of the green_apple artwork
| | 01:25 | into the images directory on
our project on the desktop.
| | 01:28 | Now that we've made this change
let's switch back to Edge Animate.
| | 01:32 | Now back in Edge Animate in the Library panel
we'll see the images directory now has green
| | 01:36 | apple in addition to red Apple.
| | 01:38 | In some instances Edge
might not show you this change.
| | 01:41 | If it doesn't, you can simply close the
Edge Animate file and open it up again.
| | 01:45 | Every time the Edge Animate project opens
it'll go through all of the assets in that
| | 01:49 | folder and find all of the different assets
that have been added into the images directory.
| | 01:53 | Now to remove assets from our project, we
don't actually delete them in the Edge interface.
| | 01:56 | What we can do is come over here and right-
click on any of these items, click Reveal in Finder,
| | 02:02 | and then we can move these to our system trash and
then go back to Edge and Edge will update its assets.
| | 02:08 | So to demonstrate this
I'll select the green_apple.
| | 02:11 | I'll delete that, and I'll close this
images directory, which is really just showing me
| | 02:15 | this directory right here.
| | 02:17 | I'll switch back to Edge Animate. Edge will
warn me that the green_apple file has been deleted.
| | 02:22 | I'll click OK. And then back in the Library
panel we can see under Assets, under Images,
| | 02:26 | we just have the red_apple.png.
| | 02:29 | So as we work with our Edge project, we can
always see all of the assets Edge is using
| | 02:33 | by simply going to our operating system and
looking at the files inside of our project folder.
| | 02:37 |
| | Collapse this transcript |
| Manipulating content in Edge Animate| 00:00 | Now I want to show some of the more advanced
editing capabilities inside of Edge Animate.
| | 00:04 | The first thing I want to demonstrate is the
use of the RGBA color space, which allows for
| | 00:09 | transparent colors.
| | 00:10 | So let's come over here and select
the text that says This is a red apple.
| | 00:14 | Now in the Properties panel
let's come down to the Color panel.
| | 00:17 | This is currently set to Black.
| | 00:19 | Let's click on the color swatch, and what I
want to do here is let's come in here and
| | 00:23 | change the color to white.
| | 00:25 | In addition to the color you'll notice
the Alpha setting down here, set to a 100%.
| | 00:29 | This is actually the
transparent setting used in CSS3.
| | 00:32 | So if I click on this and drag this down, I
can set this down to about 60%, and you'll
| | 00:37 | notice that the text in the
background is now 60% white, or 40% transparent.
| | 00:43 | So now we can see the green background showing
behind the type and we can use the RGBA color
| | 00:47 | space inside of edge anywhere that
we can assign colors to elements.
| | 00:51 | To change text of an element we can simple
double-click and that will bring up the Text
| | 00:54 | dialog box, and in the bottom of the
Properties panel there's also an accessibility option.
| | 00:59 | So with the Text block selected let's toggle
this open. We can give any element on the page
| | 01:05 | a title and this will help with your
search engine optimization and accessibility.
| | 01:09 | We can even assign things a Tab Index.
| | 01:12 | So let's come down here
and assign this Tab Index 1.
| | 01:15 | What this means is if somebody is looking
at your webpage and they hit the Tab tool,
| | 01:18 | the items will highlight in the
browser in the order of the Tab Index.
| | 01:22 | So again this is another accessibility feature of
browsers and if you want to apply the accessibility
| | 01:27 | rules to your project, this is
where you can access those properties.
| | 01:31 | Now the other more advanced editing tool
I want to show you is the Clipping Tool.
| | 01:34 | So I'm going to come up here and select
the red apple that's place on the stage.
| | 01:37 | Now up here in the Tools
panel we have the clip tool here.
| | 01:40 | So I can select this.
| | 01:42 | And similar to the transform the Clip Tool
just give us a really quick way to change
| | 01:46 | the clipping, which is also a
property area in the Properties panel.
| | 01:50 | So I'll come down here and open the Clip area and
you'll see that the Clip area has no property set so far.
| | 01:56 | So what's going to happen is, with the Clip
tool selected, let's come over here to the
| | 02:00 | stage, I am going to move my cursor up here,
I am going to start clicking-and-dragging
| | 02:04 | and changing the clip of that property.
| | 02:06 | Edge will show me with the diagonal lines
here the size of the original image and inside the
| | 02:11 | green area, the size of the clip area.
| | 02:14 | Also notice down here in the clip area all of
these properties have become available as well.
| | 02:18 | So we can see that by dragging that top
line we've actually changed that top to 25.
| | 02:21 | If I click and drag this I can
actually change this from here as well.
| | 02:26 | So the Clip tool gives me a really quick way to
change the same settings that we can change
| | 02:30 | over here in the Properties panel.
| | 02:32 | So I come back to the
stage and click and move this.
| | 02:35 | For those familiar with InDesign
you'll recognize this little symbol here.
| | 02:38 | This allows us to change the position of
the object inside of this cropped area.
| | 02:43 | So if I click and drag this item here
you'll notice over in the Properties panel under
| | 02:48 | background image you'll see that the X
and Y position are actually changing.
| | 02:53 | What I am doing here is modifying the
background position of that element in CSS, but again
| | 02:59 | I can do this in a very visual way
on the stage inside of Edge Animate.
| | 03:03 | Now in addition to just changing the crop
I can come in here and actually change the
| | 03:06 | size of the element inside of the background.
| | 03:09 | As I make changes, you'll see all of the changes are
showing up in the Properties panel under the image area.
| | 03:14 | Again, I can come in here and make these
changes inside of the Properties panel in addition
| | 03:18 | to making them on the stage.
| | 03:20 | So the tools in the toolbar in Edge
Animate will give me quick ways to change multiple
| | 03:24 | properties at once, or if I know the exact
numbers of changes I want to make in the Properties
| | 03:28 | panel, I can use the Properties panel to add
specific numbers to properties I want to modify.
| | 03:33 |
| | Collapse this transcript |
| Applying CSS filters to elements| 00:00 |
In Edge Animate 1.5, we have the ability
to manipulate the way elements look on
| | 00:04 |
stage, using CSS filters.
So it'll follow along.
| | 00:07 |
We're going to go into the exercise
files.
| | 00:09 |
Inside of chapter 2, inside of filters.
And let's open up filters.an.
| | 00:13 |
Inside of this file, to demonstrate these
properties, let's select the apple on the stage.
| | 00:18 |
In the properties panel, let's open up
the filters tab.
| | 00:21 |
Now, inside of here, we have a whole
bunch of controls that we can use to
| | 00:23 |
manipulate the way this apple looks on
stage.
| | 00:26 |
We can change the invert to invert all of
the colors.
| | 00:29 |
We can change the colors by using q
rotate.
| | 00:32 |
We can change the contrast.
If we bring the contrast all the way down
| | 00:36 |
to zero, we can create a silhouette of
that shape.
| | 00:41 |
We can change the saturation.
We can apply a sepia effect.
| | 00:47 |
We can convert the entire image to gray
scale, or any point in between, and we
| | 00:52 |
can change the blur.
Now, once you've made changes to these
| | 00:54 |
properties, you'll notice that the x is
highlightable over here.
| | 00:57 |
If I click on these, what we'll do is
remove these and set these back to the
| | 01:01 |
original state.
Now one thing to note is that most of
| | 01:03 |
these properties will change colors of an
element or an image.
| | 01:06 |
So if you're working with a grayscale
image, you won't be be able to manipulate
| | 01:09 |
all of these properties.
To demonstrate this, lets come over to
| | 01:12 |
the library panel.
Lets drag out a copy of
| | 01:14 |
grayscale_apple.png onto the stage.
With this selected, we'll come over here
| | 01:18 |
to the filters.
Notice, for example, I can change the
| | 01:22 |
contrast But if I come over to the
saturation, I won't see any change, and I
| | 01:26 |
won't see any change on hue rotation
either.
| | 01:30 |
So if you know you want to use some of
these filter effects on your graphics,
| | 01:33 |
make sure that your graphics have colors
inside of them, and then manipulate the
| | 01:35 |
colors using these tools to match your
design.
| | 01:38 |
And lastly, we can apply some of these
effects to text elements as well.
| | 01:42 |
So I'll select this text layer here Come
down into the filters.
| | 01:46 |
And I come down here, for example, and
apply Blur to this.
| | 01:50 |
If I do have a color assigned, let's come
in and change the color to red.
| | 01:53 |
I'll hit Return, and with a color other
than black, I can come in here and change
| | 01:57 |
the Hue Rotation as well.
And one final point I'll bring up, as I
| | 02:01 |
make changes to these elements, if I do
anything that's going to cause a problem
| | 02:04 |
in any browser, you'll notice that Edge
Animate will give me this little warning
| | 02:07 |
signal on the lower right-hand side of
the stage.
| | 02:10 |
If I select this and open it up, it'll
tell me which versions of the browsers
| | 02:13 |
are not currently supporting some of
these CSS properties, so in this case
| | 02:17 |
here I can see that Firefox is going to
have problems with some of these filters.
| | 02:21 |
Now that we are familiar with applying
CSS filters to our elements, we'll talk
| | 02:24 |
about how to animate these properties in
chapter 5.
| | 02:28 |
| | Collapse this transcript |
| Applying CSS shadows to elements and text| 00:00 |
In Edge Animate 1.5 and later, we have
the addition of shadows.
| | 00:04 |
So to follow along, we're in the Exercise
Files, inside of Chapter_02, inside of Shadows.
| | 00:08 |
Open up shadows.an.
So to demonstrate these, let's select the
| | 00:12 |
apple on the stage.
With the apple selected, let's come over
| | 00:15 |
to the Properties panel.
Let's open up the Shadow area.
| | 00:18 |
Inside here we have a toggle switch.
I'm going to flip this on to turn on the
| | 00:22 |
shadow, and then you'll see the shadow
being applied to the object.
| | 00:26 |
One thing you might notice right away is
that the the shadow is being applied to
| | 00:29 |
the box model, not the transparency of
the PNG file that's inside of this graphic.
| | 00:34 |
So over here on the x property, let's
just grab the x and scrub this a little bit.
| | 00:38 |
This controls the x offset.
The y controls the vertical offset.
| | 00:44 |
We can control the blur, the spread.
The spread controls how many more pixels
| | 00:51 |
are being added to the original shape.
So if our graphic is 100 pixels and we
| | 00:55 |
set the spread to 17, we'll get 117 as
opposed to the original 100.
| | 01:00 |
And then lastly under color.
Let's click on the color swatch.
| | 01:03 |
We can control the transparency with the
slider here on the far right, which
| | 01:06 |
controls the alpha setting.
Then the individual color by coming in
| | 01:10 |
here and picking the color.
Now the fact that the shadow is applied
| | 01:13 |
to the box model, is also true for SVG
graphics.
| | 01:17 |
So in the library panel, let's drag out
star.svg, drag this on the stage.
| | 01:22 |
Lets come over to our shadow area.
Let's switch that on.
| | 01:26 |
And you'll see that when we apply a
shadow to an SVG, we get the same effect
| | 01:29 |
as applying a shadow to a PNG file.
Now shadows with text will behave a
| | 01:32 |
little differently because the browsers
do understand the letter shape of the
| | 01:36 |
characters here.
So with the text object selected, let's
| | 01:39 |
open up the shadow.
Let's turn this on, and now you'll notice
| | 01:42 |
that the shadow now conforms to the
individual letters.
| | 01:46 |
So we are getting a transparent drop
shadow effect based on these letter shapes.
| | 01:50 |
And now that we're familiar with how to
apply drop shadows to elements, we'll
| | 01:53 |
talk about how to animate this property
in Chapter Five.
| | 01:56 |
| | Collapse this transcript |
| Creating CSS gradients| 00:00 |
In Edge Animate 1.5 and later, we have
the ability to create gradients.
| | 00:04 |
So to follow along, let's go into the
Exercise Files, inside of Chapter 2,
| | 00:07 |
inside of Gradients, open up
gradients.an.
| | 00:09 |
To demonstrate how to create a gradient,
we're going to come over here to the
| | 00:14 |
Rectangle tool, in the Tools.
Come down to the Stage.
| | 00:19 |
Let's click and drag your rectangle.
Once we have this drawn, let's come over
| | 00:22 |
here to the Color area inside of the
Properties panel.
| | 00:24 |
This middle swatch here is the Gradient
Grader, let's click on this.
| | 00:29 |
Inside of this dialog box, on the left
hand side, we see two stop points.
| | 00:32 |
If I click on one of these, this will
activate a color for the gradient.
| | 00:35 |
We'll see immediately on the stage, a
gradient's being created.
| | 00:39 |
With this top one selected, let's come in
here and define medium green.
| | 00:46 |
For the moment, I'll leave the bottom
white.
| | 00:48 |
I'll hit Return, this creates a gradient.
I want to put this behind the apple.
| | 00:52 |
Let's come up to the Modify menu, choose
a Range, and then send to back.
| | 00:57 |
Now, as soon as we create a gradient,
we'll see a warning here, in the lower
| | 01:00 |
right hand side.
This is Edge Animate's way of telling us
| | 01:03 |
that there's a browser that will have
problems with this.
| | 01:05 |
If we open this up we can see that CSS
gradients are not rendered by IE9.
| | 01:10 |
We'll close this.
So what we're going to do is come over to
| | 01:12 |
the background color.
And what we're going to do is come over
| | 01:14 |
to the background color.
And what we're going to do is come in
| | 01:16 |
here an just select a solid color.
So, that IE9 will show us the solid
| | 01:20 |
green, where other browsers will show us
the gradient.
| | 01:23 |
Now, another great feature of gradients
is that they can be semi transparent.
| | 01:26 |
To demonstrate this, let's come over to
the Library panel.
| | 01:29 |
Under images, lets grab wood.jpg.
Let's drag this to the lower left hand
| | 01:34 |
corner of the stage.
With it selected, Modify menu.
| | 01:38 |
Let's send it to the back.
Next, select the gradient on top.
| | 01:43 |
Let's first come over to the background
color.
| | 01:45 |
Let's select this.
Let's come over to the Alpha slider.
| | 01:49 |
Let's drag this all the way down, hit
Return.
| | 01:52 |
Next, let's go into the gradient.
Let's select the top gradient color.
| | 01:56 |
We'll set this to white.
Then come over to the Alpha slider.
| | 01:59 |
Drag this all the way down to zero.
Select the bottom color.
| | 02:04 |
Let's come in here and select a reddish
brown that matches this wood background.
| | 02:11 |
Add a little bit of orange to this, bring
this down to here.
| | 02:15 |
On the Alpha slider let's drag this down,
bring this to around 50%.
| | 02:20 |
And I can tell this is 50 % by looking at
the RGBA settings here, we see red,
| | 02:24 |
green, blue, and then the last color here
is the alpha.
| | 02:26 |
So 0.49 is close to 50%.
Now that's in place, I'll hit Return.
| | 02:31 |
So what the semi-transparent gradient
does, is allows me to add a little bit of
| | 02:34 |
depth to elements that are already on my
stage.
| | 02:37 |
So to see the difference, I'll come in
here and just close this down a little bit.
| | 02:41 |
And you can see the JPEG image here, and
what the JPEG looks like with a
| | 02:44 |
semitransparent gradient here.
So, gradients give us another design
| | 02:48 |
element that we can use in our
compositions, and semitransparent
| | 02:50 |
gradients give us a way to add depth to
elements already in our composition.
| | 02:54 |
| | Collapse this transcript |
|
|
3. Preparing Content for Use in Edge AnimatePreparing content with Adobe Photoshop| 00:00 | The first thing we're going
to do is create some slices.
| | 00:02 | So let's open up the file sliced_apples.psd,
and a feature I use all the time in Photoshop
| | 00:08 | is the Slicing Tool.
| | 00:10 | You can find the Slice Tool by clicking and
holding on the Crop Tool, coming down and
| | 00:14 | choose the Slice Tool.
| | 00:15 | Now I have one slice already created.
| | 00:18 | If you hold the Command or Ctrl
key, double-click on the slice.
| | 00:22 | This will bring up the Slice Options dialog
box for the slice that I already created and
| | 00:26 | I will name this red_apple. Let's click OK.
| | 00:29 | With the Slice Tool selected let's click
and drag a slice around the green apple.
| | 00:34 | Once you've drawn the slice double-click inside the
Slice Options, let's name this green apple, click OK.
| | 00:40 | Now that we have two slices defined on the
canvas let's come over to the Layers panel,
| | 00:44 | let's turn off the background layer.
| | 00:47 | Next let's come over to the File menu,
come down and choose Save for Web.
| | 00:51 | If you're using earlier versions of Photoshop this
menu item will say Save for Web & Devices. Select that.
| | 00:58 | Inside of this dialog box here we can
click on the individual slices by selecting the
| | 01:02 | Slice Tool on the upper left-
hand corner of the dialog box.
| | 01:05 | With the slice selected in the right-hand side,
we can pick the file format we want to save out as.
| | 01:10 | So let's change this from a GIF to PNG-24.
| | 01:14 | This will give us a PNG file with 16
bits of color and 8 bits of transparency.
| | 01:18 | Let's select the green apple, set that
to PNG-24, then come down and choose Save.
| | 01:24 | The next dialog box will ask us
where we want to save our project.
| | 01:27 | Let's come up to the myAnimateProject on
the desktop, choose the images directory, and
| | 01:32 | under Slices make sure
All User Slices is selected.
| | 01:35 | This tells Photoshop to only save out the
slices that we drew and all the other slices
| | 01:39 | that it used to create the rest of the
canvas are going to be ignored. Then click Save.
| | 01:45 | Back to our operating system, inside of the
images directory we'll see the green_apple.png
| | 01:49 | and the red_apple.png.
| | 01:51 | So each of these individual graphics
was created from one Photoshop file.
| | 01:56 | Let's come back to Photoshop.
| | 01:57 | Let's close our file.
| | 01:58 | And you can choose Save and all the
slice data will be saved with your file.
| | 02:03 | Next let's come back to the operating system.
| | 02:04 | Let's open animated_apple.psd.
| | 02:07 | Another file format that Edge
Animate supports is animated GIFs.
| | 02:11 | So to get to the Animation panel let's open up
the Window menu and come down and choose Timeline.
| | 02:16 | If you're using earlier versions of
Photoshop, this panel will be called Animation.
| | 02:21 | Now with the Timeline panel
open select the very first frame.
| | 02:25 | Let's come over to the Layers panel.
| | 02:26 | Let's turn on the background layer
just so we can see the different states.
| | 02:29 | Now as we click through the different states
you'll see that each frame of our Animation
| | 02:33 | panel will show the visibility set for
different layers and we can also see a representation
| | 02:38 | of the artwork up in the canvas area.
| | 02:42 | Underneath each frame we can see the delay.
| | 02:43 | So the delay is set to .1 seconds for all
of these and a 3 second delay on the first
| | 02:48 | one, and the looping setting
underneath is set to Forever.
| | 02:53 | So with the first frame selected
let's hide the black background layer.
| | 02:56 | Now that we can see all frames contain transparency,
let's come up to the File menu, let's choose Save for Web.
| | 03:03 | Inside this dialog box make sure we
have the GIF file format selected.
| | 03:06 | For the Matte color come down and choose Black.
| | 03:10 | We want to have the edges of
the PNG, matte to a black color.
| | 03:14 | You can also come down here and play
the animation inside this dialog box.
| | 03:17 | It'll be little difficult to see, but you
can actually see the highlight playing in
| | 03:22 | this upper right hand
corner here, and let's hit Save.
| | 03:28 | From the Save As dialog box
let's go into myAnimateProject.
| | 03:30 | Let's choose the images directory and then hit Save.
| | 03:34 | Now we'll save our Photoshop file and close it.
| | 03:37 | Let's come back to the project folder on
the desktop and open up the myProject.an file.
| | 03:42 | Now inside of our Library panel we can see the
green_apple.png, we can see the red_apple.png,
| | 03:46 | and even animated GIF.
| | 03:48 | Now a really nice feature of Edge Animate
is when we put an animated GIF on the stage
| | 03:52 | we can actually see the animation play.
| | 03:55 | So with nothing selected, and we have the
stage showing up in the Properties panel, let's come
| | 03:59 | over here to the background color, let set
that to black, let's come over to the Assets
| | 04:04 | panel, and let's drag the
animated gif apple on the stage.
| | 04:08 | So one of things that Edge will do as we have
an animated GIF on the stage it will actually
| | 04:12 | play the animated GIF
while we're in our Design view.
| | 04:15 | So this gives us the ability to see what the
animated GIF looks like and how it plays as
| | 04:20 | we use it in our compositions.
| | 04:21 |
| | Collapse this transcript |
| Preparing content with Adobe Illustrator| 00:00 | So very similar to tools like Adobe Fireworks and
Adobe Photoshop, Illustrator has a slicing tool as well.
| | 00:06 | To see the slice I have already created, come up
to the View menu, come down and say Show Slices.
| | 00:11 | Once you show the slices, you will
see a slice around the red apple.
| | 00:14 | Let's come over here to the Toolbar.
| | 00:17 | Let's click and hold on the Slice Tool,
select the Slice Tool and we are going to click and
| | 00:21 | draw a slice around the green apple.
| | 00:23 | Now, to change the Slice Properties, with
the slice selected, come up to the Object
| | 00:28 | Menu, come down to Slice,
and go to Slice Options.
| | 00:32 | Here, we are going to name
this green_apple, then click OK.
| | 00:39 | That's going to be the name of this
individual slice when we save this out.
| | 00:42 | Now, the idea behind slicing is that we can
create these slices on one large canvas inside
| | 00:47 | of Illustrator, and then when we use the Save
for Web, we will get individual graphics that
| | 00:51 | contain all of the art
inside the individual slices.
| | 00:54 | So, to save these out, we're going to
choose the File menu, come down to Save for Web.
| | 01:01 | Inside this dialog box, in the upper left-
hand corner with the Slice Tool selected, let's
| | 01:04 | grab the first slice.
| | 01:06 | In the upper right-hand corner here,
make sure we have PNG-24 selected.
| | 01:10 | This will give us 16-bit color with 8 bits of
transparency, which will give us semi-transparent pixels.
| | 01:16 | Select the green apple.
| | 01:18 | Let's come up here, and
let's assign this PNG-24 as well.
| | 01:20 | Now that both of these are assigned, under the Export Menu,
let's choose All User Slices and then let's hit Save.
| | 01:29 | From the Save As dialog box,
let's choose myAnimateProject.
| | 01:33 | Let's select the images
directory, and then hit Save.
| | 01:36 | Now, we can close our Illustrator file.
| | 01:38 | You can save this if you want, and
the slices will be saved with that file.
| | 01:41 | Back to our operating system, inside of our
Project folder, let's open up the images directory.
| | 01:45 | Inside of the images directory, we'll
see green_apple.png and red_apple.png.
| | 01:49 | So now with our two graphics created,
let's come back to our Exercise Files inside of
| | 01:54 | Chapter_03, inside of Using Illustrator.
| | 01:57 | Let's open up background.ai.
| | 01:59 | Now, another format supported inside of Edge
Animate is SVG, or Scalable Vector Graphics.
| | 02:04 | So what we're doing here is creating a
really large graphic for the background inside of
| | 02:08 | Illustrator, and we are going
to save this out as an SVG file.
| | 02:11 | With this file open, if you come over here to
the Artboard settings, click on the Artboard,
| | 02:16 | and then look at the Tool Panel at the top,
| | 02:18 | we'll see that the artboard in Illustrator is
set to 1500 pixels wide by 1500 pixels tall.
| | 02:23 | If we were to save this out as a GIF or a PNG or
even a JPEG, we would get a really huge file size.
| | 02:28 | However, saving this out as SVG is going to
give us a file size that's under 2 kilobytes.
| | 02:33 | So we are going to get a really small file, and
still be able to get a graphic that's 1500x1500 pixels.
| | 02:39 | Now, to create an SVG from Illustrator,
let's come up to the File menu, let's choose Save
| | 02:43 | As, from the Desktop choose myAnimateProject.
| | 02:48 | Let's select Images, under Format, let's
come down and choose SVG. Let's hit Save.
| | 02:55 | Under the SVG Options, let's choose SVG 1.1.
| | 02:59 | Next, under Type, let's come down
and choose SVG and then simply hit OK.
| | 03:04 | Now, let's close the file in Illustrator,
let's come back to our Desktop, and let's
| | 03:08 | open up the myProject.an file in Edge Animate.
| | 03:12 | So, inside of Animate, in the Assets
Panel, we will see the Images directory.
| | 03:16 | We can see the red_apple.png, the
green_apple.png, and the background.svg.
| | 03:20 | In order to use any of these graphics
including the background.svg, we can simply grab these
| | 03:25 | and drag and drop them right inside
of the main stage, inside of Edge.
| | 03:28 | So here is that really
large graphic we created in SVG.
| | 03:32 | So again, the file size is really tiny, but
we get to use this giant graphic with very
| | 03:36 | little file size inside of Edge Animate.
| | 03:39 | Now, before you use SVG in your project, you want
to make sure that the targeted browsers support SVG.
| | 03:45 | So there's a great website called caniuse.com,
and they have a bunch of different technologies
| | 03:50 | and different browsers that are supported,
and one of the sections is on SVG and HTML5.
| | 03:55 | So again, I would definitely recommend
checking out the specific browsers you want to target
| | 03:58 | before using the SVG format.
| | 04:00 |
| | Collapse this transcript |
| Preparing content with Adobe Fireworks| 00:00 | From the Fireworks Splash Screen,
let's come over here and choose Open.
| | 00:03 | Let's come over to the Exercise
Files>Chapter_03>Using Fireworks.
| | 00:08 | Let's open the sliced_apples.fw.png.
| | 00:13 | So here, we want to create some slices
where we have a large canvas inside of Fireworks
| | 00:17 | and I want to create individual pieces of art.
| | 00:19 | So I have one slice
that's already created here.
| | 00:21 | When I select this item, we can see that this
is actually named red_apple in the Web Layer
| | 00:25 | inside of the Layers Panel for Fireworks.
| | 00:28 | So let's create a second slice.
| | 00:30 | Over in the Tool Panel, under the Web grouping,
let's come over here and select the Slice object.
| | 00:35 | Let's come over to the stage.
| | 00:37 | Let's click and drag and create
a slice around the green apple.
| | 00:39 | Now, with this slice still selected, let's come over
to the Web layer, let's double click that Slice label.
| | 00:41 | Now to set the type of file that's going to
be saved out, let's come over here and open
| | 00:46 | Let's name this green_apple. Then, hit Return.
| | 00:54 | the Optimize Panel.
| | 00:56 | I am actually going to grab this panel
and just drag it out of the interface.
| | 01:00 | Now, with the slice selected, we can
see that this is being set to a GIF file.
| | 01:04 | Let's change this to a PNG 8.
| | 01:06 | Now, one of the nice features in Fireworks is that
a PNG 8 can also contain semi-transparent pixels.
| | 01:11 | If you use Illustrator or Photoshop, this is a
feature that's not available in those applications.
| | 01:15 | So, this means that my PNG file will be much
smaller, but I will still maintain my transparent edges.
| | 01:20 | You also want to make sure to only use
this if you have a graphic that doesn't have a
| | 01:24 | lot of tonal ranges because we only
have 8 bits of color instead of 16.
| | 01:27 | But, since these graphics are actually
illustrations, the 8-bit color will actually represent the
| | 01:32 | graphics pretty well.
| | 01:33 | If I come over here and select the red apple,
you can see I've already set that to PNG 8.
| | 01:36 | So now with these slices created,
let's come up to the File menu.
| | 01:40 | We are going to choose Export.
| | 01:43 | Inside the Export dialog box, first
let's come down to the Export dropdown menu.
| | 01:47 | Let's change that to Images Only.
| | 01:50 | Make sure Export Slices is selected.
| | 01:52 | Let's uncheck Selected Slices Only and
uncheck Include Areas without Slices.
| | 01:57 | Next, let's go into the myAnimateProject.
| | 01:59 | Let's choose the images
directory, and let's hit Export.
| | 02:04 | Let's close our Fireworks file.
| | 02:05 | Let's choose Save since Fireworks will
save all of the slice data with that file.
| | 02:10 | Let's come back to the operating system.
| | 02:12 | And when I open the Images directory, we
will see red_apple.png and green_apple.png.
| | 02:17 | Now that we have our slices created, let's
come back to Fireworks, let's choose Open,
| | 02:22 | let's go into the Exercise Files>Chapter_03>Using
Fireworks and let's open the animated_apple.fw.png.
| | 02:29 | Now here, we have an animated GIF
that's being set up inside of Fireworks.
| | 02:33 | So, I have the Optimization Panel open here.
| | 02:35 | I am going to move this over to the left.
| | 02:37 | I am also going to come over here and
open the Sates Panel and just drag this out.
| | 02:41 | Now, the States Panel allows me to
capture different states of the Layers Panel.
| | 02:45 | So, if I come over to State 4 for example,
we can see that shine 3 is showing here.
| | 02:49 | And as I step through these, there is an
animation that's happening over here on the right-hand
| | 02:53 | side of the apple, this little shine.
| | 02:55 | This might be a little hard to see here, but
we can see this pretty clearly inside of Edge
| | 02:58 | Animate once we put this on a dark background.
| | 03:00 | So, in the Optimization Panel here, we have
Animated GIF set to the file type we are going to create.
| | 03:05 | We have a Matte color here.
| | 03:07 | Let's come over here and set the Matte color to Black
since we are going to put this on a dark background.
| | 03:12 | Now let's save this file.
| | 03:13 | Let's choose File>Export.
| | 03:15 | From the Desktop, go into myAnimateProject,
select the images directory, and then hit Export.
| | 03:21 | Let's close our Fireworks
file. You can save this.
| | 03:23 | And back to our operating system, now we can see
shiny_apple.gif is created inside of here as well.
| | 03:29 | So now that we have the artwork created, let's come
in to our myProject.an file inside of Edge Animate.
| | 03:34 | So, inside of Edge Animate, inside of the
Assets in the images directory, we can see
| | 03:38 | green_apple, red_apple, and shiny_apple.
| | 03:40 | Now, a nice feature of Edge Animate is
when we bring an Animated GIF on to the stage,
| | 03:45 | it will actually play the Animated
GIF while we are in our Design View.
| | 03:49 | So let's come over here to the Stage property.
| | 03:51 | Let's set the background
color of the stage to black.
| | 03:54 | Then let's come over here to our Assets Panel
and let's grab shiny_apple.gif and just drag
| | 03:59 | it on to the stage.
| | 04:00 | Now, with the Animated GIF on the stage,
we can see that the Animated GIF is actually
| | 04:05 | playing while we are in the Edge interface.
| | 04:07 |
| | Collapse this transcript |
| Preparing content with other graphics tools| 00:00 | Now, since Edge Animate works with standard
web graphics, we can use any tools to create
| | 00:05 | standard web graphics.
| | 00:06 | So, any application that you use that can
create a PNG, a JPEG, SVG, GIF, or Animated
| | 00:12 | GIF can be used as a tool to create assets
that you can bring into Adobe Edge Animate.
| | 00:17 | And in any of these cases, you can add an
images directory to your Edge Project or you
| | 00:21 | can use the plus sign in the Assets area inside
of the Library Panel to import those graphics
| | 00:26 | into your Edge project.
| | 00:27 |
| | Collapse this transcript |
|
|
4. Composing Layouts in Edge AnimateCreating a composition| 00:00 | Now, for this composition, I have
the Stage size set to 800x400 pixels.
| | 00:04 | That doesn't leave me a lot of room inside
here to work with the size of the recording.
| | 00:08 | So I am going to come in here
and switch the View down to 75%.
| | 00:12 | Now, over here in the Library Panel in the
Assets section, we can see the images directory,
| | 00:17 | and all of the graphics in here.
| | 00:18 | So, let's start by grabbing the wood.jpg file
and just drag and drop this right on the stage.
| | 00:23 | You'll notice that this
graphic is much wider than the stage.
| | 00:25 | We are actually going to be using some responsive
design techniques on this later on in the course.
| | 00:30 | However, for right now, we are going to drag
this down to the bottom and align it to the
| | 00:33 | left and bottom area, and Edge actually has
smart guides and the Snap is turned on automatically,
| | 00:40 | so the graphics will sort of stick
to the corners when we get close.
| | 00:43 | Now, with the floor in place, let's
come over here, let's grab background.svg.
| | 00:46 | Let's drag this in.
| | 00:49 | This is a graphic we got from Illustrator.
| | 00:51 | It's 1500 pixels by 1500 pixels, but it's
an SVG file, so the file size is really tiny.
| | 00:56 | So, I am going to move this over here.
| | 00:59 | Now, I want to change the layering of these
elements, and I have a few ways that I can do that.
| | 01:04 | First, if I look up in the Elements Panel here,
I can see the order that Edge is creating,
| | 01:08 | all of the HTML elements.
| | 01:10 | So I can simply grab the background layer
here, and just drag this down to be under
| | 01:15 | the wood layer, and we can
see that change take effect.
| | 01:18 | We can also modify artwork that's selected
by coming up to the Modify Menu, coming down
| | 01:22 | to Arrange, and move items forward
and backwards using the Menu items.
| | 01:26 | There are also keyboard shortcuts as well.
| | 01:30 | So back on the stage, I have
these items exactly where I want them.
| | 01:32 | I am going to come down to the Timeline area,
and I am going to click on the padlock here
| | 01:37 | to lock the background and
the wood layers in place.
| | 01:40 | This way, I can no longer select these items,
and as we build the rest of the composition,
| | 01:44 | I won't accidentally move these.
| | 01:45 | Next, we are going to put the basket together.
| | 01:47 | So, let's come over to the Assets.
| | 01:50 | Let's grab basket_bottom.png.
| | 01:53 | Let's move this down to about right here.
| | 01:56 | Let's come back, let's choose basket_back.
| | 01:59 | We'll place this about right here for now.
| | 02:02 | Let's come over and grab basket_front.
| | 02:05 | Let's move that into place.
| | 02:07 | Now, we can use our arrow keys to get really
precise movements, or again, you can go into
| | 02:11 | the Properties Panel and
actually put-in specific numbers.
| | 02:16 | So I want to move those into place so
that they look like they match perfectly.
| | 02:18 | I am going to select the first item, and the
second item, and we are going to move these
| | 02:23 | down so that they sit on
top of the background_bottom.
| | 02:25 | Again, I will use my arrow
keys to sort of position these.
| | 02:29 | Next, let's come over and grab
basket_handle_right, drop this on the stage.
| | 02:34 | And again, we'll move this around so that
it matches the artwork in the background,
| | 02:38 | and then let's grab basket_handle_left.
| | 02:41 | Now, I can see I got a little bit of space
here, so let's grab both handles, and just
| | 02:47 | let's arrow that down a little bit.
| | 02:49 | So now that I have all five items for the
basket in place, let's come down to the Timeline.
| | 02:53 | I am going to grab the very first item, hold
the Shift key, grab all of the basket items
| | 02:58 | and now I can move all of
these on the stage together.
| | 03:01 | Now that I have those where I want
them, let's unselect those items.
| | 03:04 | Let's come back and let's
grab the chalkboard.png.
| | 03:06 | We will move this to about right here.
| | 03:11 | And then lastly, let's come
over and grab the chain.png.
| | 03:15 | Let's move that into place.
| | 03:17 | Let's align the bottom of the chain
with the little hole in the chalkboard.
| | 03:20 | I've got the first one in place.
| | 03:23 | Let me select the first one.
| | 03:24 | I am going to hold the Option key on Mac or
Alt on Windows, and the Shift key, I am going
| | 03:28 | to drag out a copy and
position it over to the right.
| | 03:32 | So now I have two instances of
the chain graphic on the stage.
| | 03:36 | So, as you can see, the way that we
construct compositions inside of Edge is very similar
| | 03:40 | to tools like InDesign, Illustrator,
Photoshop where we can use things like Option+drag and
| | 03:45 | get Smart Guides to position items around,
and have them snap to the corners of the pages
| | 03:49 | or snap to each other.
| | 03:50 |
| | Collapse this transcript |
| Adding and arranging elements| 00:00 | So inside of our composition, we have all
of these elements that we put on the stage.
| | 00:03 | We have constructed this
basket with five different pieces.
| | 00:06 | This way, we can get the illusion of a three-
dimensional shape and use layering to make it look like
| | 00:11 | we are going to put apples inside the basket.
| | 00:12 | Now, the first item we are going to add to
the stage is going to be one of the red apples.
| | 00:16 | So let's come over to the Assets.
| | 00:18 | Let's grab red_apple.png,
drag this onto the stage.
| | 00:21 | You will notice right away in my composition,
the apple is behind a bunch of other layers.
| | 00:25 | So, with the apple selected, let's go up to the
Modify Menu, choose Arrange, and then Bring to Front.
| | 00:31 | That will bring the apple
all the way to the front.
| | 00:33 | In the Timeline Panel, you'll also notice
that red_apple now shows up at the very top
| | 00:37 | of the timeline, and we can actually use the
timeline to click and select individual items.
| | 00:43 | So, with red_apple selected, I am going to move
this down, so that it just overlaps the chalkboard.
| | 00:48 | I am going to hold the Option key, or Alt on
Windows, click and drag, and create a second apple.
| | 00:54 | So this apple, I want to make it look
like it's going to be inside the basket.
| | 00:58 | I also want to make sure I
am on the Transform Tool.
| | 01:00 | That will give me the ability to scale,
rotate, and resize this image quickly.
| | 01:04 | So, let me grab this.
| | 01:06 | Let's move it over here.
| | 01:07 | I am going to scale the apple down a little
bit, holding the Shift key to constrain my
| | 01:12 | proportions, and I want to make it
look like the apple is inside the basket.
| | 01:15 | So I am going to use the keyboard shortcuts, use
Command or Ctrl, and the left-bracket to move this back.
| | 01:22 | Each time I click this, you will see down
in the Timeline Panel, the red apple is now
| | 01:26 | behind the handle_left.
| | 01:27 | So, I will move this back two more times,
and now we will see that the red apple is
| | 01:31 | now behind the front of the basket, but I
also need it to look like it's in front of
| | 01:35 | the left-hand side of the handle.
| | 01:36 | So, I am going to come back here, click on
the handle using Command+[ or
| | 01:42 | Ctrl on Windows, I am going to move the
left side of the handle back so that the apple
| | 01:46 | is now in front of both of those.
| | 01:47 | So now I get the illusion that the
apple is actually inside of the basket.
| | 01:51 | So, if I select the apple and move this around,
you will see that it's still behind the right-hand
| | 01:55 | side of the handle but in front of the left-
hand side, and it's in front of the back of the
| | 02:00 | basket but behind the front of the basket.
| | 02:03 | We can see where this breaks down, if I move
this over here to the left, or up above where
| | 02:08 | we have the two parts of the handle connected.
| | 02:10 | But as long as I stay within these areas, I
get the illusion that the apple is actually
| | 02:14 | inside of this basket.
| | 02:16 | So let's do a few more things.
| | 02:17 | I am just going to rotate this a
little bit, move it down into place.
| | 02:22 | Let's Option+drag another copy of the apple.
| | 02:24 | We will rotate this a little bit
to the right, move this over here.
| | 02:29 | Now, let's come over to our Assets Panel.
| | 02:32 | Let's grab a copy of green_apple.png,
scale this down a little bit.
| | 02:39 | Let's move this over into place, and I'll use my
Command+[ to move that apple to the back.
| | 02:44 | I can also use my arrow keys to move this down.
| | 02:49 | Hold the Option key, drag
a copy of the green apple.
| | 02:52 | Just move this to the front here
and just rotate this a little bit.
| | 02:56 | Now, I am going to use Command+] to bring this forward.
| | 03:00 | I want it in front of the apple on the right,
but I want this one to be in front of that.
| | 03:05 | So let's select this.
| | 03:06 | Let's move this forward.
| | 03:08 | So Edge allows me to reuse
individual graphics throughout my composition.
| | 03:12 | Our Transform Tool allows us to rotate and
manipulate things on the stage, and then the
| | 03:16 | arrangement capabilities allows us to pick
where the individual items fall on the stage,
| | 03:21 | giving us rather complex control over the
stacking order of the elements on our page.
| | 03:25 |
| | Collapse this transcript |
| Adding text to your composition| 00:00 | So here we have a composition created and we
want to add a text block over top of the chalkboard.
| | 00:05 | So first, we are going to come up to the
Text Tool, then we are going to come down in the
| | 00:09 | stage and click and drag and draw a text
block that's the size of the chalkboard area.
| | 00:14 | As soon as I let go, we'll get a dialog box
inside of Edge Animate with a Text property.
| | 00:17 | What we are going to do in
here is type, An apple a day... .
| | 00:24 | You can see right away the text
is actually being applied here.
| | 00:27 | We can't add text directly to the stage, all
text that we set inside of Edge Animate has
| | 00:31 | to be set inside of this dialog box.
| | 00:33 | So let's click to close that.
| | 00:35 | With the text box selected, let's come
over here and change some of the properties.
| | 00:39 | For the color, let's come in
here and set this to white.
| | 00:42 | Let's also come over here to the Alpha
setting and let's drag this down to about 80.
| | 00:46 | That will give us some semi-
transparency on the text. Let's click away.
| | 00:51 | Next, let's come over to the Type Size, let's
click and drag this and as we drag this slider
| | 00:56 | up, we can see the type is actually rearranging
inside of the bounding area of the type block we set.
| | 01:02 | So let's keep this set about right here.
| | 01:05 | Once we have the size that we like,
let's come over and resize the box.
| | 01:08 | I am just going to move this down a little
bit so the type doesn't get too close to the
| | 01:11 | edges of the blackboard.
| | 01:14 | Then I'll use my Arrow keys to
just sort of move this into place.
| | 01:19 | Now over here for Font, I just have Arial,
Helvetica, these are just website fonts, later
| | 01:24 | on in the course, we'll talk about how you
can add custom fonts into Edge Animate and
| | 01:28 | then we can choose some fonts from online
services that look a little bit more like handwriting.
| | 01:33 | So now with all of these elements in place, we
have just completed creating a rather complex
| | 01:37 | composition inside of Edge Animate.
| | 01:39 |
| | Collapse this transcript |
|
|
5. Animating ElementsActivating properties to animate| 00:00 | To begin animating elements inside of Edge
Animate, we're going to work with some projects
| | 00:04 | that I have already set
up in the Exercise Files.
| | 00:06 | And as I mentioned earlier, if you're familiar
with other animation tools like After Effects
| | 00:11 | or Flash or Sencha Animator, I have some
dedicated chapters at the end of this course that show
| | 00:16 | you the specific differences on migrating
from workflows and those other tools into
| | 00:20 | the workflow for Edge Animate.
| | 00:21 | Now, all I've set up in here is just a blank
stage set to 500x300 pixels, and I have two
| | 00:26 | images in the Assets folder.
| | 00:28 | So, let's come over here and grab the
red_apple.png, and just drag to the stage.
| | 00:33 | Let's position it over to
the lower-left hand side.
| | 00:36 | Now, once we drag something to the stage,
we can see that that item actually shows up
| | 00:39 | in the timeline as well.
| | 00:40 | So, I can see my image object
showing up down here in the timeline.
| | 00:43 | And what we're going to do here is let's
animate the X property or the horizontal.
| | 00:47 | Now, if we come over to the Properties Panel,
and I come over here to the X property, I
| | 00:52 | can grab this and slide this back
and forth and change that value.
| | 00:55 | So, with this over toward the left, what I'm
going to do is click on this little keyframe
| | 00:59 | right here right next to the X property.
| | 01:02 | When I click on this and we come back down
to the Timeline Panel, we'll see that we have
| | 01:05 | a white diamond keyframe showing up here.
| | 01:07 | This tells Edge that we want to pay attention to
that particular property at this point in time.
| | 01:12 | And the playhead is set to 00.
| | 01:13 | Now, what we're going to
do is grab the playhead.
| | 01:16 | Let's drag this out to 1 second, and in
the Timeline Panel next to the left property,
| | 01:21 | I can add another keyframe.
| | 01:22 | So, I can either do that
here or in the Properties Panel.
| | 01:25 | So I'll click a second keyframe which
will give me our second keyframe here.
| | 01:29 | Let's come up to the stage.
| | 01:30 | Let's grab the apple.
| | 01:31 | I'm going to hold the Shift key and
just drag this over toward the right.
| | 01:34 | As soon as I let go, notice the keyframe turns
from being a solid diamond to a hollow diamond.
| | 01:40 | This indicates that there has been a
change in the position of the Left or X property
| | 01:44 | along the timeline, but we
don't have a transition in place.
| | 01:47 | So, if we grab the playhead, the apple will
snap to the first position, and it will hold
| | 01:53 | this position as we move into here until
the playhead gets to the second keyframe, and
| | 01:57 | then it will snap into place.
| | 01:59 | So, to create an animation, we're going to
come down here, select this keyframe, right-click
| | 02:04 | on it, and come down and
choose Create Transition.
| | 02:08 | Once we do that, Edge will now create all
of the intermediate frames that it needs to
| | 02:12 | create an animation from the
first keyframe to the last keyframe.
| | 02:15 | Now, if we grab the playhead and drag it back
and forth, we can see the animation was created.
| | 02:20 | You can also preview this by coming over
here in the Timeline Panel in the upper-left of
| | 02:23 | that panel, clicking on the Play button.
| | 02:27 | Now, we can see we have our animation in place.
| | 02:30 | So now that we have a simple animation in place,
let's add a few more properties to this animation.
| | 02:35 | Let's grab the timeline playhead, bring it
back to the 00 mark, let's come up here to
| | 02:39 | the Properties Panel, and in the very
top area here, let's activate Opacity.
| | 02:43 | I am going to click on this keyframe item,
down in the Timeline Panel, Opacity is now
| | 02:48 | another property that Edge Animate will
pay attention to for that particular object.
| | 02:51 | Right now, it's set to 100%.
| | 02:54 | Let's grab the opacity.
| | 02:55 | Let's just scrub that down to 0.
| | 02:58 | Let's grab the playhead,
drag it back to 1 second.
| | 03:03 | Under Opacity, in the Timeline,
let's click the Add keyframe.
| | 03:06 | With the keyframe added, let's come
over here, and let's scrub this up to 100%.
| | 03:12 | We'll see that keyframe now opens up to
look like a hollow keyframe like we saw before.
| | 03:16 | Let's select it, right-click,
and choose Create Transition.
| | 03:20 | Now, if we scrub the timeline, we are
animating the x value and the Opacity.
| | 03:24 | So now we have two elements
that are animating on this object.
| | 03:28 | Let's bring our playhead back to 00,
and let's add in one more property.
| | 03:31 | So let's come up here and activate the Y-axis.
| | 03:36 | Let's grab the apple artwork, which
is now transparent. We'll move it up.
| | 03:41 | Let's move the playhead back out to 1 second,
activate the Top property, which is the Y-axis.
| | 03:47 | We'll move this down to
approximately the position it was before.
| | 03:53 | That keyframe opens up.
| | 03:54 | Let's click it, right-click,
say Create Transition.
| | 03:59 | Now we're animating three properties: the X and the
Y, which give us a diagonal movement, and the Opacity.
| | 04:05 | Click Play to preview the animation.
| | 04:08 | Now, when you start looking at the Properties
Panel, you'll notice that almost every property
| | 04:13 | here has the ability to
keyframe individual items.
| | 04:16 | Anytime you see these little keyframe indicators,
this lets you know that Edge can record those
| | 04:21 | particular properties and then
animate each one of these over time.
| | 04:24 | Now, in this movie, we did
what we call manual animation.
| | 04:28 | We manually set the keyframes
and manually set the transitions.
| | 04:31 | Next, we're going to talk about tools
inside of Edge Animate which can automate some of
| | 04:35 | these processes for you.
| | 04:36 |
| | Collapse this transcript |
| Using Auto Keyframe and Auto Transition| 00:00 | Now we're going to look at some features
inside of Edge Animate which will help us create
| | 00:03 | our keyframes and
transitions for our animations.
| | 00:06 | In the previous lesson, we created a very
simple animation, but we had to track all
| | 00:10 | of our keyframes and generate
all of our transitions manually.
| | 00:13 | What we're going to do in this movie
is use some features in the timeline.
| | 00:17 | So first, let's come over to the Assets Panel, let's grab
red_apple.png, and just drag and drop this on the stage.
| | 00:23 | Next, we'll come down to the Timeline Panel
and what we want to do down here is activate
| | 00:27 | these first two buttons here.
| | 00:28 | The first one is the Auto-Keyframe and
the second one is the Auto-Transition.
| | 00:33 | This will allow Edge Animate to pay attention to
the properties that we change and automatically
| | 00:36 | generate keyframes and transitions.
| | 00:38 | So, with the apple selected, let's come over to
the Properties Panel, let's activate the X-axis.
| | 00:43 | Once we do this again, we'll see
the keyframe show up in the timeline.
| | 00:46 | Now, all I'm going to do is
come up here and grab the playhead.
| | 00:50 | Let's drag this out to 1 second.
| | 00:52 | Let's come up to the stage,
and let's simply grab the apple.
| | 00:55 | I'm going to hold the Shift key
and just slide it over to the right.
| | 00:58 | As soon as I let go, you'll notice down
here in the timeline, we see the two different
| | 01:03 | properties are recorded as keyframes, 41
pixels for the X property and 313 for the X property
| | 01:09 | at 1 second, and notice we
also got a transition in here.
| | 01:12 | So, if we come up here and grab the playhead,
drag it back and forth, Edge automatically
| | 01:17 | created an animation for us.
| | 01:19 | All we had to do was simply activate the X
property and then make a change on the stage,
| | 01:24 | and Edge Animate created the
keyframes and the transition for us.
| | 01:27 | So now let's come in here
and add another property.
| | 01:29 | I will drag the playhead back to the 0
time marker, come up to the Properties Panel.
| | 01:34 | Let's click on Opacity.
| | 01:35 | Now, we'll come down to the Timeline.
| | 01:39 | I'll scrub the Opacity value down to 0, move
the playhead back out to 1, and then simply
| | 01:45 | come back to the Opacity
setting and just scrub this up to 100.
| | 01:48 | As soon as I let go, I'll get two additional
keyframes on Opacity, 0% opacity and a 100%
| | 01:54 | on this keyframe here.
| | 01:56 | And again, the transition
was generated automatically.
| | 01:57 | So, if we come up here and click the
Play button, we can preview the animation.
| | 02:02 | So again, that's very similar to what we did
in the last lesson, however, much fewer steps.
| | 02:08 | Now, we'll add in two more properties.
| | 02:11 | Let's drag the timeline back to the 0 marker.
| | 02:13 | Let's come over to the Properties Panel, let's
activate the Y-axis and let's also activate the Rotation.
| | 02:21 | Now with the Y and Rotation set,
let's grab the object. Let's move it up.
| | 02:28 | Let's drag our playhead
out to the 1 second mark.
| | 02:32 | Let's come up here and grab the
apple, and just drag it back down.
| | 02:34 | That will create an animation on the
Top setting here, which is the Y-axis.
| | 02:39 | And then let's come in here to the
Rotation and set this to 360 degrees.
| | 02:44 | Now, if we play the
animation, we'll get the Opacity.
| | 02:48 | We'll get the X-axis, the Y-axis,
and the Rotation in place.
| | 02:52 | So, combining the Auto-Keyframe Tool with
the Auto-Transition Tool allows you to create
| | 02:56 | animations much more
quickly inside of Edge Animate.
| | 02:58 |
| | Collapse this transcript |
| Animating with the Toggle Pin| 00:00 | One of the most unique and interesting features for
animation inside of Edge Animate is the Toggle Pin.
| | 00:05 | Now, inside of Edge Animate, I just have a
project here that simply has two graphics
| | 00:09 | on the stage, the red apple and the green apple.
| | 00:11 | So what we're going to do is
come down into the Timeline Panel.
| | 00:14 | We're going to turn on Auto-Keyframe.
| | 00:16 | We're going to turn on Auto-Transition, and
we're also going to activate the Toggle Pin.
| | 00:20 | Once I select this, you'll notice that above
the playhead is this little blue icon here.
| | 00:25 | What we can do is grab this little blue
icon and move this independent of the playhead.
| | 00:30 | So, let's drag this out to the 1 second mark.
| | 00:34 | This blue indication here shows me that Edge
is going to create an animation that's going
| | 00:37 | to resolve at this point here to
match what we see on the stage.
| | 00:42 | So now, we're going to come up here.
| | 00:43 | Let's grab the red apple.
| | 00:44 | I'm going to simply hold the Shift key.
| | 00:45 | I'm just going to drag this
off the stage to the left.
| | 00:48 | As soon as I let go, what Edge Animate will
do is create both keyframes for the X property,
| | 00:54 | or the Left CSS property, one at -145 creates
a transition, and then sets the second one
| | 01:00 | to 105. 105 is where the Apple
was originally when we started this.
| | 01:04 | So, if I come up here and grab the playhead,
click and drag, you'll see that the animation
| | 01:09 | will come all the way out to 105 on the X,
giving us exactly the same composition that
| | 01:15 | we started with, even though we were
working from the 0 marker of the playhead.
| | 01:19 | So, I'll bring the
timeline back to the 0 marker.
| | 01:22 | We still have the Toggle
Pin enabled up to 1 second.
| | 01:25 | Let's grab the green apple, and drag
this off the stage toward the right.
| | 01:28 | Now we have two animated elements.
| | 01:29 | I'll hit the Spacebar to preview the animation.
| | 01:32 | We'll see that both apples animate from off
the stage and meet right in the middle, matching
| | 01:36 | again exactly where we had the
composition set up when we started the animation.
| | 01:40 | Now, the Toggle Pin is doing
one other thing for us as well.
| | 01:43 | We don't have to activate specific properties.
| | 01:46 | By simply changing things on the stage, the Toggle Pin
will automatically track what properties we're moving.
| | 01:51 | So, by changing the X-property for each
individual graphic, the Toggle Pin automatically set
| | 01:56 | keyframes for the Left property.
| | 01:57 | So, let's grab the playhead, bring it back to
the 0 marker, and let's activate another property.
| | 02:01 | I'm going to come up here and Shift+select
both apples, so I have the red apple and the
| | 02:06 | green apple selected.
| | 02:08 | Let's come up here to the Opacity.
| | 02:10 | Let's move this down to 0.
| | 02:12 | And now you'll see that the opacity is now
being added in to those animation properties.
| | 02:16 | Now, the other way we can use
the Toggle Pin is in reverse.
| | 02:20 | So, with the Toggle Pin still enabled, I'm
going to come down here and grab the playhead,
| | 02:23 | and I'm going to move the
playhead out to the 2 second mark.
| | 02:27 | So now what we're doing here is very similar to
our traditional animation where we're actually
| | 02:31 | animating to this second destination.
| | 02:34 | But again, the Toggle Pin will also
keep track of items that are changing.
| | 02:37 | So, what I'm going to do is grab each apple,
drag them to their respective corners, and
| | 02:41 | then notice that Edge Animate will create a
transition from the position that the apples
| | 02:46 | were in to the new position
where the playhead is represented.
| | 02:49 | So, let's come in here.
| | 02:51 | Let's turn off the Toggle Pin.
| | 02:52 | Let's drag the playhead back to
the beginning. We'll hit Play.
| | 02:56 | And we'll see the two apples will animate
to the center and then move back to their
| | 03:00 | respective corners.
| | 03:01 | So, as you can see, the Toggle
Pin is a really unique feature.
| | 03:03 | It allows us to work with a composition for
where we want our animation to resolve, but
| | 03:08 | still work at the 0 time marker and be able
to sort of see into the future of where all
| | 03:13 | of those animated elements are going to end up.
| | 03:15 | And this is something that saves us an
incredible amount of time since typically in animation
| | 03:19 | projects, we're always working backwards from
the original composition to the areas we want
| | 03:25 | to start our animations from.
| | 03:26 |
| | Collapse this transcript |
| Setting easing options for animations| 00:00 | Edge Animate gives us really quick ways to
add Easing Effects to our animations right
| | 00:04 | in the Timeline Panel.
| | 00:05 | Now, by default, the animation type or the
Easing Effect applied to these items is set
| | 00:09 | to Linear, which means that the distance that
the apples move all along the timeline between
| | 00:14 | each point in time is exactly the same distance.
| | 00:17 | So what this results in is an
animation that's not that exciting to watch.
| | 00:21 | So, if I click on the playhead here, you
can see that the apples will move at the same
| | 00:25 | speed and distance all the way to the center.
| | 00:28 | Now, what Easing Effects will do is allow
us to change the distance to be varying along
| | 00:33 | the timeline and give us a
much more natural animation feel.
| | 00:36 | So to add an Easing Effect, what we're going
to do is come down to the layer here in the
| | 00:40 | Timeline Panel for the red_apple.
| | 00:43 | Let's come over here in the timeline, and let's
select the entire transition for the Left property.
| | 00:48 | With this selected, let's come up to the top
part of the Timeline Panel and click on this
| | 00:52 | Easing button here.
| | 00:53 | So again, by default, we have Linear, which
again you can see the amount of distance versus
| | 00:58 | the time to change is exactly the same
throughout the entire distance of the animation.
| | 01:03 | Let's come over here and let's choose Ease
Out, which means we want to set a property
| | 01:07 | when we ease out to the
final frame of the animation.
| | 01:11 | And by default, it's set to quadratic, and
we can see the Easing effect here actually
| | 01:14 | shows up as a curve.
| | 01:16 | As we select different properties here,
we can see the different curve types.
| | 01:21 | These will all vary the distance that the object
moves based on the total duration of the animation.
| | 01:25 | So, let's come up here
and just keep this on Quad.
| | 01:28 | You can hit Return or click on the Easing
Object button again to get it to go away.
| | 01:32 | And now we have an Easing
animation set on that object.
| | 01:35 | So now if we grab the playhead and drag this
back, you'll notice that the red apple moves
| | 01:40 | faster than the green apple, and then starts
to slow down a little bit, but still at the
| | 01:46 | 1 second mark, they both resolve in the center.
| | 01:48 | So, if I come over here and hit Play, you'll
see that the red apple will actually animate
| | 01:53 | faster in the beginning, and
then slow down into its final spot.
| | 01:57 | This gives us a much more sort of
natural feel for the movement of that object.
| | 02:01 | So to add the same effect for the green apple,
let's come down, and select the left transition
| | 02:05 | for the green apple.
| | 02:07 | Come up to the Easing settings,
choose Ease Out, keep it on Quadratic.
| | 02:11 | Then hit the Spacebar.
| | 02:13 | And now, we'll have the same effect on both
of the objects as they animate to the center.
| | 02:17 | Something that would be interesting on this
particular animation would be the Bounce setting.
| | 02:21 | So, I'm going to hold the Shift key, and select both
of the Left properties for the green and red apple.
| | 02:27 | And let's come down and choose Bounce.
| | 02:31 | So what you can see from this curve here is
that the apples will reach their final destination
| | 02:35 | at about one-quarter of the duration and then
they will move apart, go back again at about
| | 02:40 | the halfway mark, and then
again at about seven-eighths.
| | 02:44 | And then resolve at the final
destination of the ending transition.
| | 02:48 | So, to see this, let's hit the Play button, and
we'll see the apples will move and bounce into place.
| | 02:54 | So the Easing Effects allow us to vary the
distance that the objects are traveling along
| | 02:59 | a total duration of the animation, allowing us to
create more realistic effects for our animations.
| | Collapse this transcript |
| Animating clip and background position| 00:00 | In addition to being able to animate more
traditional properties, such as position and
| | 00:04 | opacity, Edge Animate also gives us the
ability to animate things like the CSS Clipping and
| | 00:09 | Background Positions.
| | 00:11 | Now in this Project I simply have
an apple graphic placed on the Stage.
| | 00:14 | So what we are going do first is come down
to the Timeline Panel, let's activate Auto
| | 00:18 | Keyframe, Auto Transition, and
let's turn on the Toggle Pin.
| | 00:22 | Once these are all activated, let's come
up to the Stage, let's select the apple.
| | 00:27 | Let's come up to the Tools and lets
select the third tool here, the Clipping Tool.
| | 00:31 | Now with this tool selected, we can see
that the highlight changes to green and I have
| | 00:35 | this little indicator here
that allows me to change the Crop.
| | 00:38 | I'm not going to make any adjustments here.
| | 00:40 | We're going to come down to the timeline,
above the playhead let's grab that Toggle Pin.
| | 00:45 | Let's drag this out to one second.
| | 00:47 | Now with this out to one second, let's come
up here, let's grab the bottom of the clip
| | 00:53 | and just drag this all the way up to the top.
| | 00:57 | Now since the Toggle Pin will automatically
target any element that we change and create
| | 01:02 | a transition by simply letting go of this object,
we can see that we now have a Clip animation.
| | 01:07 | So now if we grab the playhead, drag this back
and forth, we can see the animation revealing
| | 01:11 | the apple through the clip.
| | 01:14 | Let's hit the Spacebar to preview this, and
again we get this sort of wiping on effect
| | 01:19 | of that object, completely by
animating the clip property.
| | 01:22 | Now in addition to the clip, we can also use the
Clipping Tool to change the background position.
| | 01:29 | So let me hit Undo a few times to get back
to the point before we created our animation.
| | 01:33 | Now with the object selected,
let's come over to the playhead.
| | 01:37 | Make sure the Toggle Pin
is back out to a second.
| | 01:40 | What we are going to instead is come up here,
click on this little circle indicator here.
| | 01:44 | I'm going to hold the Shift key here to
constrain to only move across the X-axis, and when I
| | 01:50 | let go, instead of the Clip properties being
animated, you'll now see that Edge is actually
| | 01:54 | animating the Background Position.
| | 01:56 | So, if I grab the playhead and move this
back and forth, now we get an animation effect
| | 02:00 | that looks as though the apple is sort of
revealing itself behind a hidden object.
| | 02:03 | So we'll hit the Spacebar and
we can preview this animation.
| | 02:09 | So being able to animate the Clip and the
Background Position gives us some really
| | 02:12 | interesting animation
opportunities inside of Edge Animate.
| | 02:15 |
| | Collapse this transcript |
| Combining transformations| 00:00 | The Transform Tool on Edge Animate allows
us to modify multiple CSS properties at once.
| | 00:04 | So we are going to use this tool to access
more advanced properties for our next animation.
| | 00:09 | First, let's come over to the Assets, let's
drag a copy of red_apple.png on to the Stage,
| | 00:15 | and what we are going to do here is create
an animation that's going to look like this
| | 00:19 | apple's sort of tipping and rolling over.
| | 00:22 | So to start, let's come down to the Timeline
Panel, let's turn off our Auto Keyframe, Auto
| | 00:27 | Transitions, and the Toggle Pin.
| | 00:29 | Now with the apple selected on the stage, come
up to the Tools, let's select the Transformation
| | 00:34 | Tool, and let's change the Origin, that's the
registration point here, let's click this and drag it.
| | 00:40 | Let's move it to lower right-hand side of the
apple, somewhere around 74% on the X and 94% on the Y.
| | 00:49 | Now with that in place, let's come down to
the Timeline, let's turn on Auto Keyframe,
| | 00:54 | Auto Transition, let's select the apple, and
let's come over here and activate Rotation.
| | 01:00 | So with Rotation turned on, let's grab the
playhead, let's drag it out to two seconds,
| | 01:07 | let's come down to the Rotate
Property, let's put in 95 degrees.
| | 01:12 | Let's drag the playhead out to 3 seconds,
let's come back to the Rotation Property and
| | 01:18 | set it back it to 75.
| | 01:20 | Next, we'll select this segment that goes
from 95 to 75, come over to the Easing, choose
| | 01:27 | Ease Out and pick Quadratic.
| | 01:31 | So now if we Preview the animation, we can
see the apple rolls over to 95 degrees and
| | 01:35 | then rotates back to 75 degrees.
| | 01:38 | So in order to make this animation look like
it's rolling across the stage, we are going
| | 01:41 | to bring the Timeline back to zero, and we are
going to activate the Y or the Top properties.
| | 01:47 | Let's select the Object, let's come over to
the Properties Panel, let's turn on the Y-Axis
| | 01:52 | or the Top Property.
| | 01:55 | And what I am going to do with the object
selected on the stage, is use my Down Arrow
| | 01:58 | key to move the apple down, so that
it's just touching the bottom of the stage.
| | 02:02 | Next, what I am going to do is grab the
Timeline playhead and I'm going to move this out, and
| | 02:08 | anytime I see the apple start to move away
from the bottom of the stage, I am either
| | 02:12 | going to hit the Up or the Down Arrow to
move the apple, so that it again is touching the
| | 02:15 | bottom of the stage.
| | 02:17 | So here I'll hit the Down Arrow
a few times. Animate this out.
| | 02:24 | I am going to keep doing this along the Stage.
| | 02:30 | At this point here I can see the apple is
actually starting to dip below the stage.
| | 02:33 | So I'll come out to here, I'll hit the Up
Arrow in this case, about a little bit more,
| | 02:40 | hit the Up Arrow, and I am almost
to the keyframe for the Rotation.
| | 02:53 | Let's go one more, and then animate this up.
| | 03:00 | So now when I click and drag the
playhead I can see the animation moving across.
| | 03:03 | Now if at few stops this is jumping, so let's
just go in here and make a few quick modifications.
| | 03:09 | Over here I'll just hit the Down
Arrow once, about here I'll hit it again.
| | 03:17 | Of course, you can add as many keyframes in
between here as you want to create that effect,
| | 03:36 | and right about there.
| | 03:36 | So that looks pretty good.
| | 03:37 | So when I move this back and forth, the
apple looks like it's rolling on the ground.
| | 03:41 | There's another thing that's kind of happening
here and that is the apple, if it was actually
| | 03:47 | rolling on the floor, would actually move
a little bit to the right and left as well.
| | 03:50 | So I am going to focus on this little spot,
right above my crosshair arrows, and I want
| | 03:56 | that to be in the right position the whole time.
| | 03:59 | So I am going to move my playhead back to
about right here and then I am going to drag
| | 04:03 | a guide to intersect that
spot on the apple right here.
| | 04:07 | So now when I move my playhead I am going
to come out here, I notice that that spot's
| | 04:11 | a little bit to the right.
| | 04:11 | I am going to hit the Left Arrow.
| | 04:14 | Edge will automatically activate the Left
property here, let's move that a little bit.
| | 04:20 | I'm going to move that over to the right, a
little bit more to the right on the next keyframe.
| | 04:33 | Now I have that apple in the right spot.
| | 04:34 | So now the apple looks as though it was sort
of rolling along the ground as well.
| | 04:38 | So now with that in place, let's go beyond
the Keyframe, where this starts to animate back.
| | 04:44 | So I'll move this over, and again
use my Arrow keys to do the same thing.
| | 04:51 | Now Edge make this really fast, because I
can drag the timeline and then simply hit
| | 04:57 | my Arrow keys and have Edge create
all of the intermediate transitions.
| | 05:04 | Now I'll come back and make sure the
apple is in the right spot horizontally.
| | 05:09 | So, I can see that spot
is right on the guide here.
| | 05:13 | Move this over, I can see it's actually a little
bit to the right now, so I'll move this to the left.
| | 05:23 | And that completes the animation.
| | 05:33 | Now if we play this we'll
see the apple tipping over.
| | 05:36 | And one thing that's not very
realistic here is it's taking a long time.
| | 05:40 | So now what I can do is with my entire
animation in place I can select the Rollup, which is
| | 05:45 | the entire animation, move my cursor to the
end of the duration, and I can click and drag,
| | 05:50 | and I can re-time the entire animation.
| | 05:53 | So what I am going to do is drag this entire
animation down to about one and a quarter seconds.
| | 05:58 | So now when I hit the Spacebar and play this,
I'll get a little more of a realistic effect
| | 06:01 | of the apple sort of tipping over, rolling a little
past that center of gravity and then animating back.
| | 06:07 | So, by using the Transform Tool and
animating some of the more advanced properties on an
| | 06:12 | object, we can get much more realistic
animations very quickly inside of Edge Animate.
| | 06:16 |
| | Collapse this transcript |
| Working with sprite animations| 00:00 | Another popular animation technique on the web
is to animate something called the Sprite Sheet.
| | 00:04 | The idea behind this is that we have a
large image and we animate the individual Sprite
| | 00:09 | inside of a container.
| | 00:10 | So in the Library Panel, I have a file in here
called apple_sprite.png, let's drag that onto the Stage.
| | 00:17 | So as you can see here, all the different
frames of the animation are in one graphic and
| | 00:21 | they are all spaced at a 100 pixels apart.
| | 00:23 | So what we are going to do is animate this object
inside of a Background element inside of Edge Animate.
| | 00:29 | So with the object selected, let's first come
up to the Toolbar and select the Clipping Tool.
| | 00:33 | With the Clipping Tool selected, let's
come down into the stage, let's grab the right
| | 00:37 | side of the clip and let's drag this down until
the right side of the clip is at a 100 pixels.
| | 00:44 | To see this, let's come over to the
Properties Panel, open up the Clip area, I have it set
| | 00:48 | to 99 down here, let's just type in a 100.
| | 00:52 | Next, let's select the object on the Stage.
| | 00:56 | Let's come up to the Transform Tool.
| | 00:59 | Let's grab the Registration Point here, and
let's just drag this to the center of this object.
| | 01:03 | This way if we do any transformations to this,
it will look like we're transforming the one
| | 01:06 | object and not the larger PNG.
| | 01:08 | Now with our clipping in place, let's come up
to the Toolbar, let's garb the Selection Tool.
| | 01:13 | Let's come back down, let's
move the apple onto the Stage.
| | 01:18 | Now with the apple in position,
let's come down to the Timeline Panel.
| | 01:21 | Let's uncheck the Auto Transition, but we
are going to keep the Auto keyframe turned on.
| | 01:26 | Next, make sure the apple
is selected on the Stage.
| | 01:30 | Come over to the Properties Panel and
let's activate this Keyframe here for the X and
| | 01:33 | Y properties of the Background Image.
| | 01:35 | Once I turn that on, we can see Background
Position now shows up in the Timeline Panel.
| | 01:41 | Let's grab this playhead, let's
drag this out to a quarter of a second.
| | 01:46 | Let's come over to the Background Image in
the Properties Panel, let's click on the X
| | 01:49 | and let's type in -100 and hit Return.
| | 01:54 | Once I enter that value you'll see that the
graphic actually changes inside of that frame.
| | 01:58 | So if we come over to the Timeline Panel,
drag the playhead back, this is the original
| | 02:03 | state, and there is the
first frame we just created.
| | 02:07 | So again, what's happening is that
background PNG that's really wide is just changing its
| | 02:10 | position within that container.
| | 02:13 | Let's grab the playhead and
bring this out to half a second.
| | 02:18 | Let's come back over to the
Properties Panel, we'll put in -200.
| | 02:21 | Let's come out to .75, enter -300.
| | 02:32 | Let's come out to 1 second, -400, and
then finally, at one and a quarter, -500.
| | 02:45 | So now we have all of these keyframes along
the timeline, there are no transitions between
| | 02:49 | these keyframes, but you'll notice as we
swipe back and forth we now get those individual
| | 02:53 | frames showing right over top of
each other inside that element.
| | 02:56 | So if I hit the Spacebar and Preview this,
is what our final Sprite Sheet animation looks
| | 03:02 | like inside of Edge Animate.
| | 03:04 |
| | Collapse this transcript |
| Animating CSS filter and shadow properties| 00:00 |
Edge Animate allows us to animate filter
settings just like any other properties.
| | 00:04 |
So to demonstrate this, we're going to be
working inside of the Exercise Files >
| | 00:08 |
inside of Chapter 5 > inside of G
Animating Filters, and then open up filters.an.
| | 00:14 |
So inside of here, let's select the Apple
on the stage.
| | 00:16 |
First, let's apply some filters to this.
Let's come over to the Properties panel.
| | 00:21 |
Lets open up the Filters tab.
Now, what we're going to do inside of
| | 00:23 |
here is not only activate different
properties, but activate key frames for
| | 00:27 |
the properties.
So, for the animation I want to rotate
| | 00:29 |
through the hue rotation and animate the
drop shadow.
| | 00:32 |
So, let's make sure the players at the 00
marker.
| | 00:36 |
Lets come up and activate hue rotate.
And for the shadow, let's activate the x,
| | 00:40 |
y, and blur key frames.
Next, make sure in the timeline you have
| | 00:43 |
the autokey frame and auto transition
turned on.
| | 00:46 |
Let's grab the playhead, drag this out to
the one second mark.
| | 00:50 |
Let's come up to the hue rotation.
Let's select this.
| | 00:53 |
Let's type 180 degrees.
Hit Return or Enter.
| | 00:58 |
That'll create an animation on the stage.
Lets grab this on the timeline.
| | 01:02 |
We can see the hue rotation is now
animated.
| | 01:05 |
Lets leave the play at the one second
mark.
| | 01:08 |
Lets come over to the X property, lets
type in ten pixels, hit Tab, put in ten
| | 01:13 |
for the Y, hit Tab, put five pixels for
Blur.
| | 01:18 |
And as we make these changes, you'll
notice on the stage we see the drop
| | 01:21 |
shadows now being applied.
And again, if we drag the play head back
| | 01:25 |
and forth.
We can see that, not only is the hue
| | 01:27 |
rotation changing.
But also, the drop shadow's moving.
| | 01:32 |
Let's do one more change.
Let's come back to the very beginning.
| | 01:35 |
Let's come up to the properties panel.
Let's activate the x and y for the position.
| | 01:40 |
Let's come down to the play head.
Drag this to the one second mark.
| | 01:44 |
going to click on the stage.
I'm going to move this vertically ten
| | 01:47 |
pixels and to the left ten pixels.
This is the same distance that we're
| | 01:51 |
moving from the drop shadow.
So, now if we scrub the playhead, we get
| | 01:54 |
this effect that the apple is changing
color, and sort of moving up off the stage.
| | 01:58 |
Now, if I hit Return, to play this inside
of Edge Animate, one thing you might
| | 02:03 |
notice is that the preview doesn't quite
work inside of the application.
| | 02:06 |
However, if we preview this in a browser,
we'll see the effect or after.
| | 02:10 |
So, lets go up to the File Menu.
Lets come down and choose Preview in browser.
| | 02:13 |
So, now inside of the browser we'll see a
nice animation between all of the Hue
| | 02:16 |
settings and we'll see the drop shadow
moving away as the apple moves up.
| | 02:20 |
I'd reload to play this again.
I'm going to close the preview, and go
| | 02:24 |
back to Edge Animate.
Now, back inside of Edge Animate, I can
| | 02:26 |
see a warning symbol in the lower right
hand side of the stage.
| | 02:29 |
If I click on this, and hover over the
warning.
| | 02:31 |
I can see that Firefox and some Android
browsers are going to have problems with
| | 02:34 |
CSS3 filters.
So when you're using CSS3 filters.
| | 02:37 |
Whether you're just using them straight
or animating them.
| | 02:40 |
Realize that some of these effects won't
work in some of those browsers.
| | 02:43 |
So, just make sure that the user
experience is dependent on some of these settings.
| | 02:46 |
| | Collapse this transcript |
| Animating CSS gradients| 00:00 |
Now, in addition to being able to create
gradients inside of Edge Animate 1.5 and
| | 00:04 |
later, we can also animate the properties
of a gradient.
| | 00:06 |
Now, to follow along in the exercise
files, lest open up Chapter_05, the H -
| | 00:11 |
Animating Graphics, and then
gradients.an.
| | 00:14 |
Now, inside of here, let's come up to the
toolbar.
| | 00:16 |
Let's select the rectangle tool.
On the stage, I'm going to click and drag.
| | 00:19 |
Create a rectangle on the Stage.
Next we'll come over to the Properties panel.
| | 00:24 |
Inside of the Color area, select the
center chip, which is the Gradient
| | 00:27 |
Creation tool.
Next on the left-hand side, let's select
| | 00:29 |
the Top Color Stop, and the Color area.
Let's come in here and select a medium
| | 00:34 |
green, then hit Return.
As soon as we apply the gradient, we'll
| | 00:38 |
see in the lower right-hand side of the
Stage, Edge Animate is giving us a warning.
| | 00:42 |
If we click on this, it'll tell us that
gradients are not supported in IE9.
| | 00:45 |
Then we can click the X to close that.
Now to create an animation of Gradient
| | 00:49 |
properties, with the gradient selected on
the stage, let's come down to the Timeline.
| | 00:54 |
Let's turn on Auto Keyframe and Auto
Transition.
| | 00:57 |
And then let's come up to the Properties
panel.
| | 00:59 |
Under Color, next to the Gradient swatch,
let's click on this Keyframe here.
| | 01:04 |
That's going to add a keyframe to the
stage at the 0 marker.
| | 01:06 |
Let's grab the Playhead, let's drag this
out to 1 second.
| | 01:09 |
Let's come down and activate a second key
frame.
| | 01:12 |
Now, we'll drag the Playhead back to the
0 marker.
| | 01:14 |
Let's come back to the properties panel,
let's click on the gradients watch, and
| | 01:18 |
let's come down here to the color ramp.
Let's grab the second stop color and just
| | 01:22 |
drag this up.
So that the distance of the gradient is
| | 01:25 |
much shorter now.
Now I'll hit return, the auto keyframe
| | 01:28 |
and auto transition will give us an
animation.
| | 01:30 |
Now we can click and drag the Playhead on
the stage and see the animation in the timeline.
| | 01:39 |
Let's add a second animation here.
Let's bring the Playhead back to the 0 marker.
| | 01:43 |
Let's come up to the Properties panel.
Let's activate Opacity.
| | 01:46 |
Let's come down and drag this down to
zero.
| | 01:48 |
Drag the Playhead out to half a second.
Drag the opacity up to 100.
| | 01:55 |
This way the opacity will play much
faster than the overall gradient animation.
| | 02:00 |
And then lastly, let's come up, select a
gradient.
| | 02:02 |
Go to modify, arrange, and send to back.
Now, in addition to animating the length
| | 02:07 |
of the gradient, we can also animate the
angle.
| | 02:09 |
So, let's come down here in the timeline.
Let's select Opacity and Gradient, let's
| | 02:14 |
hit Delete.
Let's drag the Playhead back to the 0 marker.
| | 02:17 |
Let's come up to the Properties panel.
Let's bring the Opacity back up to 100%.
| | 02:21 |
Let's come over to the Gradient Swatch.
Let's extend the gradient ramp so that
| | 02:27 |
it's the full height.
And let's come in here and let's set the
| | 02:30 |
degree to one degree.
And hit Return.
| | 02:33 |
Now we are going to create a rotating
animation of the gradient but the
| | 02:36 |
computer doesn't understand the
difference between zero degrees and 360 degrees.
| | 02:40 |
It sees those both as the same.
So what we're going to do is set to one
| | 02:44 |
degree and then we're going to animate to
three different points, never using zero
| | 02:47 |
or 360 as measurements.
So with our gradient sent to one degree,
| | 02:51 |
let's come up over here to the Properties
panel.
| | 02:53 |
Let's activate the key frame with the
Gadient Swatch.
| | 02:56 |
Let's come down to the time line, let's
drag the Playhead to the one second mark.
| | 03:01 |
Make sure auto key frame and auto
transition are still on.
| | 03:04 |
Lets click on the Gradient Swatch for
degrees.
| | 03:07 |
Lets set this to 120 degrees.
Hit Return.
| | 03:11 |
Lets drag the Playhead out to two
seconds.
| | 03:16 |
Lets come back click on the Gradient
Swatch set this to 240 degrees.
| | 03:21 |
Hit Return.
Next lets come over and grab the Playhead
| | 03:25 |
Let's drag this out to the three second
mark.
| | 03:27 |
Come back to the Gradient Swatch.
Let's change our degree to 359, then hit Return.
| | 03:32 |
So now, if I jog the Playhead, we can see
that the animation will go in a complete circle.
| | 03:38 |
Since we're working with a shape with the
corners, this might look a little funny.
| | 03:40 |
So let's bring the Playhead back to the
zero marker.
| | 03:42 |
Let's turn off auto key frame and auto
transition.
| | 03:46 |
Let's come in here and extend the height
of this box all the way up to the top of
| | 03:49 |
the stage.
With this selected, let's set the width
| | 03:52 |
to 300 pixels.
Let's hit Return.
| | 03:57 |
Let's drag this over, so that it's
centered over the apple.
| | 03:59 |
Next, let's come over to corners.
Toggle the corners open.
| | 04:03 |
Change pixels to percent.
Let's type in 50 percent, hit return.
| | 04:08 |
This will give us a circle.
And then, lastly, let's come over to the
| | 04:12 |
3 second mark in the timeline.
Let's come over here and add an action or
| | 04:17 |
a trigger.
Let's click on this.
| | 04:20 |
Select play from the snippets.
Close this.
| | 04:23 |
And then Cmd or Ctrl + Return to preview
in Browser.
| | 04:27 |
And now we'll see that we have a rotating
animation of the gradient.
| | 04:30 |
So not only do gradients get this nice
design opportunity in our compositions,
| | 04:34 |
but we can also animate those properties
as well.
| | 04:36 |
| | Collapse this transcript |
|
|
6. Making Adjustments to AnimationsAdjusting animations| 00:00 | Edge Animate allows us to create
adjustments to animations as quickly as we can create
| | 00:04 | animations themselves.
| | 00:05 | In this project I have a simple animation
of an apple that's just simply moving from
| | 00:08 | the top of the screen down to the bottom.
| | 00:10 | Now to make adjustments on an animation
that already exists, when the playhead gets to
| | 00:15 | the point where there's a keyframe, Edge
will snap the playhead to the keyframe.
| | 00:20 | If this isn't happening for you, come up
to the timeline menu, come down to Snap To,
| | 00:24 | and make sure that you have Keyframes,
Labels, and Trigger Selected in that menu.
| | 00:29 | Now back in the timeline with our playhead
set to the 0 marker we are going to select
| | 00:33 | the apple, hold the Shift key to constrain
my direction, and we are going to move the
| | 00:37 | apple to the top of the screen so
that just a part of it is showing.
| | 00:40 | Down on the timeline grab the playhead,
let's drag this to the end of the animation.
| | 00:45 | Select the apple on the stage and now I am
going to use my down arrow to move the apple
| | 00:49 | down so that it's touching
just the bottom of the stage.
| | 00:51 | Now let's drag the playback to the 0 marker.
| | 00:54 | I want to add another
transition property in here for Opacity.
| | 00:58 | Now I could come over to the Properties panel
and click on this item here to add a keyframe
| | 01:02 | for Opacity, but I can
also right-click on an object.
| | 01:06 | So on the stage I am going to right-click on the
apple, come down to Add Keyframe, and choose Opacity.
| | 01:12 | In either case we are going to
get the Opacity setting down here.
| | 01:15 | So let's come down here
and scrub this down to 0.
| | 01:19 | Let's grab the playhead, drag it out to
the one second mark, which is halfway through
| | 01:23 | the duration of the animation.
| | 01:25 | Let's come down to the Opacity
setting and drag this up to a 100.
| | 01:28 | So now the apple will be fully
opaque by half the transition time.
| | 01:34 | Next let's come down here and
grab the entire transition for Top.
| | 01:38 | With the entire Transition selected let's
come up to the Easing settings, choose Ease
| | 01:43 | out, and then Bounce.
| | 01:45 | Now if we play the animation, we have a Bounce
Effect and the Opacity coming in halfway through
| | 01:51 | the Total Duration.
| | 01:52 | Next we are going to add in one more
property and that's going to be for Rotation.
| | 01:56 | So let's grab the playhead and drag this back
until we see the apple has first bounced off
| | 02:00 | the stage, which is right about here.
| | 02:04 | So right at this point let's come over
here to the Auto Transition and turn that off.
| | 02:09 | Let's come over and activate the
Rotation, and let's set this to 5 degrees.
| | 02:14 | Next we'll move the playhead all the way back to
the beginning and set the Rotation to 0 degrees.
| | 02:20 | Now since we turned off Auto Transition we
are not going to get the automated transitions
| | 02:23 | between these keyframes.
| | 02:26 | Let's grab the playhead, let's find the
second time the apple hits the stage, right here.
| | 02:35 | Let's come over here to the Rotation Property.
| | 02:37 | Let's set this to -5 and then let's go to the end,
come back to the Rotation Property, set it to 0.
| | 02:46 | Now I do want a transition
on the last two keyframes.
| | 02:48 | So lets select the very last keyframe,
right-click, choose Create Transition.
| | 02:54 | So all along the Rotation Property the
first three settings have no transitions between
| | 02:59 | them, but we do now have a
transition on the last two properties.
| | 03:03 | So now let's play this.
| | 03:04 | So now we see the apple sort of rotates
around just a little bit as it hits the stage.
| | 03:08 | Now the last thing I want to
adjust is the overall timing.
| | 03:12 | I don't want the entire
animation to take two seconds.
| | 03:15 | So if we come into the timeline and we
click on the red_apple layer or what some people
| | 03:19 | refer to as the rollup,
everything will be selected underneath.
| | 03:22 | So every keyframe and
transition will be selected.
| | 03:25 | With all of these properties selected, let's
move our cursor over to the right-hand side.
| | 03:29 | You'll see we get these little double arrows and
let's click and drag and make the Duration only 1 second.
| | 03:35 | Notice that all the keyframes in the
timing will be adjusted appropriately.
| | 03:40 | Let's bring the playback to a 0 marker.
| | 03:42 | Let's hit the Spacebar or the
Play button to preview this.
| | 03:45 | And now we will see the animation plays
much quicker and looks a little more natural.
| | 03:52 | So even though we started off with an
animation that was already in place, we were able to
| | 03:55 | add in additional properties, change the overall
duration, and add in some enhancements using
| | 04:00 | the same techniques that we would use
to create the animation from scratch.
| | 04:03 |
| | Collapse this transcript |
| Moving entire animations| 00:00 | Sometimes you need to move an animation
within your composition, but you don't want that
| | 00:03 | movement to generate more keyframes.
| | 00:06 | So Edge Animate gives us a way that we can
move an entire animation without generating
| | 00:09 | additional keyframes.
| | 00:11 | What we want to do here is move this animation.
| | 00:14 | Currently, it's on the left
-hand side of the screen.
| | 00:16 | We want to move the entire animation over
toward the right-hand side of the screen.
| | 00:19 | So what we are going to do inside of Edge
is, with our cursor on the last screen, and
| | 00:25 | we have it over here simply so we
actually see the final result of the animation.
| | 00:29 | Let's come over here and turn off Auto
Transition and turn off Auto Keyframe.
| | 00:34 | Make sure your toggle pin is also not activated.
| | 00:37 | And when Edge is in this state, anything that we
make changes to is going to affect the artwork
| | 00:41 | globally whether they're animated or not.
| | 00:44 | So what I can simply do is now come in here,
grab the apple, move it over to the right,
| | 00:48 | maybe use my arrow keys to arrow
it to exactly the point that I want.
| | 00:52 | Then when I play the animation, the starting
point, which is up here now instead of on the
| | 00:57 | left-hand side, the Opacity settings, and
the rotate settings are all being affected
| | 01:02 | on the object not being on the right-hand
side of the screen versus the left-hand side.
| | 01:06 | So as you are working inside of Edge Animate,
anytime you want to change the position of
| | 01:11 | an animation, but not have those adjustments
be part of the animation, make sure that you
| | 01:15 | come down here on to the timeline panel and
turn off the Auto Settings so that Edge won't
| | 01:19 | apply those new settings to
the actual animation itself.
| | 01:22 |
| | Collapse this transcript |
| Reusing animation properties| 00:00 | You can reuse animation properties inside
of Edge Animate by copying and pasting them
| | 00:04 | on to other objects.
| | 00:06 | So here we have an animation of an Apple
dropping and rotating a little bit as it bounces on
| | 00:10 | the bottom of the stage.
| | 00:12 | What I want to do here is take these
animation properties that we've spent time setting up
| | 00:16 | and apply them to another object.
| | 00:19 | So first let's come over to the Library panel.
| | 00:21 | Let's grab green_apple.png and
let's drag this onto the stage.
| | 00:25 | We'll position this where we want it.
| | 00:28 | Next we'll come over to the red_apple,
down in the timeline, let's click on the rollup
| | 00:33 | here, which is the bar on the red_apple layer,
which will select all of the properties of
| | 00:38 | the animated transitions underneath.
| | 00:40 | Let's come up to the Edit menu, choose Copy.
| | 00:44 | Let's come over here and select the
green_apple and then choose Paste.
| | 00:48 | Once we do that you'll see that all of the
animation properties are now assigned to the
| | 00:52 | green apple object.
| | 00:53 | If I drag this back and hit Play the
green_apple will now drop into place.
| | 00:58 | Now with the rollup selected we can also
change the entire choreography of the animation.
| | 01:03 | So I can click on this object and drag it
back and make it so that the green and the red
| | 01:08 | apple play at the same time.
| | 01:10 | Bring the playhead back to the 0 marker, hit
the Spacebar or the Play button, and preview
| | 01:16 | the animation of the two
apples dropping together.
| | 01:18 | So if you spent a lot of setting up an
animation to work in a specific way, you can then copy
| | 01:23 | those transition properties and paste them on to
any other object and get the same animation effects.
| | Collapse this transcript |
| Changing animated artwork| 00:00 | If you've animated an object inside of Edge
Animate and you want to change the artwork,
| | 00:04 | we can switch the artwork that's associated to
the animation without changing the animation itself.
| | 00:09 | So inside this file we have an apple that
drops down on the stage, bounces and rotates
| | 00:12 | a little bit as it hits the bottom.
| | 00:15 | What I want to do here is change
the red apple for the green apple.
| | 00:17 | So what I can do is come up here
and select the red apple on the stage.
| | 00:21 | In the Properties panel under the Image setting,
let's come down to where it says red_apple.png
| | 00:27 | and click on this button here, which will
allow us to change the image source.
| | 00:30 | This will bring up the Library panel.
| | 00:32 | Let's come in here and grab
green apple and then hit Return.
| | 00:35 | So, on the stage you can see that red apple
has now been replaced with the green apple.
| | 00:38 | I'll hit the Spacebar to preview the animation
and all of the animation properties are still
| | 00:43 | intact, but we're seeing the green
apple animate instead of the red apple.
| | 00:46 | Now in some cases you may actually switch
artwork for something that's not the same size.
| | 00:50 | In this case the green apple is
actually wider than the red apple.
| | 00:53 | So what I'm going to do is
come down to the Timeline panel.
| | 00:56 | I am going to uncheck Auto-
Transition and uncheck Auto-Keyframes.
| | 01:00 | Make sure that toggle pin is not
activated either, so all of these are gray.
| | 01:04 | Let's select the apple.
| | 01:06 | Let's come over to the Properties panel
and let's set this to 160 pixels wide.
| | 01:10 | I want to make sure I can change the Width
property without Edge creating an animation
| | 01:14 | out of that property change.
| | 01:16 | So now we can preview this again and we see
the width of the apple is now 160 pixels at
| | 01:20 | all times, and again we've switched out the
artwork from the red apple to the green apple.
| | 01:24 |
| | Collapse this transcript |
| Setting an animation to loop| 00:00 | To set an animation to Loop in Edge Animate
we need to use a little bit of JavaScript.
| | 00:04 | Fortunately, we can add this to our Edge
Animate project with a simple click of a button.
| | 00:08 | So here we have a simple animation
of an apple dropping onto the stage.
| | 00:11 | What we're going to do here is set this up so
that it will loop after a certain amount of time.
| | 00:17 | So to add a looping capability to this
animation, let's come over here to the Timeline Panel,
| | 00:21 | let's grab the playhead and let's
drag this out to about the 3 second mark.
| | 00:25 | Once we're at 3 seconds, let's come over here
and under this Actions layer here let's come
| | 00:30 | over here and click on this button
here, which is the Insert Trigger button.
| | 00:34 | Once we click this we're going to
get the Code window that comes up.
| | 00:36 | Inside of here we can add our code, or we
have a whole series of buttons on the right hand
| | 00:40 | side that will automatically
put in some JavaScript for us.
| | 00:43 | So what we want to have happen at that
3 second mark is we want to click Play.
| | 00:48 | By inserting this command what's going to
happen is, when the browser gets to the 3 second
| | 00:52 | mark in our animation it will
simply replay the entire animation.
| | 00:56 | So that's the only thing we need to add here.
| | 00:59 | In the upper right-hand
corner let's close the Code window.
| | 01:02 | Now in order to see this we need
to look at this in the browser.
| | 01:05 | While Edge will give us the ability to
preview an animation of things that are happening
| | 01:08 | on the stage, the preview
doesn't execute JavaScript.
| | 01:11 | So what we're going to do at this point is
come up to the File menu, come down and choose
| | 01:15 | Preview in Browser, and you can also use the
same keyboard shortcut that we have inside
| | 01:19 | of Flash, which is Command+Return. So let's select
this, this will open the animation up in a browser.
| | 01:25 | The animation will play over the course of
one second, and then it will wait two seconds
| | 01:29 | before the Play command gets triggered and
then the animation will start over again.
| | 01:33 | Let's close our Browser window to make
this transition a little bit smoother.
| | 01:37 | Let's move our playhead back
to about the 2.5 second mark.
| | 01:40 | Let's come over here to the Opacity property
and let's activate a keyframe for this, and
| | 01:44 | then let's move our playhead out to about 2.75.
| | 01:48 | Let's come over here to the Opacity
setting and let's scrub this down to zero.
| | 01:52 | So now we'll have an animation where the
apple drops onto the stage over the course of one
| | 01:56 | second, and then it will sit on the stage for
another one and a half seconds, and then fade
| | 02:00 | out over a quarter of a second, and then a
quarter of a second after that it will replay.
| | 02:05 | So to test this let's hit Command+Return to
preview in the browser. And right before the
| | 02:10 | animation is going to replay you'll see the
apple fades out, then our Play command hits,
| | 02:13 | and the entire animation loops again.
| | 02:15 |
| | Collapse this transcript |
|
|
7. Working with SymbolsUsing symbols| 00:00 | Edge Animate allows you to create symbols
from your artwork and reuse them on the stage,
| | 00:04 | very similar to other Adobe
applications like Flash, Illustrator, and Fireworks.
| | 00:09 | Now I have a blank project here.
| | 00:10 | The first thing we're going to do is come over
to the Library Panel, let's grab red_apple.png.
| | 00:16 | Drag that onto the stage.
| | 00:17 | Let's go back and grab green_apple.png from
the Assets and drag that on the stage as well.
| | 00:22 | I am going to overlap these is a little bit.
| | 00:25 | I'd like the green apple to be behind the red
apple, so let's go to Modify>Arrange>Send to Back.
| | 00:32 | Now using the Shift key I am going to
select both of these objects and I want to create
| | 00:36 | a symbol out of these.
| | 00:37 | I can do that by either right-clicking and
coming down and choosing Convert to Symbol, or
| | 00:42 | I can come up to the Modify
menu and choose Convert to Symbol.
| | 00:45 | In either case I'll be presented with the
dialog box to name the symbol, we'll call
| | 00:49 | this apples, then choose OK.
| | 00:53 | Once I do that, you'll see
these two items up here grouped.
| | 00:55 | They're actually showing up now in the
Library Panel under the Symbols group.
| | 00:59 | Now back on the stage, this is
referred to as an instance of that symbol.
| | 01:02 | I can come in here and scale that instance.
| | 01:05 | So I'll just scale this down really small.
| | 01:06 | I'm going to hold the Option
key and drag out another instance.
| | 01:11 | For this one let's just
scale this up a little bit.
| | 01:13 | I'll drag a third instance,
we'll scale this up even more.
| | 01:19 | So symbols allow us to create some
artwork that we can reuse any number of times.
| | 01:23 | If I modify this symbol it's going to
modify all of the instances of that symbol.
| | 01:27 | To modify a symbol we can
do that one of two ways.
| | 01:29 | First, I can come over to the Symbols Panel,
double-click on the Symbol and this will bring
| | 01:34 | us into Isolation mode where I only see this
particular symbol, where I can see the original
| | 01:39 | graphics that are grouped
together, so I can make a change here.
| | 01:43 | And in the upper left-hand corner we can
see the path, I'm inside of the apples symbol.
| | 01:47 | I'm going to click on Stage,
go back to the main stage.
| | 01:50 | The second way I can edit these is I can double-
click on one of these and go into Isolation mode
| | 01:55 | where we're editing the symbol in place.
| | 01:57 | This way I can see the background stage
even though it's ghosted back to get a sense of
| | 02:01 | where the other instances of this symbol are.
| | 02:04 | Inside of here let's just make a change.
| | 02:07 | Let's move the green apple
over to the left a little bit.
| | 02:10 | I'll move the red apple to where the green
one was, I am going to use my keyboard shortcut
| | 02:14 | Command+[ to put the red apple behind
the green one, and I'll just use my
| | 02:19 | Arrow keys to arrow this over a little bit.
| | 02:22 | Once I like the change, I'm going
to come up here and click on Stage.
| | 02:26 | Once I do that, we can see in the background
all of the instances of this symbol are now
| | 02:29 | modified, having the green apple in
the front and the red apple in the back.
| | 02:34 | As you can see, symbols provide us a fast and
efficient way to modify artwork in our compositions.
| | 02:39 |
| | Collapse this transcript |
| Creating animated symbols| 00:00 | In addition to allowing us to reuse artwork,
symbols also can be animated inside of Edge Animate.
| | 00:05 | So inside this project we have our
composition that we created earlier in the course.
| | 00:09 | We also have the apple
animated here in the middle.
| | 00:12 | If I bring the playhead back, hit
the Play button to preview this.
| | 00:16 | We can see that we have the apple
drop down and land on the floor.
| | 00:19 | So what I want to do is take the animation
from that apple and wrap that into a symbol.
| | 00:23 | So what I am going to do is click on the apple,
right-click, come down and choose Convert to Symbol.
| | 00:32 | Let's name this animated_apple, then choose OK.
| | 00:38 | Once we do this, that animation is
now encapsulated inside of that symbol.
| | 00:42 | If we come over here to the Symbols Panel
and double-click, we'll see that we have the
| | 00:46 | timeline inside of this symbol
that's dedicated only to this apple.
| | 00:50 | We can see the animation in
place here as we click and drag this.
| | 00:54 | So everything about that animation
is now inside this particular symbol.
| | 00:58 | So let's come back to the top of the
document, let's come back to Stage.
| | 01:03 | Now another advantage of having the
animation inside this symbol is if we duplicate this
| | 01:07 | object, come over to the stage, let's
Option+drag a second copy of this apple.
| | 01:14 | When I let go and get a duplicate of the symbol,
previewing the animation will actually show
| | 01:21 | us the same animation playing inside
of each of the instances of that symbol.
| | 01:25 |
| | Collapse this transcript |
| Controlling symbol playback| 00:00 | When working with animated symbols Edge
gives us a way to control the animation inside of
| | 00:05 | a symbol right from the timeline.
| | 00:07 | So in this project I have an
animation of an apple dropping.
| | 00:09 | I'll hit the Spacebar here to preview this.
| | 00:12 | So the first thing we're going to do is
select the red apple, you can either select it from
| | 00:16 | the timeline clicking the Rollup, or
you can click on actual apple itself.
| | 00:19 | We're going to right-click,
choose Convert to Symbol.
| | 00:24 | We'll name this animated_apple, then click OK.
| | 00:30 | And now what you'll notice is in the Timeline
we see these arrows here and a Playback option.
| | 00:34 | This allows us to control the playback of
the symbol, allowing us to either stop or start
| | 00:38 | this along the timeline.
| | 00:40 | So the first thing we're going to do is come
over here and select the text, or An apple a day.
| | 00:45 | With this text selected, let's turn on
our Auto-Keyframe and Auto-Transition.
| | 00:50 | Let's come up to the Opacity, let's
activate Opacity and set this down to zero.
| | 00:55 | Let's scrub the Timeline
out to about one second.
| | 00:59 | Come down here for the text
and set the Opacity up to a 100.
| | 01:03 | So now we get an animation of the text
animating up, however I want the apple to play after
| | 01:07 | the text is faded in.
| | 01:09 | So what we're going to do is come down to the
layer with the apple, move our playhead back to 0.
| | 01:14 | Under Playback we're going to click this plus
symbol here and come down and choose Stop.
| | 01:19 | Once I do that we'll see this stop
action showing up on the timeline.
| | 01:23 | Now let's grab the playhead, let's drag this
to where I want the apple to start to play,
| | 01:28 | which will be just before the animation is
done for the opacity of the text layer.
| | 01:33 | We'll come back to the
Playback and then choose Play.
| | 01:36 | So now you'll notice these arrows here are
showing us that that symbol, which has an
| | 01:39 | animation inside of it, is now going to
start playing at three quarters of a second.
| | 01:44 | So let's comeback, let's preview,
text fades in, and then the apple drops.
| | 01:49 | So even though the animation inside of the
symbol is specified to start right away, we
| | 01:54 | can override that control with this
Playback feature, issue a stop, and then decide when
| | 01:59 | we want to play it based on setting another
Playback instruction on the main timeline.
| | 02:03 |
| | Collapse this transcript |
|
|
8. Working with ActionsWhat is a trigger?| 00:00 | Timeline triggers in Edge Animate allow us
to add additional instructions on the timeline
| | 00:05 | right within the Timeline Panel.
| | 00:06 | Now inside of Edge Animate I
have pretty simple animation here.
| | 00:09 | I'll hit to Spacebar to preview this, so we
have an apple that's just dropping down and
| | 00:12 | bouncing into place.
| | 00:14 | Now in the Timeline Panel we have this
Actions Layer here and this little symbol.
| | 00:18 | This Symbol is the Insert Trigger button.
| | 00:20 | So what we can do is put triggers along the
Timeline and trigger certain events to happen.
| | 00:26 | So let's grab the Timeline playhead, we'll
drag this back to about half a second and
| | 00:30 | let's click on this Insert Trigger button.
| | 00:33 | That's going to bring up Edge's Coding window,
and on the right-hand side we have a whole
| | 00:36 | series of Snippets that will
automatically code some instructions.
| | 00:40 | At the very top we have Stop.
| | 00:42 | Let's click that and then close the window.
| | 00:44 | Now, if I were to preview this in Edge,
Edge will play right through that instruction.
| | 00:49 | Since this is JavaScript we need to preview
this in a browser, so that the browser can
| | 00:52 | interpret the JavaScript that
was written by Edge Animate.
| | 00:55 | So to preview this in a browser, let's go
to the File Menu, choose Preview in Browser.
| | 01:03 | Now we'll see the animation plays
up to a half a second and then stops.
| | 01:06 | Even though the apple has an easing effect
on it, it will still stop in this exact spot
| | 01:10 | since that JavaScript trigger on the timeline
is telling everything in the animation to stop.
| | 01:16 | Let's close our browser.
| | 01:18 | Now if we go back to this trigger, we can
double-click it and get back to the Code window.
| | 01:22 | So there are a bunch of different
things we can do inside of here.
| | 01:24 | So let's delete the stop and let's come over
here and choose the Play Reverse. Let's close this.
| | 01:31 | To Preview in Browser I am
going to hit Command+Return.
| | 01:34 | So now what will happen is the animation will
play, get to the end, and then play in reverse.
| | 01:39 | This is a great feature for a lot of
interactive projects, since we don't have to go back and
| | 01:42 | create Keyframes to undo an animation or
return the stage to its previous state.
| | 01:47 | So let's close the browser.
| | 01:49 | We can also choose when this animation happens,
so right now we are reversing the animation
| | 01:53 | before it's even complete.
| | 01:55 | We can grab the action and drag it out,
so let's drag this out to 3 seconds.
| | 02:00 | We'll preview this in a browser,
the apple will fall taking one second.
| | 02:03 | It will wait two seconds, and
then it will play in reverse.
| | 02:07 | So it plays out the two seconds, then
reverses and plays the two seconds again, giving us
| | 02:11 | a four second delay, and
then reverses the animation.
| | 02:15 | Let's close our browser and take a look at
something else we can do with our triggers.
| | 02:18 | I am going to come over
here and grab this trigger.
| | 02:20 | Let's bring this back to the 1 second mark.
| | 02:24 | So after the apple has bounced into place, I
want to change the text on the Chalkboard.
| | 02:28 | So let's come down here.
| | 02:29 | Let's double-click the
Action, let's bring this up.
| | 02:34 | And what we are going to do here is
come down and choose Set Element Text.
| | 02:37 | The name of the Element is Text.
| | 02:40 | The HTML we want to put in here is going to
be, "keeps the doctor away!", and then close.
| | 02:47 | So now instead of the animation stopping or
playing in reverse, this will stop automatically
| | 02:52 | by default, because that's the default
behavior of an Edge Animate timeline.
| | 02:56 | But once we get to the end
we're going to change that Text.
| | 03:00 | So again, let's preview this in a browser.
| | 03:02 | So now after the apple falls, the text on
the chalkboard will change to the text that
| | 03:05 | we set inside our Timeline Trigger.
| | 03:08 | So Timeline Triggers really give us the
opportunity to change the default behavior of the way
| | 03:12 | the timeline is moving and even change
properties of other elements on our composition.
| | 03:16 |
| | Collapse this transcript |
| Assigning actions to objects| 00:00 | In Edge Animate we can assign actions right to
specific objects that are part of our composition.
| | 00:05 | So in this project I have a simple animation.
| | 00:07 | I'll click the Spacebar to Preview this.
| | 00:09 | We have an apple that's just
drops down and bounces on the floor.
| | 00:13 | What I want to do here is set an
action on the actual apple itself.
| | 00:16 | So I'll come up to the Stage, select the apple.
| | 00:18 | I'm going to right-click, come down and
choose Open Actions for "red_apple" and in here we
| | 00:24 | can choose the event that we
want to actually assign the action to.
| | 00:28 | So in this I'll choose mouseover.
| | 00:30 | What I want to do here is set the Text of the
chalkboard when somebody rolls over the apple.
| | 00:35 | So on the Code Snippets on the right-hand side, I am
going to come over here and choose Set Element Text.
| | 00:39 | The Name of the Element is actually Text.
| | 00:43 | So for the value, we're going to put in, "keeps
the doctor away!", let's close this Code Window.
| | 00:49 | In order to see this we need to look at
this in a browser, since we need the browser to
| | 00:53 | interpret the JavaScript
that's been written by Edge Animate.
| | 00:56 | So let's come up to the File Menu,
let's choose Preview In Browser.
| | 01:01 | The animation will play.
| | 01:03 | Now when I roll my mouse over the apple we'll
see that the text on the chalkboard changes.
| | 01:07 | So now that that's working
properly, let's add another action.
| | 01:10 | Let's close our Web browser.
| | 01:12 | Let's come back to the Stage,
let's right-click on the apple again.
| | 01:16 | When we come down and choose Open Actions for apple,
we'll see the actions that we already put in place.
| | 01:20 | I'm going to get my cursor after the set
text instruction, let's hits a few Returns, and
| | 01:25 | let's simply click Play Reverse.
| | 01:28 | Let's close our Code Window, I am going to
hit Command+Return to Preview In Browser.
| | 01:34 | The apple drops into place, I
get my cursor, I'll roll over this.
| | 01:38 | Now the text on the chalkboard will change,
and the animation will play in reverse.
| | 01:42 | So now we have two actions that are
assigned to the apple by simply rolling over it.
| | 01:46 | Let's closer our Browser window
and add in one more instruction.
| | 01:49 | So back on the main Stage, select the apple or right
-click and go into the Actions again for the apple.
| | 01:55 | So what I want to do here is not play this in
reverse, so let's come in here and delete that.
| | 02:01 | Let's keep the text change, but
let's adds another event trigger.
| | 02:05 | So in the top left-hand corner here with
the plus sign, let's click on this.
| | 02:09 | Let's add a click event.
| | 02:11 | So for the click event we are going
to come over here and choose Open URL.
| | 02:16 | Let's replace adobe.com with lynda.com.
| | 02:21 | Let's change _self to _blank so
the link will open in a new window.
| | 02:26 | And now that we're actually going to go
over to the lynda.com website, let's go back to
| | 02:30 | the mouseover action, and all the actions
line up here, and instead of "keeps the doctor
| | 02:36 | away!", let's change that
text to "visit our website!".
| | 02:47 | Once that's in place, let's close the Code
window, and there is one more thing we are
| | 02:51 | going to want to change, since the user can
actually click on the apple and visit a website,
| | 02:55 | we want to change the cursor to look like
a pointer to indicate to the user that that
| | 02:58 | is an interactive element.
| | 03:01 | So with the apple selected, let's come over
to the Properties Panel, down here under Image
| | 03:05 | we have this category here called Cursor,
let's click on this button here and let's
| | 03:09 | assign the Pointer Tool.
| | 03:11 | So when somebody rolls their mouse over
the apple, they will get a Pointer Tool.
| | 03:15 | Command+Return, Preview this in a Browser.
| | 03:18 | The apple falls, I roll over it, I get a hand
cursor, the text changes, and if I click this
| | 03:24 | will open a new browser window and
bring us to the lynda.com website.
| | 03:28 |
| | Collapse this transcript |
| Targeting symbols with actions| 00:00 | Edge Animate allows us to take actions and
target other symbols with them, so we can
| | 00:05 | target specific symbols and
give them additional instructions.
| | 00:08 | In this project I have this simple animation
again with the apple dropping down on the
| | 00:11 | floor, but notice in the background we can see
the text on the chalkboard is also animating.
| | 00:16 | If I grab the Timeline and continue to play this,
you'll see that it animates to a second state.
| | 00:20 | So the first part says, An apple a day...,
and the second part says, keeps the doctor away.
| | 00:26 | Now if we go into this animated symbol by
double-clicking it and go into Isolation Mode,
| | 00:31 | we can see in here, in the Timeline for this
particular symbol, that the first part of the text fades out.
| | 00:36 | And then we have an instruction here, a
Timeline Trigger, that if we double-click, we can see
| | 00:41 | this is set to stop.
| | 00:43 | So when this plays in a
browser, only the An apple a day...
| | 00:46 | text will play and the animation will stop.
| | 00:48 | So what we are going to do in this lesson
is use the rollover state for the apple to
| | 00:52 | target this symbol, and tell
this symbol to play its timeline.
| | 00:56 | Then when it continues to play it's going
to fade between the first set of text and
| | 01:00 | the second set of text.
| | 01:01 | So let's come out of the
Isolation Mode for editing the symbol.
| | 01:04 | We'll click on the Stage, and now back on the
Main Stage, I first want to call your attention
| | 01:08 | to the fact that this instance name of this symbol,
which I've selected on the stage here, is set to message.
| | 01:15 | This is the instance name of that Symbol.
| | 01:16 | The instance name is different from the Symbol name,
which we can see over here in the Library Panel.
| | 01:21 | The name of the Symbol is called chalk_board_
message, but the name of the Instance is called message.
| | 01:26 | Let's click on the apple, let's right-click,
let's come down to Open Actions for "red_apple".
| | 01:31 | Now the event we want to put
this on is going to be mouseover.
| | 01:33 | Now over on the right-hand side for the
Snippets, let's come down and choose Get Symbol.
| | 01:38 | When we choose this Edge Animate will write
the appropriate JavaScript for us to be able
| | 01:42 | to get the properties of the symbol.
| | 01:44 | So right here we can see there is a variable name
called mySymbolObject and is = sym.getSymbol
| | 01:50 | and the string literal on the right-hand side is
looking for the instance name of the Symbol we want to target.
| | 01:55 | So let's type in "message" here.
| | 01:58 | Once that's in place, let's hit a few Returns.
| | 02:01 | So now what we want to do is send a Play
instruction to that symbol that we just targeted.
| | 02:05 | So let's come over here, let's double-click
and copy the symbol name, let's hit Paste,
| | 02:10 | and then type .play();.
| | 02:17 | So the recap, when we roll over the red apple
we're going to get this symbol instance that's
| | 02:23 | named message and then we're going
to send that an instruction of play.
| | 02:28 | So let's close the Code window.
| | 02:29 | Let's preview this in a browser.
| | 02:32 | The apple will drop.
| | 02:32 | Move my cursor, roll over the apple, that
will target the animated symbol for the text
| | 02:38 | on the chalkboard, and we'll see the transition play
from the first set of text to the second set of text.
| | Collapse this transcript |
| Targeting labels with actions| 00:00 | In addition to targeting symbols and elements
with actions, we can also target Timeline Labels.
| | 00:05 | Now inside of this composition, I
have the text on the chalkboard animated.
| | 00:08 | If I drag the playhead down to the zero
marker you can see the text is introduced to the stage
| | 00:12 | by animating the trim and then once the text
is on the stage we crossfade between the two
| | 00:18 | different text blocks.
| | 00:18 | I am going to double-click this element to go into
Isolation Mode and inside of the animated symbol.
| | 00:24 | So here inside of the symbol we can see
that the first part of the animation does that
| | 00:28 | wiping effect, again by animating the trim,
and then here's the crossfade to text block
| | 00:32 | 2 and then crossfade back to 1.
| | 00:35 | Now I don't want to set a loop on this symbol,
because I don't want to have the animation
| | 00:38 | go all the way back to the beginning.
| | 00:40 | Once we've the type wipe on the screen, I want
to keep it there and then just do the crossfade.
| | 00:45 | So to do that, I am going to bring the
playhead down to two and a quarter seconds, I am going
| | 00:49 | to come over here and click on this button
here, which is the Insert Label, and I'm going
| | 00:53 | to type in the word loop.
| | 00:55 | This gives us the ability to add a label to
a specific point in time within the symbol.
| | 01:00 | Now to animate to this loop point, let's grab the Timeline
playhead and move this out about to the 7 second mark.
| | 01:06 | With the playhead at 7 seconds,
let's come in here and add an Action.
| | 01:10 | That's going to bring up our Code dialog box.
| | 01:12 | From the Snippets, let's choose Play from.
| | 01:15 | By default Edge is going to put in a
time indication here, so 1000 milliseconds.
| | 01:19 | We are going to delete that, put in two
quotes for string literal, and type in the name of
| | 01:25 | the label that we added to the Timeline.
| | 01:26 | So we'll put in loop, and then close the Text block.
| | 01:30 | So, now when the playhead gets to the 7 second
mark, it's going to loop back to that Timeline
| | 01:34 | marker instead of up to the
zero marker of the symbol.
| | 01:37 | So to test this, let's choose Command+Return,
or File > Preview In Browser.
| | 01:43 | So we see in a browser the text animates open
and then crossfades from the first text block
| | 01:47 | to the second text block.
| | 01:49 | After the second text block fades away we
see it fades back to the first one, and again
| | 01:53 | we don't see that initial
animation of the type wiping on the Stage.
| | 01:57 | So by combining actions and labels we can create
alternate looping points within our animated symbols.
| | Collapse this transcript |
|
|
9. The Code PanelThe Code window interface| 00:00 | One of the great features of Edge Animate
is that it can give us access to all of the
| | 00:04 | code that it's going to
write for our entire project.
| | 00:06 | So here we have a simple project.
| | 00:07 | I will hit the Spacebar to preview this.
| | 00:09 | We have an apple that drops on the stage.
| | 00:12 | We have two actions
assigned to the apple as well.
| | 00:14 | To get to the actions let's come over and
select the apple on the stage, right-click,
| | 00:18 | and come down to Open Actions for red_apple.
| | 00:21 | In this Code window here, this is a Code
window that only has access to the individual
| | 00:25 | elements assigned to the object on the stage.
| | 00:28 | So we can see the two events
here, mouseout and mouseover.
| | 00:32 | Now I can't get access to anything else in
the project, but I can get access to just that
| | 00:36 | element that's selected.
| | 00:38 | So let's close this window, let's deselect
the apple, and instead let's come up to the
| | 00:42 | Window menu and choose Code.
| | 00:44 | Now this Code window has a few more elements
inside of it than we saw with the Code Window
| | 00:48 | that's specific to an element.
| | 00:50 | First you will see these
items on the left-hand side.
| | 00:52 | We see an element for the Stage and for
Preload, with two actions assigned to the stage.
| | 00:57 | If we look at these, we can see that these
are red_apple.mouseout and red_apple.mouseover.
| | 01:02 | Selecting each one of these will give me the
same script that we saw in the much smaller
| | 01:05 | dialog box specifically
designed for that element.
| | 01:08 | Now on the right-hand side we see this little plus
sign here, which will toggle open the snippets.
| | 01:13 | Then lastly this button here called Full Code.
| | 01:15 | So here we can see all of the code that
Edge will execute when this loads in a browser,
| | 01:21 | starting off with the generic function
that encapsulates the entire project, and if I
| | 01:25 | scroll down we can see individual elements.
| | 01:26 | First, we see the red_apple mouseover here,
and what's interesting is when we use the
| | 01:32 | Assign actions on the stage and get our
smaller code window, we only see this amount of code.
| | 01:37 | What Edge is actually writing for the
mouse over is all of this code here.
| | 01:41 | So again, if we're inside of the stage and just,
say, look at actions for that element, we just
| | 01:46 | see this little bit of code here.
| | 01:47 | Down from mouseout, again we would just see
this a little bit of code, but in this Full
| | 01:51 | Code view Edge will show us
everything that it's programming.
| | 01:54 | If we scroll down to the bottom we'll see
down here, this is the unique stage ID that
| | 01:58 | we looked at earlier on in the course where
Edge actually uses this to target the main stage
| | 02:03 | of this composition to start the entire project.
| | 02:07 | In both this larger view and the smaller view, we
do have these options in the upper right-hand
| | 02:11 | corner here where we can do things like
Show Line Numbers, Change Font Size, and choose
| | 02:15 | whether or not we would like
comments inside of our Code Snippets.
| | 02:19 | These Comments are a way that Edge Animate
will give us some notes or instructions on how
| | 02:22 | to use individual actions that we've assigned
to our objects, and help us develop the user
| | 02:27 | experience that we are trying to achieve.
| | 02:28 | Now the comments don't hurt the JavaScript
file at all to be in here, and once you get
| | 02:31 | comfortable with JavaScript and jQuery you
can turn off the commenting and then keep
| | 02:35 | your code windows a little more clean.
| | 02:37 |
| | Collapse this transcript |
| Adding stage and preload events| 00:00 | The Code window in Edge Animate allows us
to not only assign actions to the Stage and
| | 00:04 | Preloader, but to individual
elements as well from one common spot.
| | 00:08 | Now inside of this is composition let's come up to
the Window menu, let's come down and choose Code.
| | 00:12 | What we are going to do here is let's
first add an Action to the Preloader.
| | 00:17 | So let's come over here on the left-hand side, choose
Preloader, and come over here and click the plus sign.
| | 00:23 | Now inside of here we are going
to get an Action called Loading.
| | 00:26 | Let's come up here and delete all of
this content, and let's simply add an alert.
| | 00:30 | So let's type alert ('I am loading'); now
this alert is being assigned to the Preloader,
| | 00:42 | which means this alert should happen before
anything else on the Edge composition happens.
| | 00:47 | So to test this let's come up to the File menu,
let's come down, and choose Preview in Browser.
| | 00:53 | So while this loads we can see up here the
Browser hasn't even completed loading this.
| | 00:57 | It sees the JavaScript, it sees the
Preloader function, and then we get this dialog box
| | 01:01 | here saying I am loading. We'll click OK.
| | 01:04 | This might actually trigger two or three
times depending on the amount of the items that
| | 01:07 | are preloading into their composition, and
then when I click OK and the composition is
| | 01:11 | preloaded, then the animation will play.
| | 01:14 | So if there's any a JavaScript functions or
instructions you want to run before the Preload,
| | 01:18 | we can add them in using the Code window.
| | 01:20 | So let's close our browser.
| | 01:21 | Let's come back to the Code Window.
| | 01:23 | Let's select that script and delete it.
| | 01:26 | Let's come over here to the Preloader.
| | 01:27 | Let's right-click on loading.
| | 01:30 | Let's select Delete Action.
| | 01:32 | Next let's come over to the Stage.
| | 01:34 | Let's come over here click the plus sign.
| | 01:36 | Let's add an Element Trigger.
| | 01:39 | So on Elements, let's select red_apple,
which is on the Stage.
| | 01:43 | Let's come over here and
select click and then hit Return.
| | 01:47 | So now we are adding another event
function on the red_apple on the Stage, but we are
| | 01:51 | not doing it by right-
clicking and saying Open Actions.
| | 01:54 | We're doing at right from the main Code window.
| | 01:56 | So let's get our cursor down to line 2.
| | 01:58 | Let's come over to the Code Snippets.
| | 02:00 | Let's open this up.
| | 02:02 | Let's come down to Open URL, click that.
| | 02:05 | Inside of here let's change the URL from adobe.com
to lynda.com, and we will change _self to _blank.
| | 02:14 | Now with that change in place let's close the Code
window, and to see how Edge integrates everything
| | 02:19 | there we are doing regardless of which Code window,
let's come over here, select the red_apple on the stage.
| | 02:24 | Let's right-click.
| | 02:25 | Let's come down to Open Actions for red_apple.
| | 02:28 | Inside of here we'll see
another event here called Click.
| | 02:31 | So in addition to Click we
have mouseout and mouseover.
| | 02:33 | So there is no difference between adding the
event inside of this smaller window or using
| | 02:40 | the main Code window to add additional
actions to elements of our composition.
| | 02:45 | Now to test this I am
going to hit Command+Return.
| | 02:48 | This will load in the Browser.
| | 02:50 | Move my cursor over the red_apple, the rollover
state changes text, and then clicking this will
| | 02:55 | open the lynda.com website
in another browser window.
| | 02:57 |
| | Collapse this transcript |
|
|
10. Creating Responsive LayoutsGrouping elements into symbols| 00:00 | What we're going to cover in this chapter
is converting your layouts inside of Edge
| | 00:03 | Animate to work with percentage values so
that we can have designs and compositions
| | 00:07 | that will change based on the browser size.
| | 00:10 | Now to create a responsive design out of
this particular composition, we're going to want
| | 00:14 | to have elements on the stage move.
| | 00:16 | I want the blackboard and the chains to all
move together as one item and the basket full
| | 00:20 | of apples to move as another item.
| | 00:23 | So the first we are going to do
here is create symbols out of these,
| | 00:26 | so we can set a measurement property on the
symbols and not have to set measurements for
| | 00:29 | lots of individual elements.
| | 00:31 | Let's start with the chalkboard.
| | 00:33 | Let's come over here and select the text, hold
the Shift key, let's select the chalkboard,
| | 00:39 | let's select the left and right chains.
| | 00:41 | With all of these items selected, let's right-click
on the stage, or you can go to the Modify menu
| | 00:46 | and choose Convert to Symbol.
| | 00:51 | Let's call this chalkboard and then click OK.
| | 00:55 | Now in the Library panel I am
going to close up the Images.
| | 00:58 | Now under Symbols we can see our
first Symbol here called chalkboard.
| | 01:02 | You might also notice that the chalkboard
is now showing up in front of the apple.
| | 01:05 | I am going to hold the Command+[, or you
can go to the Modify Arrange menu and move the
| | 01:10 | blackboard back so that it is now behind the
red_apple, and I also want to create a symbol
| | 01:15 | out of the basket and all of the apples.
| | 01:17 | Now these items will be
easier to select in the Timeline.
| | 01:20 | So let's move over to the Timeline.
| | 01:21 | Let's scroll down here a little bit.
| | 01:23 | Let's come down and select basket bottom.
| | 01:27 | Let's hold the Shift key and let's come up
here and select all way up to basket_handle_right.
| | 01:32 | By holding the Shift key and selecting all of these
items we can see on the stage they're all selected.
| | 01:36 | Let's come up here and right-click.
| | 01:39 | Let's choose Convert to Symbol, and we'll
call this basket. Then click OK.
| | 01:46 | So now we have one movie clip with all of
the chalkboard elements, and another symbol
| | 01:50 | with the basket and all of the apples inside.
| | 01:53 | Now these two movie clips created, we basically
have five Elements on this stage to worry about,
| | 01:57 | the chalkboard, the apple, the basket,
the background graphic, and the wood floor.
| | 02:01 |
| | Collapse this transcript |
| Setting the stage measurements| 00:00 | The first property we're going to need to set
inside of Edge Animate to make our composition
| | 00:04 | responsive is the stage.
| | 00:06 | Now the first thing I need to do
for my file is change my view.
| | 00:08 | I have been working in 75% view here.
| | 00:10 | I need to come in here and change this to 100%.
| | 00:14 | So since my screen size is a little limited,
I am going to come over here to the right
| | 00:17 | and I'm going to collapse
these two panels on the right.
| | 00:20 | I need to able to see just
little bit more of my stage.
| | 00:22 | I am going to move this over.
| | 00:25 | Now that I can see more of my stage
let's come over to the Properties panel.
| | 00:31 | Inside of the stage area of Properties we will
see that we have the width set to 800 pixels.
| | 00:35 | Let's come over here to the pixels.
| | 00:37 | This turns into a button.
| | 00:38 | Let's click this and change it to percent.
| | 00:40 | Now the Width of the compositional
will be the full width of the browser.
| | 00:43 | Now let's come down to Minimum Width.
| | 00:45 | Lets change this to 550 pixels. And for Maximum
Width, let's come down here and set this to 900 pixels.
| | 00:54 | Now by setting these values we're basically
setting it up so that our project will never
| | 00:57 | get wider than 900 pixels or
smaller than 550 pixels on the horizontal.
| | 01:03 | Once we make these changes you'll notice
these little icons here showing up on the ruler
| | 01:06 | inside of our composition.
| | 01:08 | If I click on this, you'll see that it's set to
800, which is the size of the original composition.
| | 01:13 | If I click and drag this you will see
that I can actually drag this open up to 900.
| | 01:19 | If I go past 900, it won't continue to open.
| | 01:23 | But if I drag it to the left, I can drag
this all the way down to 550, and then once I go
| | 01:28 | below 550 that highlighted
area won't go down any smaller.
| | 01:32 | This gives me a live view of all of the items that
I am going to be modifying inside of Edge Animate.
| | 01:38 | So we'll just bring this back to 800.
| | 01:40 | Now the first element we are going to change
the Measurements for is going to be the floor.
| | 01:43 | With the floor selected let's
come over to the Properties panel.
| | 01:47 | First we are going to change the
Position and Size to be applied.
| | 01:51 | Once I do that you'll notice that
the X and Y change to Left and Top.
| | 01:56 | Let's come up here and change
the orientation to the right.
| | 01:58 | So now the L becomes an R.
| | 02:00 | Let's come in here and let's set that to 0.
What this basically does is set a position right
| | 02:06 | of 0 on that object, very
similar to what we do with CSS.
| | 02:10 | Now you'll see that the floor is actually
aligning to the right-hand side of the stage.
| | 02:14 | Now with the properties changed for the floor, I
can grab this guide that shows me the responsive
| | 02:18 | layout changes, drag this back and forth,
and as I make changes to the guide I am going
| | 02:24 | to get a live preview inside of Edge
Animate that's going to show me how that floor is
| | 02:28 | now going to react to the rest
of the items in the composition.
| | 02:31 |
| | Collapse this transcript |
| Adjusting the measurements of objects| 00:00 | Changing the measurements and registration
points of individual elements in our composition
| | 00:04 | will allow us to get greater control over how
those designs change when the browser size changes.
| | 00:09 | Now in our file so far we have our floor
aligning to the right-hand side of the stage, and our
| | 00:14 | stage size is dynamic, or set to 100%.
| | 00:17 | So we can see the floor actually moves
around when we move our responsive guide.
| | 00:20 | What we are going to do next is set
measurements for the two symbols we created earlier.
| | 00:25 | First, let's select the chalkboard.
| | 00:28 | Let's come over here to the Properties panel.
| | 00:30 | Over here for the X property, let's come
over here to the value unit and let's click this
| | 00:34 | to change it to percent.
| | 00:37 | Now when we come up and grab the responsive
guide and move this, you will see that that
| | 00:40 | item moves slightly on the left-hand side.
| | 00:43 | Basically, that measurement sets the left-
hand side to 5% of the overall stage size.
| | 00:48 | Let's move the stage size back to 800.
| | 00:50 | This was the original composition.
| | 00:52 | Let's grab the basket.
| | 00:54 | Let's change the registration size,
or the relative point, to the right.
| | 00:59 | Let's come down to the X property, let's click on
Pixels again, and change that to percentage.
| | 01:04 | So now when we come up here and move our
responsive guide, we can see the basket is moving much
| | 01:09 | more substantially since it's oriented to
the right-hand side of the stage and we can
| | 01:13 | see these items are collapsing down.
| | 01:18 | Now one thing we notice right away, the
basket is actually behind the chalkboard.
| | 01:21 | We wouldn't have seen this before since our
design was static, but now that the individual
| | 01:25 | items are moving around and interacting
with each other, we can now see that we need to
| | 01:28 | change the stacking order.
| | 01:30 | So let's grab the chalkboard, hold the Command+[
or Ctrl+[ and move that to the background.
| | 01:36 | Or again, you can use the
Arrange menu under the Modify menu.
| | 01:40 | So now that the layering is correct
let's come up here and let's move this down.
| | 01:44 | We set a minimum size of 550.
| | 01:47 | When I move this down, I can see that we
really don't have a lot of room for 550.
| | 01:51 | We can make some adjustments.
| | 01:52 | So first let's select the chalkboard.
| | 01:54 | Let's come over here and
let's dial this down a little bit.
| | 01:58 | Bring this to around 2%.
| | 02:01 | Let's grab the basket.
| | 02:03 | Let's move this to the right a little bit.
| | 02:05 | Even with moving these out a little bit,
I still need a little bit more room.
| | 02:09 | Now to test to see how much room I need,
I am going to come back to the responsive
| | 02:12 | guide and drag this out so that
I can see all of the ellipses.
| | 02:16 | I don't want the basket
to touch any of the text.
| | 02:19 | So if I come out to about 575, that's
going to give me just about enough room for all
| | 02:23 | of my design elements.
| | 02:25 | So I have two choices, I can either resize
my artwork or I can change the stage size.
| | 02:31 | To change the stage size, make sure nothing is
selected, come back to the Properties panel,
| | 02:35 | let's come up here to the Minimum Width, and
let's change that to 575, and then hit Return.
| | 02:43 | Now my responsive guide in the stage won't
go below 575, and now I have ensured that my
| | 02:47 | design will work at the lowest size and the
highest size of my responsive composition.
| | 02:51 |
| | Collapse this transcript |
| Using presets for responsive layout| 00:00 | Edge Animate contains presets that we can
assign to individual elements to help make
| | 00:04 | our design responsive.
| | 00:06 | Now inside of this file in the upper right
hand corner if I grab the responsive guide,
| | 00:10 | we can see that we have the chalkboard and the
basket already set to use percentage-based measurements.
| | 00:15 | However, the apple in the center isn't moving.
| | 00:19 | So let's select the apple, and instead of
trying to figure which settings we need to change
| | 00:23 | in order to get this to be responsive, we
are going to come over here to and click on
| | 00:26 | this button here, which is the
presets for responsive layout.
| | 00:29 | Once we have this selected, let's come down here
and we can see all of these different settings.
| | 00:33 | The top two here have to do with the
object's scale and position on the stage.
| | 00:37 | The bottom ones here have to do with
background images that are inside of certain elements.
| | 00:41 | For the apple we are going to come up here
and select the very first one, Scale Position.
| | 00:45 | Once I select this, let's
come over here to the right.
| | 00:47 | After Edge explains to us what
it's going to set, we can click Apply.
| | 00:52 | After I click Apply, you will see that we
have some percentage values that are now set
| | 00:55 | inside of the Properties panel, and if we
come up here to our responsive guide, drag this
| | 01:00 | around, we can see the
apple is now moving as well.
| | 01:04 | So I'll grab this responsive guide and drag
this down as low as it can go, which is 590 pixels.
| | 01:10 | We can see the apple is now
overlapping some of the text.
| | 01:13 | So in the lowest state let's come over here to
the Properties panel, let's scrub the X value.
| | 01:20 | Let's increase this a little bit so that the
apple won't actually intersect with the type.
| | 01:23 | Now that we have the apple positioned
properly, let's work on the background graphic.
| | 01:28 | So let's come up here to the responsive guide.
| | 01:30 | Let's drag this out to 800 pixels.
| | 01:33 | In the original composition I wanted to
have the rays emanating from behind the basket.
| | 01:36 | However, when I resize this, we can see
that the background graphic is remaining static,
| | 01:40 | and I don't want to be able
to see the center point here.
| | 01:43 | So I'm going to move the
responsive guide back to 800.
| | 01:46 | Let's select the background, and I can tell
the background is selected by the fact that
| | 01:50 | it's selected here in the timeline.
| | 01:52 | Now with the background selected,
let's come up to the Properties panel.
| | 01:55 | Let's come over to our
presets for responsive layout.
| | 01:58 | Let's come down to the background settings, and the
first one I'd like to try would be Scale Background.
| | 02:03 | So I'll select this, click Apply, let's come up
here to our responsive guide. Let's move this.
| | 02:10 | So as I increase this, I can see the
background is scaling up, and when I get below 800, it
| | 02:15 | starts to scale down.
| | 02:17 | But this is also giving me the undesired
effect because I don't want to see the center point
| | 02:21 | of all of those rays.
| | 02:23 | So let's bring this back to 800.
| | 02:24 | I still have the background selected.
| | 02:27 | Let's come over to the preset and let's come
down and change this to Center Background Image.
| | 02:32 | Then click Apply.
| | 02:34 | Now if I come up here and grab our responsive
rule, I can see that this has a more aesthetic
| | 02:39 | effect with the background.
| | 02:41 | So it does actually move.
| | 02:42 | But if I come up here to 900, in the upper
left hand corner I can start to see the edge
| | 02:47 | of that SVG graphic.
| | 02:48 | So I have two choices here.
| | 02:50 | One, I can go back to
Illustrator and recreate a larger graphic.
| | 02:54 | Or the second option is I can
actually change the orientation point.
| | 02:58 | So to change the orientation point here I am
going to simply click on the background graphic.
| | 03:01 | I am going to move this a little bit to the
left, and instead of having the rays emanate
| | 03:06 | from behind the basket, I am going to bring
these down to about the middle of the floor
| | 03:10 | and into the middle of the composition.
| | 03:11 | Once I have moved that, let's come back to
our responsive guide and now I can see the
| | 03:16 | background graphic positions itself
with the center of the composition.
| | 03:20 | So now that we have all of our responsive
measurements in place, let's test this in a browser.
| | 03:24 | We'll come up to the File menu,
choose Preview in Browser.
| | 03:27 | Now we'll see the apple drop into place.
| | 03:30 | Let's come over here and resize the browser.
| | 03:33 | Notice the design won't go wider than 900, but as
soon as we get under 900, the design starts to respond.
| | 03:40 | I can see all of the elements moving.
| | 03:42 | Once we get under 575 pixels the browser will lock
the width and then will invoke horizontal scrolling.
| | 03:48 | So let me open this back up.
| | 03:51 | So at this particular state
right here, let me just hit Reload.
| | 03:53 | You will notice that the apple animates in its
current place, the chalkboard symbol fades up the type.
| | 03:59 | I'll open the window up a
little bit more and hit Reload.
| | 04:02 | As you can see all of the individual elements
are responding to the size of the composition.
| | 04:07 | However, all of the individual animations
inside of the symbols and on the stage are
| | 04:11 | still playing regardless of their
position in the overall composition.
| | 04:15 | So by combining percentage-based measurements
and using the presets for responsive layout,
| | 04:20 | Edge Animate gives us some really quick and
efficient ways to create compositions that
| | 04:23 | can scale and adapt to the size of the browser.
| | 04:26 |
| | Collapse this transcript |
|
|
11. Using Web Fonts in Edge AnimateUsing fonts from Adobe TypeKit| 00:00 | In this lesson we are going to add some web fonts
to our Edge Animate composition using Adobe Typekit.
| | 00:05 | Now inside of this composition what I'd like
to do is use a custom font for the text that's
| | 00:08 | inside of the chalkboard here.
| | 00:10 | So the first thing we need to do is log in to
our Adobe Typekit account through a web browser.
| | 00:15 | Now once you have logged into your Typekit
account let's come over here to the upper
| | 00:19 | right-hand corner, choose Lunch Kit Editor.
| | 00:23 | This is going to show me all of the
fonts that I have activated in this kit.
| | 00:26 | One setting you want to make sure
you have set is under Kit Settings.
| | 00:30 | For your Domains, make sure
you have localhost and 127.0.0.1.
| | 00:36 | You can see those as a note
down here underneath that field.
| | 00:39 | This will allow you to preview Typekit fonts
on your local machine when you preview from
| | 00:43 | browser inside of Edge Animate.
| | 00:46 | Since I have these set
already I am going to hit Cancel.
| | 00:49 | Inside of my Typekit I am going to come down and
choose the font that I have selected called Edo.
| | 00:53 | With this font selected I am first
going to come up here and choose Embed Code.
| | 00:57 | That's going to bring up a modal dialog
window where I can come in here and copy these two
| | 01:00 | lines of JavaScript.
| | 01:02 | Let's copy these to the clipboard.
| | 01:04 | Back inside of Edge Animate, over in the
Library panel, under the Fonts area, let's go over here
| | 01:09 | to the right, click on the plus sign.
| | 01:12 | This is going to bring up a dialog box inside
of Edge Animate that's going to want two things,
| | 01:15 | the font name and the Embed Code.
| | 01:18 | Now we have the Embed Code on the clipboard.
| | 01:20 | Let's come in here and paste it.
| | 01:22 | Now for the Font Name, we need to go
back to Typekit to get the exact CSS name.
| | 01:27 | Now back in the Typekit
website let's close the Embed Code.
| | 01:31 | I still have my font selected.
| | 01:33 | In the upper left hand corner, I can see
this link here that says Using fonts in CSS.
| | 01:37 | Clicking on this link will bring up another modal
dialog window where I can see the actual name of the font.
| | 01:42 | Let's come down here, and I can see
that it's named Edo inside of quotes.
| | 01:47 | So what I want to do is come in here and
select just the font names, not the semicolon.
| | 01:52 | Let's copy that to the clipboard.
| | 01:54 | Now back in Edge Animate I am going to highlight the
Font Fallback List here and then paste in those names.
| | 02:00 | Once those are both in
place let's choose Add Font.
| | 02:02 | Now I can see in the lower right
hand side I have the font called Edo.
| | 02:06 | Now I need to assign this to that text field.
| | 02:08 | So let's come over here.
| | 02:10 | When I select this item, this is a symbol.
| | 02:12 | So let's double-click it,
go into Isolation mode.
| | 02:15 | Now I am inside the individual symbol.
| | 02:17 | I'll click again to select the text block.
| | 02:20 | Once I have the text block selected I
can come over here to the Properties panel.
| | 02:23 | Under text I am going to grab the Font menu,
and now I can see the custom font that I have
| | 02:27 | added from Typekit is showing up here.
| | 02:30 | I'll select my web font and then I'll see
right on the stage the font actually changes.
| | 02:34 | Now in some cases you may
not see the font change.
| | 02:37 | This depends on the configuration of your
computer and the settings you have picked
| | 02:40 | inside of your Typekit account.
| | 02:42 | If you don't see the font changing here, you
can simply come up to File > Preview in Browser.
| | 02:52 | Then the animation will play and you will
see the font inside of your Preview in Browser.
| | 02:57 | You will also see in the URL
field of the browser the 127.0.0.1.
| | 03:02 | This is a common localhost IP address, and
this is also the number that we added to our
| | 03:06 | Typekit settings in addition to the word
localhost, which again, tells Typekit to allow us to see
| | 03:11 | that font on our local machines in
addition to up on our web server.
| | 03:15 | So by adding Embed Code and Font names from
the Adobe Typekit website, we can add these
| | 03:19 | web fonts to our Edge Animate compositions.
| | 03:21 |
| | Collapse this transcript |
| Using fonts from Google| 00:00 | In this lesson we are going to add some web fonts to
our Edge Animate composition using Google Web Fonts.
| | 00:05 | Now to add a Google Web Font to our Edge
Animate composition, first we need to go over to the
| | 00:09 | Google Web Font site.
| | 00:11 | On the Google Web Font sit I
first want to search for a font.
| | 00:14 | Let's come over here to the Search field.
| | 00:17 | Let's type in loved.
| | 00:18 | I want to search for the font
Loved by the King, this one here.
| | 00:22 | Now we don't have to have a specific account
since most of the fonts on Google Web Fonts are free.
| | 00:27 | So when I find this font, I can come over here
and click on this link here that says Quick-use.
| | 00:33 | Clicking on that link will give
me all of the font properties.
| | 00:36 | Let's scroll down here.
| | 00:38 | Inside of this tabbed panel, let's
first come over to the Javascript tab.
| | 00:42 | I'll scroll up here a little bit.
| | 00:44 | Let's come in here and
select this entire script.
| | 00:47 | Let's copy that to the clipboard.
| | 00:49 | When we move back over to Edge Animate, over
in the Library panel under the Font section,
| | 00:54 | let's come over here to the
right and click on the plus sign.
| | 00:57 | In this dialog box here Edge Animate wants
two pieces of information, the Embed Code
| | 01:01 | and the Font Name and Fallback list.
| | 01:04 | So let's click inside of Embed Code.
| | 01:06 | Let's paste in that Javascript
we got from the Google website.
| | 01:08 | Next, we are going to need
the Font Fallback List up here.
| | 01:12 | Let's switch back to the Google Fonts Website.
| | 01:14 | Back on the Google Web
Font site, let's scroll down.
| | 01:18 | Under section 4 we can see the font-family name.
| | 01:22 | Let's come in here and let's select Loved by
the King, and the comma, and then the Fallback
| | 01:27 | Font of just cursive.
| | 01:29 | Let's copy that to the clipboard.
| | 01:31 | Back in Edge Animate under the Font Fallback
list, let's paste those and then click Add Font.
| | 01:36 | Now we'll see that font shows up in
the Library panel under the Font section.
| | 01:40 | Now to apply this to our font let's
select this symbol that has the text.
| | 01:44 | Let's double-click this
to go into Isolation mode.
| | 01:47 | Let's select the text field again.
| | 01:49 | Now we can see that we
have the text item selected.
| | 01:51 | From the text dropdown menu in the Properties
panel let's come down and choose Loved by the King.
| | 01:56 | Once we select this we'll see the
font show up right on the screen.
| | 01:59 | Now I might want to make a few adjustments here.
| | 02:01 | So inside of the Properties under Text,
we see this little expansion button here.
| | 02:05 | If I click this we can get access
to some additional text properties.
| | 02:09 | First I might want to change the line-height.
| | 02:11 | So I can grab this and sort
of scale this up and down.
| | 02:15 | We can also come up here
and change the font size.
| | 02:17 | So I'll adjust that first and
then adjust the line-height.
| | 02:22 | Once I have the settings the way I want, I
can test this in a browser by going to the
| | 02:26 | File menu and choosing Preview in Browser.
| | 02:31 | So by adding our Embed Code and the actual
font name in the Fallback List, we can activate
| | 02:36 | web fonts inside of our Edge Animate project
coming directly from the Google Web Fonts service.
| | Collapse this transcript |
| Using fonts from Extensis WebINK| 00:00 | In this lesson we are going to be adding
some web fonts to our Edge Animate composition
| | 00:04 | using Extensis WebINK.
| | 00:06 | Now before I can define a font inside of Edge
Animate here I'll need some information from
| | 00:10 | the Extensis WebINK website.
| | 00:12 | Now on the WebINK website I
already logged into my account.
| | 00:15 | I am going to come up to the top
tab here and choose Type Drawer.
| | 00:19 | I choose my project.
| | 00:21 | So inside this project, I have a
font called Toms Hand Written Regular.
| | 00:25 | What I am going to do above here
is come over here to the Get CSS.
| | 00:29 | Click on this link.
| | 00:31 | This is going to give me all of the
information that I need to know about the font.
| | 00:34 | In the first section here I have a link for non-secure
pages, and below it we have a link for secure pages.
| | 00:40 | So basically the difference is whether it has
HTTP, or it runs from a secure server with HTTPS.
| | 00:47 | I am going to select the first one here,
copy that to the clipboard, and then move back
| | 00:52 | over to Edge Animate.
| | 00:54 | On the right-hand side, in the Library panel, under
Fonts, let's come over here and click the plus sign.
| | 00:59 | This is going to give us a dialog box that
wants two pieces of information, the Embed
| | 01:03 | Code and the Font Fallback List.
| | 01:05 | So that piece of code that we just copied from
the Extensis website goes into the Embed Code.
| | 01:10 | So let's click here and activate that field.
| | 01:13 | Let's paste the Embed Code in.
| | 01:14 | Now we are going to need the name of the
actual font to go into the Fallback List.
| | 01:18 | Let's switch back to the WebINK website.
| | 01:21 | Back on the WebINK website,
let's continue to scroll down.
| | 01:26 | We'll see information about the CSS Properties
inside of the Font faces included in the link.
| | 01:31 | So let's come over here, and under
Font-Family Name, let's copy this.
| | 01:37 | Let's switch back to Edge Animate.
| | 01:39 | Inside of Edge Animate, let's add a quote.
| | 01:41 | Let's paste the font name, another quote, and then
a comma, and let's add san-serif as another Fallback.
| | 01:51 | Then choose Add Font.
| | 01:53 | Once we have completed that we'll see
the font show up over in the Library panel.
| | 01:57 | Now to apply this to that text
field let's come over here to the stage.
| | 02:01 | Let's select this symbol
that contains the chalkboard.
| | 02:03 | Let's double-click to go
into the Isolation mode.
| | 02:06 | Let's select again to select the type field,
and over here in the Properties panel, under
| | 02:10 | the Text drop-down menu, let's select this
and we'll see the font that we just added
| | 02:14 | from Extensis WebINK.
| | 02:17 | Once I select the font we'll
actually see it changed on the stage.
| | 02:20 | Inside of the text properties panel
there is this little expansion button here.
| | 02:24 | You can toggle this open and closed.
| | 02:26 | In its open state you'll get access to some
additional properties for our font formatting.
| | 02:31 | The first thing I'll do is come up
here, and let's scrub the size of the type.
| | 02:35 | Make this a little bit bigger, and
then I'll decrease the line-height.
| | 02:42 | Once I get these looking the way I want,
let's come up to the File menu, and let's choose
| | 02:45 | Preview in Browser.
| | 02:48 | In the browser we can see the WebINK
font running inside of our composition.
| | 02:52 | So by adding the Embed Code and the Font
Fallback Name, we can add fonts from Extensis WebINK
| | 02:57 | right into our Edge Animate compositions.
| | 02:59 |
| | Collapse this transcript |
| Using fonts from Edge Web Fonts| 00:00 |
Edge Animate 1.5 includes a great service
from Creative Cloud called Edge Fonts.
| | 00:04 |
To follow along in this example, go into
Chapter_11, open up Edge Web Fonts and
| | 00:09 |
then web_fonts.an.
Inside of Edge Animate, on the right hand
| | 00:12 |
side, under the library panel, we have a
fonts category here.
| | 00:16 |
Simply come over here and click on the
plus sign.
| | 00:18 |
Edge Web Font will open by default.
In previous chapters, we talked about how
| | 00:22 |
to add a custom font to your library, and
you can click on the custom tab here to
| | 00:26 |
access that method.
But under Edge Web Fonts, let's come down
| | 00:30 |
here and click inside of the search
field, and we can do a live search, based
| | 00:33 |
on Adobe's Typekit service.
I want to look for a handwriting font.
| | 00:37 |
So I'll start by typing hand, I'll get a
live sort here.
| | 00:39 |
So let's come down here.
I'm going to pick just another hand.
| | 00:43 |
Then simply click Add Font.
This will automatically add the necessary
| | 00:47 |
JavaScript in CSS to our composition to
activate this web font.
| | 00:51 |
Now to use this, let's come up to the
stage.
| | 00:53 |
Let's double-click on this animated
symbol.
| | 00:56 |
This'll bring us into isolation mode.
Let's select this text field here.
| | 01:00 |
In the Properties panel, we can see this
is currently set to Arial, Helvetica.
| | 01:04 |
Let's select the drop-down menu, and then
select just-another-hand comma cursive to
| | 01:09 |
apply this font.
Next let's come down to size.
| | 01:12 |
Let's scrub the size up a little bit.
going to bring this up to around 102.
| | 01:17 |
Then open up the additional text
properties with this little arrow here.
| | 01:21 |
Let's come down here and let's decrease
the line height.
| | 01:25 |
Bring this somewhere around 85.
So as you can see edge web fonts give us
| | 01:29 |
a really quick and integrated way to work
with Adobe Typekit inside of Edge Animate.
| | 01:33 |
| | Collapse this transcript |
|
|
12. Considering Older Web BrowsersCreating a poster image| 00:00 | Edge Animate gives us a really quick way
to add a poster image to our composition.
| | 00:04 | Now a poster image is a static graphic that shows
in place of an edge composition before it loads.
| | 00:09 | You'll see this in some interactive
projects like digital magazines and iBooks.
| | 00:13 | So to create a poster frame image
let's come down to the timeline.
| | 00:16 | We can grab the playhead and scrub through
the animation and find the exact frame that
| | 00:20 | we want to use for our poster image.
| | 00:22 | Once we find that exact frame, let's
come over to the Properties panel.
| | 00:26 | Next to the Poster image, let's come
over here and click on the camera.
| | 00:30 | This will bring up the dialog box, which will
let us capture the current state of the playhead.
| | 00:34 | So down here I'll just click Capture.
| | 00:36 | As soon as I click Capture, you will
notice over in the Library panel we now see this
| | 00:40 | Poster.png that was created for us.
| | 00:43 | Now there are two places that
this poster frame will be referenced.
| | 00:46 | First is in the Publish Settings,
especially for digital magazines and for iBooks, but
| | 00:50 | we also might want to use it for a down-level
stage, which we'll talk about in the next lesson.
| | 00:54 | So first let's come over
and click Publish Settings.
| | 00:57 | So inside of Publish Settings let's come
over to the Animate Deployment Package.
| | 01:00 | We'll see that the Poster Image has now been
set to the one we just created, and if we come
| | 01:05 | over here to iBooks / OS X, we'll also
see Poster image is set here as well.
| | 01:09 | Now we'll talk more about the Publish
Settings in a later chapter, but just realize that
| | 01:13 | creating that Poster image Edge will automatically
create the necessary settings for the different
| | 01:17 | publish options when we create that.
| | 01:19 | Let's come down here and choose Save.
| | 01:21 | So using the Capture tool inside of Edge
Animate, we now have a poster frame that we can use
| | 01:25 | for a down-level stage for older browsers,
and interactive projects that will show the
| | 01:29 | poster frame to initiate our composition.
| | 01:31 |
| | Collapse this transcript |
| Creating a Down-Level Stage| 00:00 | Edge Animate provides us a really elegant
way of creating an alternate composition for
| | 00:04 | older web browsers.
| | 00:06 | Now the idea behind a down-level stage is
that we create a composition that older browsers
| | 00:09 | can see while more modern browsers see all of the
interactivity and animation that we are creating.
| | 00:14 | To activate the Down-level Stage in the
Properties panel, come over to Down-level Stage and click
| | 00:19 | on the Edit button.
| | 00:20 | You will see in the stage area we are now
inside of what looks like a symbol, and we
| | 00:25 | can get back to the main stage here, very much
like being inside of Isolation mode, but inside
| | 00:29 | of this Down-level area what we can do is
drag artwork and assets from our Library panel
| | 00:34 | and create an alternate composition, but
most likely you'll want to use the Poster image.
| | 00:38 | So notice in the Properties panel we have
the Insert Poster image set here already.
| | 00:43 | So if you have created a Poster image for
your composition, you can click the Insert
| | 00:46 | button and have it added automatically.
| | 00:49 | Now with the graphics selected you will
also notice that we can add a link to this.
| | 00:52 | So let's come in here and add a
link to lynda.com, http://lynda.com.
| | 01:01 | The idea behind this link is if somebody
can't see the composition, they will at least see
| | 01:05 | this particular Down-level Stage and they
can link to another area where you might have
| | 01:10 | the same content, just not in an
animated or interactive format.
| | 01:14 | In addition to adding the poster frame, we
can come over to the Assets panel and add
| | 01:17 | additional content.
| | 01:19 | So I'll just grab the green apple here
and just drag and move this in here as well.
| | 01:22 | I'll open the stage up a little bit.
| | 01:24 | Now I can come in here
and add additional artwork.
| | 01:27 | We can even add additional content and text,
but you'll notice down here that the timeline
| | 01:31 | has been disabled, and again the assumption
here is that the browser doesn't support some
| | 01:35 | of things we are doing with
our animation and interactivity.
| | 01:38 | So we want to have a much more simplified
stage here that the browsers can see instead.
| | 01:43 | Once you have completed your Down-level Stage,
you can simply come up to the top of the Stage,
| | 01:47 | click on the Stage icon here, come out of
the Isolation mode for the Down-level Stage,
| | 01:52 | and then continue working on your project.
| | 01:54 | So by activating a Down-level Stage inside
of Edge Animate, Javascript will be used to
| | 01:58 | determine what the browser is capable of showing,
and Edge Animate will do the programming automatically
| | 02:03 | to show them the Down-level Stage, versus the
interactive animated content that we've been
| | 02:07 | creating throughout this course.
| | 02:08 |
| | Collapse this transcript |
| Adding a preloader for your project| 00:00 | Edge Animate gives us the ability to
customize the Preloader inside of our composition.
| | 00:05 | Now by default Edge is automatically
going to preload all of our compositions.
| | 00:08 | We have the ability to edit the Preloader
and show alternate content to the user while
| | 00:13 | all of the frameworks and assets are
being loaded into the user's browser.
| | 00:17 | To edit the Preloader, let's come down here
to the Preloader area and let's choose Edit.
| | 00:21 | By default, the JavaScript that's going to
perform the Preloader is going to take 4 kilobytes,
| | 00:24 | and we can see that up here. In the main
Stage area, very similar to the Download Stage,
| | 00:30 | we can put together a
preloading screen that the user will see.
| | 00:34 | We also have a series of Preloader Clip-Art.
| | 00:36 | So let's come up here and
choose Insert Preloader Clip-Art.
| | 00:40 | I'll select the first item here.
| | 00:41 | These are a series of animated GIFs that will just
play in a loop while the content is being loaded.
| | 00:46 | With one of these selected
let's come down and choose Insert.
| | 00:50 | We can see the animated
GIF playing on the stage.
| | 00:52 | We also get a readout here of how
much data the Preload is going to take.
| | 00:57 | We have just added 1 kilobyte of data for images
in addition to 4 kilobytes of data for JavaScript.
| | 01:02 | So now the Preload is going to take 5 kilobytes.
| | 01:04 | Now we can come over to the
Library panel and add additional artwork.
| | 01:08 | So maybe I want to grab the green apple, drag it to this
stage. I'll do Command+[ or Ctrl+[ and move that to the back.
| | 01:16 | Now I'll have a preloading screen
that's more interesting to look at.
| | 01:19 | However, when I click on the stage and come
over here, now I have increased my Preloader
| | 01:22 | from 5 kilobytes to 18 kilobytes.
| | 01:24 | So I am sort of going backwards in the
idea that I want to have the Preloader load as
| | 01:28 | quickly as possible to indicate to the
user that more content is being loaded.
| | 01:33 | So if I decide against having the extra artwork,
I'll come over here to the stage, delete that,
| | 01:37 | and now I can see the
Preloader is back to 5 kilobytes.
| | 01:40 | Now once you have your Preloader screen set
up the way you like it, let's come back up
| | 01:43 | to the stage item here, come out of the
preloading isolation mode, and back to our main stage.
| | 01:49 | There is another option you'll see under
the Preloader and that is this drop-down menu.
| | 01:53 | There are two choices in
here, Immediate and Polite.
| | 01:56 | Now if you choose the Polite setting, what that
does is, Edge won't load all of the frameworks
| | 02:01 | for this composition until
the page load has happened.
| | 02:04 | Now if you choose Polite, this allows other
frameworks used in your website to load before
| | 02:08 | the Edge Animate composition begins to load.
| | 02:10 | If you choose Immediate, all of the
frameworks will start to be loaded into the browser the
| | 02:14 | second the HTML hits the browser so that the
composition can be played as quickly as possible.
| | 02:19 | These two choices give you the utmost
control on whether or not the Edge compositions are
| | 02:23 | going to wait for other items or start
to play immediately inside the browser.
| | 02:26 |
| | Collapse this transcript |
|
|
13. Working Between Edge Animate ProjectsWorking with multiple open documents| 00:00 | Edge Animate allows us to have more than one
document open at a time, and we can share animations
| | 00:04 | and elements across compositions.
| | 00:07 | Once you have the first project opened in Edge
Animate, let's go back to the operating system.
| | 00:11 | Let's come down and open sample_project_2.an.
| | 00:14 | Now when you have more than one document open
inside of Edge Animate, above the stage we'll
| | 00:18 | see a drop-down menu.
| | 00:19 | This menu will show you the two
different projects you have open.
| | 00:23 | So I can come back here and switch to
project_1 or switch over to project_2.
| | 00:27 | Now the first thing we'll do is share an
animation that we have set in project_1 with project_2.
| | 00:33 | In here in project_2 if I hit the Spacebar
to preview this animation, the only thing
| | 00:37 | animated here is the symbol on the stage.
| | 00:39 | Let's come back to project_1.
| | 00:41 | Hitting the Spacebar here, we can see we
have an animation of the apple dropping.
| | 00:46 | So let's come down here, select the apple,
this will also select the apple on the timeline.
| | 00:50 | We are going to come down here and click on
the top bar here, the rollup, to select all
| | 00:55 | of the different keyframes.
| | 00:57 | Let's come up to the Edit menu, let's choose
Copy, let's switch over to project_2, let's
| | 01:04 | select the red apple, then go back
to the Edit menu, and choose Paste.
| | 01:09 | So now we have taken all of the animated
elements from the first project and applied them to
| | 01:12 | the second project.
| | 01:14 | With these in place let's
grab this entire animation.
| | 01:16 | Let's slide this back.
| | 01:19 | Hit the Spacebar to preview, and now
we have the animation on the red apple.
| | 01:25 | To apply the same thing to the green
apple let's select that, choose Edit > Paste.
| | 01:29 | Then we'll drag the composition back so
that the green apple happens just a little bit
| | 01:34 | after the red one, and now we have shared
animation properties from one apple in project_1 to
| | 01:39 | two different apples inside of project_2.
| | 01:42 | Now the other thing we can
do is share elements as well.
| | 01:44 | So in project number 1 we don't have any
green apples in that particular composition.
| | 01:48 | Here in project_2 we have
some green apples and red apples.
| | 01:51 | So let's come over here to the stage.
| | 01:53 | Let's select the green apple.
| | 01:53 | I am going to hit Command+C or
Ctrl+C to copy that to the clipboard.
| | 01:57 | Let's switch back to project_1 and hit Command+V
or Ctrl+V to paste that on the stage, and now
| | 02:04 | we can see we now have a
green apple in our composition.
| | 02:07 | What this does in addition to putting the
green apple on the stage is you will notice
| | 02:10 | that we now have a green
apple in our assets as well.
| | 02:13 | So what this means is I can delete this from
the stage, come into the basket, let's select
| | 02:19 | this one apple here.
| | 02:21 | Let's come over to the Properties panel.
| | 02:23 | Down under the images area, let's switch
the image from red apple to the green apple.
| | 02:27 | Now of course what this also means is the
green apple artwork has now been added to
| | 02:31 | our operating system as well.
| | 02:33 | So if we go back and look in our operating
system under sample_project_1, if I open the
| | 02:37 | images directory now, we'll see that a copy
of the green_apple.png file has been copied
| | 02:41 | from project_2 into project_1.
| | 02:44 | So having multiple documents open inside of
Edge Animate gives us a really quick and efficient
| | 02:47 | way to share content across compositions.
| | 02:49 |
| | Collapse this transcript |
| Exporting and importing symbols| 00:00 | Edge Animate gives us a special way
to share symbols across compositions.
| | 00:04 | Now in this composition we have a symbol on
the stage, the chalkboard symbol here, and
| | 00:08 | we can see over in the Library panel, under
the Symbols area, we see the chalkboard symbol.
| | 00:12 | So one option is we can copy this and paste
it into another open project and it will copy
| | 00:16 | this symbol to that new project.
| | 00:18 | But with symbols we have
another way that we can share these.
| | 00:20 | If we right-click on a symbol in the
Library panel, come down and choose Export, we'll
| | 00:25 | get a Save dialog box, which will allow us to
save this individual symbol as its own file.
| | 00:31 | So I'll name this chalkboard.ansym,
which is short for animate symbol.
| | 00:36 | Then come over here and choose Save.
| | 00:39 | Now we have a copy of that entire
symbol saved in its own separate file.
| | 00:42 | To import symbols, let's
come up to the File menu.
| | 00:46 | Let's just create a blank, empty composition
inside of Edge over in the right-hand side,
| | 00:51 | under the Library panel, under Symbols.
| | 00:53 | Let's come over here to the plus sign.
| | 00:55 | I'll click the plus sign, choose Import Symbols.
| | 00:59 | Now from the desktop we'll see
the chalkboard.ansym. Click Open.
| | 01:04 | That will put the chalkboard in my library
panel, which I can click and drag, drop this
| | 01:09 | on the stage, hit the Spacebar to preview,
and now the Edge symbol that we saved as a
| | 01:13 | separate file is now imported and playing
properly in a brand-new Edge composition.
| | 01:17 |
| | Collapse this transcript |
|
|
14. Publish SettingsPublishing for the web| 00:00 | Edge Animate gives us a variety of options
for publishing our composition out to a website.
| | 00:04 | Now, with our composition open, let's come up
to the File menu, let's choose Publish Settings.
| | 00:09 | In this dialog box, we have three main targets
that we publish out to: Web, Animate Deployment
| | 00:14 | Package, and iBooks.
| | 00:15 | First, let's come over here and choose Web.
| | 00:18 | Under the Web settings, we
have a couple of options.
| | 00:20 | First is the Google Chrome Frame.
| | 00:22 | This is a technology from Google, which will
enable Internet Explorer 6, 7, and 8 to play
| | 00:27 | more modern-based websites.
| | 00:29 | If you check this option, you have the additional
option of choosing whether or not there's a prompt.
| | 00:34 | And the prompt can either be from
the iFrame Prompt or an Overlay Prompt.
| | 00:38 | You can also choose No Prompt, in which case
the technology from Google will be added to
| | 00:41 | your HTML page when users
are using those browsers.
| | 00:45 | And if you choose not to use the Google
Chrome Frame, then the users who are using those
| | 00:48 | browsers will see the down-level stage
that we set up earlier in the course.
| | 00:52 | The next option is to
load frameworks from a CDN.
| | 00:55 | This is a Content Delivery Network.
| | 00:56 | So, instead of having jQuery copied to your
machine and loaded from your server, you can
| | 01:01 | opt to have jQuery
loaded from an outside source.
| | 01:04 | In this case, it's going to
load it from Google's API website.
| | 01:07 | Then lastly we have the ability
to publish content as static HTML.
| | 01:11 | I'm going to leave this unchecked for the
first path, and we'll take a look at what
| | 01:14 | the Edge Animate writes
when we publish this out.
| | 01:17 | So now to publish this, I'm going to come
up here and just move the background document
| | 01:20 | over to the right here.
| | 01:22 | I want you to be able to see the
Chapter_14 folder on the operating system.
| | 01:26 | Now, inside of the Publish Settings, I'm going
to come down and click on this Publish button.
| | 01:29 | Once I do that, the dialog box will go away,
and we'll see that we have a brand-new Publish
| | 01:34 | folder in the operating system.
| | 01:36 | So, let's come over to the operation system.
| | 01:38 | Let's open up this Publish folder.
| | 01:40 | We have the first folder in here called Web,
which is the first of the three options we
| | 01:43 | have in our Publish Settings.
| | 01:45 | And inside of here, we have our Includes,
our Images, all of our JavaScript, and our HTML.
| | 01:51 | We basically get the same set of files from our main
project folder but without the Edge Animate document.
| | 01:56 | So, to take a look at the HTML, let's grab
this HTML and open this up in a text editor.
| | 02:01 | So in a text editor here, we can see that we
have a script at the top, which first loads
| | 02:07 | our edgePreload, and this JavaScript in
turn loads all of the other JavaScript for the
| | 02:11 | page, and all of the
assets and does the preload.
| | 02:14 | We have a style element here.
| | 02:17 | And then down here, notice we have just one
single div with an ID and a class of the stage
| | 02:22 | ID name that we saw when we created our
composition, and everything else gets injected or added
| | 02:27 | through JavaScript to
generate the rest of the page.
| | 02:31 | Now, one downside of this approach is that
there's no content on this page that can be
| | 02:35 | searched by Google.
| | 02:36 | So, let's close this from our text editor.
| | 02:39 | Let's come back to our Edge project.
| | 02:42 | Let's go back to the File
menu, back to Publish Settings.
| | 02:44 | I'm going to come in here, and check
the Publish content as static HTML.
| | 02:48 | I'm going to click the Publish button again.
| | 02:51 | Edge is going to rewrite the
content inside of this web directory.
| | 02:54 | Now, I'll reopen the ready_to_publish.html
file up in a text editor.
| | 02:58 | So now we can see that Edge Animate
will write all of the HTML into the page.
| | 03:03 | I can even see things like an apple a day,
for example, which is some text that's set
| | 03:07 | inside of a symbol.
| | 03:08 | So now all of this text is written into the
HTML page, and can be seen by search engines.
| | 03:12 | So this is a possible publishing option
inside of the Edge Animate Publish Settings.
| | 03:17 | Next, we'll take a look at where our
composition is loading our jQuery library.
| | 03:21 | So let's close out of our text editor.
| | 03:22 | I'm going to open up the
ready_to_publish.html up in our browser.
| | 03:28 | I'm going to right-click, and use a diagnostic tool
to inspect where the content is loading from the site.
| | 03:33 | So, under Scripts, I can select jquery here.
| | 03:36 | Now, we can see that the jquery file is being
loaded from the Google API server instead of our server.
| | 03:42 | So with all of these options in place, Edge
Animate gives us quite a few options for how
| | 03:45 | we publish our content that
we want to use in our website.
| | 03:48 |
| | Collapse this transcript |
| Publishing to an Animate Deployment Package (OAM)| 00:00 | Another publishing option we have from Edge
Animate is to publish out to an Animate Deployment
| | 00:04 | Package or an OAM file.
| | 00:06 | Now, so far, we've published a web version
of our project and we can see in the Publish
| | 00:10 | folder that Edge created, we have
another folder in there called Web.
| | 00:14 | Inside of our Edge Animate composition, let's
come up to the File menu, and let's come down
| | 00:17 | and choose Publish Settings.
| | 00:20 | So again, so far, we only
have the Web setting here.
| | 00:22 | Let's come down to the second option and
check this, Animate Deployment Package.
| | 00:27 | In the settings on the right-hand side, we can
see that this is going to create a .OAM file.
| | 00:31 | Basically, this is a zip file that has all
of the contents inside of one file, and we
| | 00:36 | can use this file and other Adobe
applications such as Adobe InDesign for publishing out
| | 00:40 | to the digital publishing suite.
| | 00:42 | We can use it inside of Adobe Muse,
and inside of Dreamweaver CS6.
| | 00:47 | The other settings we can change here are
the target directories, the name of the file
| | 00:50 | that's going to be created, and we can see
our poster images being used here as well.
| | 00:54 | So with this checkbox selected, let's
come down and click the Publish button.
| | 00:57 | Now, in the operating system inside of the
Publish folder we can see we just got another
| | 01:01 | folder inside of here called animate package.
| | 01:04 | Let's open that up, and
we'll see ready_to_publish.oam.
| | 01:09 | And with this file created, we're ready to use this
in other interactive projects using Adobe applications.
| | Collapse this transcript |
| Publishing for iBooks and OS X| 00:00 | The third publishing option we're going to
look at from Edge Animate is going to be to
| | 00:03 | publish out to OS X and iBooks.
| | 00:06 | Inside of our composition, inside of Edge
Animate, let's come up to the File Menu.
| | 00:09 | Let's come down and choose Publish Settings.
| | 00:12 | So in here, we're going to come down and select
the third option iBooks/OS X. Let's check this.
| | 00:18 | What this is going to do is create
a folder with the extension .WDGT.
| | 00:23 | This is the Widget Format for OS X and we
can use this in OS X's Dashboard, and we can
| | 00:28 | also use these to important into iBooks Author
to create an interactive textbook for the iPad.
| | 00:34 | So down here we can choose where this is going
to be saved, the name of the widget, and this
| | 00:38 | is also going to make use of the Poster Image.
| | 00:41 | Now as a side note for the poster image, the
size of the poster image will determine the
| | 00:44 | size of your widget inside of OS X's
Dashboard, and it will also determine the size of the
| | 00:49 | stage for the overlay in iBooks Author when
you place this in and look at it on your iPad.
| | 00:55 | So if you're using responsive design
inside of Edge Animate, you'll want to make sure
| | 00:58 | you sized image appropriately for your
final dashboard widget or iBooks Author overlay.
| | 01:04 | Once we have our properties set, let's come over
here to the Publish button in the lower left corner.
| | 01:09 | I'm going to click it, and the first dialog
box we're going to get is Edge Animate telling
| | 01:13 | us that we have a couple of files
that are not supported in iBooks Author.
| | 01:18 | So this is a great feature and really helps
to make sure that the file that we're going
| | 01:21 | to be publishing is going to
work on our desired platform.
| | 01:24 | So basically what it's telling us here is that we
can't use animated GIFs and we also can't use SVG.
| | 01:29 | So let's click OK here.
| | 01:32 | That's going to cancel us out of the
Publish Settings, and what we need to do now is go
| | 01:35 | get rid of any animated GIFs
that we're using in our project.
| | 01:38 | And earlier in the course we actually
created a Preloader using one of the animated GIFs.
| | 01:43 | So back in the Properties Panel, let's come
down to the Preloader, let's click Edit and
| | 01:48 | we'll see that animated GIF
sitting on the stage here.
| | 01:51 | Let's come in here, let's select and delete
that, and instead of an animated GIF, let's
| | 01:56 | come up here and select the Text Tool,
and let's type Loading, please wait...
| | 02:05 | Let's close the Text dialog box.
| | 02:06 | I'll just move this down to the center.
| | 02:11 | We'll change the type to just be light gray.
| | 02:14 | Now we still need to get rid of the animated
GIF, so let's come back to the operating system,
| | 02:19 | let's open up the images directory, let's come
down and find preloader2.gif. Let's delete that.
| | 02:26 | We'll move it to the Trash, and we'll also
need to delete the background.svg as well,
| | 02:31 | since that's also not supported in iBooks.
| | 02:34 | So let's select the background.svg
in the images directory.
| | 02:37 | Let's delete that as well.
| | 02:39 | Let's come back to Edge Animate.
| | 02:41 | Edge is going to alert us
that files have been changed.
| | 02:43 | Let's come over here and click Yes.
| | 02:45 | I'm going to grab my
document and move it back over.
| | 02:50 | Let's come out of our Preloader, so
I'm going to come up and click on stage.
| | 02:52 | I'm going to select the background.
| | 02:56 | I'm going to delete that SVG item and I have a
background.png that we're going to use instead.
| | 03:02 | So let's grab this and drag this onto the stage. I
use my Command+[ to move that to the back, and now
| | 03:09 | if I look in the Library Panel I don't
have any SVGs or any animated GIFs.
| | 03:13 | So let's choose File and I'll move this over
a little bit so we can see the operating system.
| | 03:19 | Let me close these up, I
want to see the Publish folder.
| | 03:23 | Let's come back to Edge, let's
choose File > Publish Settings.
| | 03:27 | Now let's come down and click Publish.
| | 03:29 | iBooks is still selected.
| | 03:31 | Now we have a brand-new folder inside of here
called iBooks in the operating system, let's
| | 03:35 | open that up, and we see
ready_to_publish.wdgt.
| | 03:39 | So now we have a widget that we can use in
our OS X Dashboard, or we can use this in our
| | 03:43 | iBooks Author to create an iBook for the iPad.
| | 03:45 |
| | Collapse this transcript |
|
|
15. Using Edge Animate on Existing HTMLAnimating elements of a responsive web design| 00:00 | In addition to working with content that we
create inside of Edge Animate, we can also
| | 00:04 | use Edge Animate to work with existing HTML.
| | 00:06 | Let's open up Chapter_15 and copy the
existing Web Design folder to your desktop.
| | 00:11 | Once that's copied, let's open this up and
let's open up the index.html file up in a browser.
| | 00:17 | Now the project we're going to work with is
from the creating a responsive web design course.
| | 00:20 | This features a design that will
change based on the size of the browser.
| | 00:25 | So this is the large screen view.
| | 00:26 | If I collapse this down, we
switch to the medium screen view.
| | 00:31 | And then, if we go down even further, this
goes into the mobile screen view, where the navigation
| | 00:35 | that was in the orange box now moves
down to be at the bottom of the screen.
| | 00:39 | Let's close this out of our browser.
| | 00:40 | Let's switch over to Edge Animate.
| | 00:42 | And inside of Edge Animate, let's come
up to the File menu, let's choose Open.
| | 00:47 | From the Desktop, let's choose the existing web
design folder, and let's choose the index.html
| | 00:52 | file and then click Open.
| | 00:54 | So, inside of Edge, we'll see that exact
web design showing up inside of the stage area
| | 00:59 | and the responsive design aspect works as well.
| | 01:01 | So I can come in here and resize the stage,
move this down, and Edge Animate will show
| | 01:06 | me a live preview of this design changing based on
the media queries that are part of this web project.
| | 01:14 | Let's open the Stage backup.
| | 01:16 | And we can see the large screen size.
| | 01:18 | So, I'm going to collapse this down so
we're looking at the medium size screen.
| | 01:22 | Now, this is where the Elements Panel is going
to become really important inside of Edge Animate.
| | 01:26 | So here, we can see all of the HTML that Edge is
detecting inside of this file, and giving us access to.
| | 01:33 | So, in the main file, we have a header,
article, a div container holding the promos, a nav
| | 01:38 | element, and a footer, and those are the five main
components that make up this particular web project.
| | 01:44 | If I use the eyeball and click on and off
some of these settings, I can see where the
| | 01:47 | header is, where the article is.
| | 01:50 | If I scroll down, I can see where the div
container is for the promos, and the nav item.
| | 01:56 | So now what we're going to do is animate
some of the content in this existing website.
| | 02:00 | First, I'm going to come over to the
Element Panel and toggle open the nav element, and
| | 02:04 | I can see the four anchor tags inside of here.
I'm going to hold the Shift key and select
| | 02:09 | all four navigation items.
| | 02:11 | Let's activate Auto-Keyframe, Auto-
Transition, and turn on the Toggle Pin.
| | 02:17 | Let's grab the Toggle Pin,
drag this out to 1 second.
| | 02:20 | Let's come over to the Properties Panel,
let's activate a keyframe for the Y position, and
| | 02:26 | then I'm going to hold the
Shift key and let's drag these up.
| | 02:28 | Hit the Spacebar, and now I have an animation
that's applied to all of the navigation elements.
| | 02:35 | Let's come down to the timeline.
| | 02:36 | Let's hold the Shift key, and select the
transition for each one of the different Y properties.
| | 02:41 | Let's come over to the Easing.
| | 02:43 | Let's choose Ease Out, and then Bounce.
| | 02:45 | Now, if I preview this, I can see
each one is bouncing into place.
| | 02:51 | Let's grab the playhead,
bring it back to the 0 marker.
| | 02:53 | I also want to set the opacity.
| | 02:56 | So let's drag the opacity down to 0.
| | 02:58 | I'll hit the Spacebar to preview, and they will
animate on to the stage and then bounce into place.
| | 03:03 | Lastly, I just want to
adjust the timing of these.
| | 03:06 | So I'll grab the second one, which is services,
the third one, which is portfolio, and then
| | 03:12 | the fourth one, which is contact us.
| | 03:16 | Bring the playhead back to 0, hit the spacebar, and now
each navigation item will play one quarter of a second
| | 03:21 | after its previous one
and then bounce into place.
| | 03:23 | Now, to preview this, let's come up to the
File menu, let's choose Preview In Browser,
| | 03:29 | and we'll see the
animation happens right in place.
| | 03:32 | Now again, this is a responsive design, and Edge
Animate is only animating the individual elements.
| | 03:37 | The CSS 3 Media Queries are still
controlling the placement and position of the overall
| | 03:41 | elements within the composition of the website.
| | 03:44 | So I'm going to come over here to the browser.
| | 03:45 | Let's bring this down to the
medium size, let's hit Reload.
| | 03:49 | The navigation will move into their
new positions based on that media query.
| | 03:54 | And then lastly, let's bring this down
to the mobile size. We'll scroll down.
| | 03:57 | I'll hit Reload.
| | 03:59 | And we'll see each of the navigation items
will now move in their mobile state to their
| | 04:02 | corresponding spot based on their CSS
3 Media Queries for small screen sizes.
| | 04:06 | And so here, we can see the power of Edge
Animate being applied to existing HTML content.
| | 04:11 |
| | Collapse this transcript |
|
|
16. Going Beyond the Edge Animate InterfaceAdding HTML into text boxes| 00:00 | Now, while we can't use HTML inside of
text blocks using Edge Animate's interface, we
| | 00:05 | can put HTML into text
elements using the code window.
| | 00:08 | So in this composition, I have a simple
animation of the apple dropping and then the text on
| | 00:12 | the chalkboard fading in.
| | 00:14 | I'm also using one of the Google
fonts inside of this composition.
| | 00:17 | And what I want to do here is set
the word apple to show up in red.
| | 00:20 | Now, we can't do that in the Edge interface,
but I can inject HTML and add specific styling
| | 00:25 | onto individual elements.
| | 00:27 | So to do this, let's come over to
the stage, let's select this symbol.
| | 00:31 | Let's double-click to go into Isolation Mode.
| | 00:33 | And here, I have the textbox selected.
| | 00:35 | In the upper left-hand corner, in the Properties
Panel, I can see the name of this item is called Text.
| | 00:40 | So what we are going to do
is come down to the timeline.
| | 00:44 | Let's drag the playhead back to the 00 marker.
| | 00:47 | Let's come into the Actions area,
and insert a timeline trigger.
| | 00:51 | Inside of the code window, let's come down to the
snippets on the right-hand side, choose Set Element Text.
| | 00:56 | By default, it's going to pick the word text,
which again is the name of the instance of
| | 00:59 | the text block on the stage.
| | 01:01 | Let's come down inside of the HTML area.
| | 01:03 | Let's select the NewText, keep the
two quotes for the string literal.
| | 01:07 | And we are going to type An
apple a day, then our ellipses.
| | 01:14 | And then inside of here, I want to
add a span tag around the word Apple.
| | 01:18 | So we'll add a beginning
span, then an ending span.
| | 01:24 | Then inside of the span, let's come in here,
let's hit a space, let's add an attribute
| | 01:27 | in here, style=, and then we need to
put two quotes for the value of the style.
| | 01:35 | Now, the quotes are actually
going to end the string literal here.
| | 01:38 | So, we need to escape these.
| | 01:40 | So, we are going to put a forward
slash before each one of the quotes.
| | 01:44 | This way, the quotes will get written into
the HTML and will not be considered part of
| | 01:48 | this particular JavaScript.
| | 01:50 | Once we have that in place, let's
set color:#e6423a, then a semicolon.
| | 02:00 | That's going to give us a red color.
| | 02:02 | Now with that in place, let's close the
code window, let's preview in browser.
| | 02:07 | Now, when the animation gets to that point,
we'll see that the text fades up and before
| | 02:14 | the text fades up, we have the JavaScript
that gets executed inside that symbol, which
| | 02:18 | changes the text in the text
block to use our HTML instead.
| | 02:21 | Now, using this technique,
you can inject any HTML.
| | 02:24 | You can bring in images,
you can put in hyperlinks.
| | 02:27 | Anything that's supported in the browser,
you can inject into these elements and gain
| | 02:30 | complete control of the HTML
that's put into individual elements.
| | 02:33 |
| | Collapse this transcript |
| Adding video to your composition| 00:00 | Another media type you might want to work
with inside of your Edge compositions is video.
| | 00:04 | However, in the interface, we can't actually work
with video and audio by importing them into our project.
| | 00:10 | However, we can inject HTML for those media
types and use the code window to inject that
| | 00:14 | HTML into our elements.
| | 00:16 | Now, inside of the Edge interface over here
in the Library Panel, I can see the Assets,
| | 00:21 | the Images directory, and our background graphic.
| | 00:23 | Now, to inject our video into our
project, I first want to create a container.
| | 00:27 | So let's come over here to the
Rectangle Tool up in the Tools Panel.
| | 00:31 | I'm going to click and drag.
| | 00:32 | Once I have a box in the stage, I'm going
to come over to the height and width settings
| | 00:37 | inside of the Properties Panel.
| | 00:39 | I'm going to set this to 400
pixels wide by 250 pixels tall.
| | 00:44 | That's the size of our MPEG-4 video.
| | 00:46 | I'll position this in place.
| | 00:48 | And with this selected on the stage,
let's come down to the timeline panel.
| | 00:52 | Let's activate the Toggle Pin.
| | 00:54 | We'll drag this out to 1 second.
| | 00:57 | Let's come up to the Properties Panel.
| | 00:59 | Let's move the opacity down.
| | 01:02 | Hit the Spacebar to preview this.
| | 01:04 | Then, I'll grab this and drag
this out to the 1 second mark.
| | 01:10 | Now, I'll bring the timeline
panel back to the beginning.
| | 01:13 | I'll turn off the Toggle Pin.
| | 01:15 | And what I want to do here
is insert a timeline trigger.
| | 01:17 | So, let's come down to the Actions
Panel, let's click Insert Trigger.
| | 01:21 | Now, the first thing I need to do here is
target that element, and I can see that it's
| | 01:25 | still selected on the stage, and I can see the
name of the instance is called Rectangle.
| | 01:28 | So, I'm going to come down
here into the code snippets.
| | 01:31 | We are going to click on Get Element, and the
element we are going to get is going to be rectangle.
| | 01:39 | So now, what this does is it
creates a variable named element.
| | 01:43 | And the value of that is symbol $("Rectangle").
| | 01:46 | So, let's come in here and copy the name
element, let's hit a few returns, let's paste that.
| | 01:51 | And now we're going to use jQuery to inject the
HTML that we want to have inside of that element.
| | 01:56 | So, after element, we are going to type .HTML,
beginning and ending parentheses, semicolon.
| | 02:02 | Inside of the HTML element, two
tick marks for a string literal.
| | 02:06 | I'm going to type a video tag,
and then end the video tag.
| | 02:12 | Next, I'm going to get my cursor
inside of the beginning video tag.
| | 02:17 | Let's hit a space and add
some attributes in here.
| | 02:20 | So, we need to add the HTML5 video attributes,
and we're going to start with width, equals,
| | 02:29 | two quotes, 400, then a space.
| | 02:32 | We are going to set
height equal to two quotes, 250.
| | 02:38 | And then one thing that Edge Animate
doesn't support right now is line wrapping.
| | 02:42 | So instead of having this line get really
long, we're going to use a JavaScript trick.
| | 02:46 | I'm going to hit a return here.
| | 02:48 | And once we have some malformed JavaScript,
Edge is going to highlight that in orange.
| | 02:52 | I'm going to bring my cursor
back on the line before it.
| | 02:54 | I am going to hit a space, and then a backslash.
| | 02:58 | What this backslash does is it escapes the
return character so that we can create a multi-line
| | 03:03 | JavaScript but only inject one line of code.
| | 03:06 | And we're doing that so we can see more
of our script inside of this dialog box.
| | 03:10 | So now, we'll hit another
Return, another forward slash.
| | 03:13 | I'll get my cursor in front of
the forward slash and hit a space.
| | 03:16 | Next, we'll set the source for the video; src,
equals, two quotes, inside of the quotes,
| | 03:23 | we'll type video/ so that we can go into the
video directory that we know is part of our project.
| | 03:29 | Then, we'll type winecountry.mp4.
| | 03:35 | After the quotes for that
attribute, let's hit a space.
| | 03:38 | We'll type poster, equals, two quotes.
| | 03:42 | Let's come back here and
copy "video/winecountry.jpg".
| | 03:50 | Let's get our cursor at the end of the line.
| | 03:51 | Let's hit a Return, another
backslash, add a space before that.
| | 03:57 | Let's add type, equals,
two quotes, then video/mp4.
| | 04:05 | And now the last attribute we'll
add is to turn on the controls.
| | 04:08 | So after the type attribute, hit a space.
| | 04:12 | So we'll set controls, equal to, two
quotes, then controls again inside the quotes.
| | 04:19 | Now with all of our markup in place, let's close
our code window and let's preview this in a browser.
| | 04:27 | [Video]
| | 04:35 | So, as you can see, by using HTML
injection techniques built into Edge Animate
| | 04:40 | through jQuery, you can
inject any HTML into any elements.
| | 04:44 | And even if something is not available
inside of Edge's interface, you can still inject
| | 04:47 | that code and use it in your compositions.
| | 04:49 |
| | Collapse this transcript |
|
|
17. Using Edge Animate Projects in Other Authoring ApplicationsUsing OAM files in Adobe InDesign CS6| 00:00 | In this lesson we are going to take a look
at how we can use an OAM file published from
| | 00:04 | Edge Animate inside of
InDesign to use in the Adobe DPS.
| | 00:07 | Now inside of InDesign we can place an OAM
file just as we would place any other file format.
| | 00:12 | So from the File menu inside of
InDesign let's come down and choose Place.
| | 00:16 | Let's go into our Exercise Files,
let's go down to Chapter_17.
| | 00:21 | Let's go into the _published_from_Edge_
Animate folder, go into the animate package folder,
| | 00:27 | select myProject.oam, and then click Open.
| | 00:32 | Once the file loads in InDesign, I'll get the
loaded text gun, and then I can simply click
| | 00:35 | and place the OAM file on my page.
| | 00:38 | Notice that InDesign will show us the poster
frame that was part of our Publishing settings.
| | 00:42 | Now with the object selected, let's come up to
the Window menu, let's come down to Folio Overlays.
| | 00:48 | And what I can do here is, with this object
selected, I can pick the specific properties
| | 00:52 | that this Edge Animate file will have
when we interact with it on our tablet.
| | 00:57 | So with the object selected,
I'll come down and choose Auto Play.
| | 01:00 | I'm going to increase the Delay to about half
a second, so this means once we swipe to this
| | 01:05 | particular page in our digital magazine, after
half a second the Edge Animate file will play.
| | 01:11 | Now at this point you can
save your InDesign file.
| | 01:14 | Come up to the Window menu, let's come down
to Folio Builder, and inside the Folio Builder,
| | 01:21 | you can activate any of your folios.
| | 01:23 | You can add this particular file into your
folio as an article, then push the folio up
| | 01:28 | to the Digital Publishing Suite website, and
then pull it down and test it on your iPad.
| | 01:33 | Now I'm here in the iPad.
| | 01:34 | I'm in the Adobe Content Viewer app.
| | 01:36 | I can see the Edge Demo in
the upper left-hand corner.
| | 01:39 | I'm going to tap on View, that's going to
load the cover, and now when I swipe to the
| | 01:43 | next article, we'll see that the Edge
animation will wait one half of a second and then play,
| | 01:48 | matching exactly the settings that we set
up inside of InDesign in the Folio Overlay.
| | 01:53 | So placing the OAM file inside of InDesign,
and then setting specific properties in the
| | 01:58 | Folio Overlay, gave us the ability to incorporate an
Edge animation project inside of our digital magazine.
| | Collapse this transcript |
| Using OAM files in Adobe Dreamweaver CS6| 00:00 | In this lesson we'll be taking an OAM file
that we've published inside of Edge Animate
| | 00:04 | and using it inside of
Dreamweaver for use in our website.
| | 00:07 | Now at the time of this recording, Dreamweaver
CS6 cannot import Edge Animate unless you're
| | 00:12 | using Dreamweaver through
the Adobe Creative Cloud.
| | 00:14 | This was one of the recent
updates for Creative Cloud subscribers.
| | 00:17 | Now up in the Insert menu we have a folder here
called Media with a whole bunch of different media types.
| | 00:22 | The first one here listed is
Insert an Edge Animate Composition.
| | 00:26 | Let's click on that.
| | 00:27 | We're going to get a dialog box with our operating
system showing us where we can go locate the OAM file.
| | 00:33 | Let's come down to Exercise
Files, let's go into Chapter_17.
| | 00:37 | In that first folder here, _published_from_Edge_
Animate, let's come into the animate package folder,
| | 00:43 | let's select myProject.oam and click Open.
| | 00:47 | Now with our animate composition placed inside
of Dreamweaver, we can come up here and click
| | 00:50 | on Live view, and then Dreamweaver will use
its built-in web browser to show us the Edge
| | 00:55 | Animate Composition.
| | 00:56 | Now one thing to note when we talked about
publishing OAM files they're basically a zip file.
| | 01:01 | Now when we placed those into other
applications like InDesign or Muse, those applications
| | 01:06 | will unpackage that zip file.
| | 01:08 | In the case of the web, we need to
be able to see all of these files.
| | 01:12 | So one thing I want to bring your attention
to is if I move the document out of the way,
| | 01:16 | and if we go back to the original folder
that we opened the HTML file from, you'll notice
| | 01:20 | that Dreamweaver has created a
new folder in here called myProject.
| | 01:23 | And if we open this us up, we can see a config
file and an Assets folder. Inside of the Assets
| | 01:29 | folder are all of the files that the Edge
Animate composition needs to run. All of the
| | 01:34 | images, all of the JavaScript, and the HTML.
| | 01:36 | So Dreamweaver allows us to share OAM files
with other Dreamweaver users and then it will
| | 01:42 | take care of extracting all of the content
so that the files can play on our website.
| | 01:46 |
| | Collapse this transcript |
| Using OAM files in Adobe Muse| 00:00 | In this lesson, we'll take an OAM file
that we've published from Edge Animate and use
| | 00:04 | it inside of Adobe Muse for use on our website.
| | 00:07 | Now this is just a blank website inside of Muse.
| | 00:09 | I'm on the Planning phase here, so let's come
in double-click on the Home page, that's going
| | 00:14 | to bring us into the Design View
for the homepage of our website.
| | 00:17 | Now all I need to do here is simply
come up to the File menu, choose Place.
| | 00:21 | That's going to bring up the Import dialog box.
| | 00:23 | From the Exercise Files, let's go into Chapter_17,
then into the _published_from_Edge_Animate>animate
| | 00:30 | package, and let's select the
myProject.oam file, then click Open.
| | 00:35 | That's going to give us a loaded text cursor.
| | 00:37 | I'm going to come over here on the page, simply
click to place this Edge Animate composition in our page.
| | 00:42 | Once Muse loads our composition
we'll get a loaded text cursor.
| | 00:45 | I'll move over here to the left-hand
side of the page, click to place it.
| | 00:49 | And now to preview this I'm going to
come up to the Preview Panel inside of Muse.
| | 00:53 | Click on Preview, and then Muse's built-in
web browser will show us the Edge Animate
| | 00:56 | composition playing right inside of Adobe Muse.
| | 00:59 |
| | Collapse this transcript |
| Using widgets in OS X Dashboard| 00:00 | In this lesson, we're going to take a widget
that we got from Edge Animate and put it into
| | 00:04 | the Macintosh OS X's Dashboard feature.
| | 00:06 | So if you have a Macintosh and you want to
follow along, go into the Exercise Files,
| | 00:10 | open up Chapter_17.
| | 00:12 | In here, I have a folder called _published_from_Edge_
Animate, inside of here we have folders that were created
| | 00:17 | by Edge Animate's Publish feature.
| | 00:20 | Let's open up iBooks, and let's take the file
for_dashboard.wdgt and drag a copy to the desktop.
| | 00:27 | Now the reason we're making a copy of this
is, when we run this from the operating system
| | 00:31 | the Macintosh will ask us if we want to
install this, and if we choose Yes, it will be copied
| | 00:36 | to the Widgets folder inside of the
Library folder, inside of the root hard drive.
| | 00:40 | And I want to be able to keep a copy
of the original in my Exercise Files.
| | 00:43 | So from the copy on the
desktop, just double-click it.
| | 00:46 | You'll get this dialog box, where that Macintosh OS
will ask if you want to install this in the Dashboard.
| | 00:51 | You can come over here and click Install.
| | 00:54 | Now one thing to keep in mind with the Dashboard
widgets is that the animation will only play once.
| | 00:59 | So what I've done here is I set up a background
looping animation, so that that will continuously
| | 01:03 | play inside of the symbol, but the main
stage, where it says, An apple a day...
| | 01:07 | will only play one time.
| | 01:08 | If I like the way the widget looks
I can come down here and click Keep.
| | 01:12 | Then I can exit Dashboard, and any time I go
back into Dashboard, my Edge Animate widget
| | 01:17 | will be in there along with the
other widgets from the operating system.
| | 01:20 | And remember, we can inject HTML into Edge
Animate projects, and we can also use jQuery
| | 01:26 | to dynamically load content from the Internet.
| | 01:28 | So you could create a dynamically driven
widget using Edge Animate for the animation and have
| | 01:33 | all the live data being driven through jQuery.
| | 01:35 |
| | Collapse this transcript |
| Using widgets in iBooks Author| 00:00 | In this lesson, we are going to take a widget
that we got from Edge Animate, place it into
| | 00:04 | iBooks Author, and test it on an iPad.
| | 00:06 | Now inside of iBooks Author I have a blank page.
| | 00:08 | I'm going to size my
window down here a little bit.
| | 00:12 | And what I'm going to do is come over here
to the Exercise Files, I'm going to grab the
| | 00:16 | myProject.wdgt and just drag and drop it right
inside of the blank page inside of iBooks Author.
| | 00:21 | Once I drop this object we can see the
poster frame showing up inside of the widget.
| | 00:25 | So I'm going to grab this and
just resize this a little bit.
| | 00:30 | As I resize the widgets the poster frame that was
generated by Edge will be resized inside of that container.
| | 00:36 | So I'll move this around.
| | 00:38 | Once I get this position to where I
want I'm going to test this on the iPad.
| | 00:42 | Now to test this we need to make sure that
the iPad is connected to our computer with
| | 00:46 | the USB cable and we're running
the iBooks application on the iPad.
| | 00:49 | I'm going to resize the window here a little bit
so we can see more of the iPad in the background.
| | 00:55 | And when I come up here and click the Preview
button, iBooks Author is going to make a copy
| | 00:59 | of the iBook, send it over to the iPad.
| | 01:01 | The iPad will close the book that's open and
then reopen it and show us our new page with
| | 01:05 | our new Edge widget inside.
| | 01:07 | Now inside of iBooks Author I can come in
and pinch the page down, and it will show
| | 01:11 | up inside of its chapter.
| | 01:12 | If I tap on the page, it will open back up,
and then if I tap on the widget it will go
| | 01:17 | into the Overlay view.
| | 01:18 | It will invoke the Edge animation and then
the animation will play inside of the overlay.
| | 01:23 | Once the animation is complete I can tap in
the upper left-hand corner and this will go
| | 01:26 | back into its widget state, and then I can
pinch the entire page back down to its chapter view.
| | 01:31 | So by simply clicking iBooks in OS X in the
Publish Settings inside of Edge Animate, we
| | 01:35 | can quickly get a widget with all of the
interactive and animated components that we can use right
| | 01:39 | inside of iBooks Author.
| | 01:40 |
| | Collapse this transcript |
|
|
18. Coming to Edge Animate from Adobe FlashRelating to a new interface| 00:00 | In this chapter, I want to show you how you
can get started with Adobe Edge Animate by
| | 00:04 | leveraging your knowledge and
workflow from Adobe Flash Professional.
| | 00:07 | Now being familiar with Flash, we have a
main stage area, which is this area up here, and
| | 00:12 | this is the default workspace from Flash.
| | 00:14 | Down below we have the Timeline, where we can
see all of the different animated elements.
| | 00:19 | On the right-hand side is the Properties Panel,
the properties are contextual to any elements
| | 00:23 | that we have selected, and
we also have a Library Panel.
| | 00:27 | Inside the Library Panel are all of the assets
that Flash is either linking to or keeps embedded
| | 00:31 | inside of the project file, and on the right-
hand side we have all of the different tools.
| | 00:36 | Now looking at the same project inside of Edge
Animate, we can see we have a main stage area up here.
| | 00:41 | Down below we have the Timeline.
| | 00:43 | We can also scrub the Timeline similar to what
we can do in Flash and look at the animation.
| | 00:49 | On the right-hand side
we have the Library Panel.
| | 00:51 | The Library panel is broken into three sections.
| | 00:53 | We have Assets, Symbols, and Fonts.
| | 00:56 | As we create symbols, they will
show up in a separate area here.
| | 00:59 | Now working with fonts in Edge Animate is a
little different than working with fonts in Flash.
| | 01:02 | In Flash you can use fonts from your system
and package them up and embed them similar
| | 01:07 | to what you can do in PDF.
| | 01:08 | However, Edge Animate uses web
fonts, which load from online services.
| | 01:12 | You can learn more about putting web fonts into your
compositions in the Web Fonts chapter of this course.
| | 01:17 | And on the left-hand side
we have the Properties Panel.
| | 01:20 | The Properties Panel is contextual, just
like Flash, so as we select different items on
| | 01:24 | the stage, the properties that we can change
and manipulate will be updated based on your
| | 01:28 | selection. And then finally, our
Toolbar at the top of the screen.
| | 01:32 | So now that we're familiar with the interface,
next let's talk about creating animations.
| | 01:35 |
| | Collapse this transcript |
| Creating animations| 00:00 | Now I want to take a look at some of the
similarities between creating animations inside of Flash
| | 00:04 | Professional and Edge Animate.
| | 00:07 | Now to create animations inside of Flash Professional, the
first thing we need to do is convert artwork into a symbol.
| | 00:12 | So with the apple selected I can see in the
Properties Panel that this is just a Bitmap.
| | 00:17 | Before I can animate this, I'll need to right-click
on this and Convert this to a Symbol.
| | 00:24 | I'll name it apple then click OK.
| | 00:27 | Once this is a symbol I can right-click on
it, come up and chose Create Motion Tween,
| | 00:32 | and what that's going to do is activate
this layer in the timeline to pay attention to
| | 00:36 | anything that I change.
| | 00:38 | So I'll first come up here and grab the Timeline
playhead, drag this out to the end of the animation.
| | 00:44 | Come up to the Insert menu, come
down to Timeline, and choose Keyframe.
| | 00:48 | Then I'll drag the timeline back, grab the
apple, move it to the top of the stage, and
| | 00:56 | now I've created an animation of that apple.
| | 00:59 | So again, the apple does have to be inside of
the symbol before we can create the animation.
| | 01:03 | Now with the apple selected I can also come
over here to the Motion Presets and come in
| | 01:07 | here and assign a Motion
preset to the object as well.
| | 01:11 | Now to animate the apple inside of Edge
Animate, I'm going to come over here to the stage,
| | 01:14 | click on the apple.
| | 01:16 | Now I don't need to wrap this into
a symbol before I can animate this.
| | 01:19 | All elements on the stage in Edge Animate
are HTML elements, and we can animate any
| | 01:23 | of those HTML elements.
| | 01:26 | So with the apple selected, the first thing
we're going to do is come down to the Timeline Panel.
| | 01:30 | Now inside of Flash, when you create a tween
layer, what Flash does is it pays attention
| | 01:34 | to every property that you
change along the timeline.
| | 01:37 | Edge Animate will do something similar, but
we need to turn on some of these controls.
| | 01:41 | The first one here is the Auto-Keyframe,
second is the Auto-Transition, and lastly we have
| | 01:47 | a brand-new animation feature inside
of Edge Animate called the Toggle Pin.
| | 01:50 | So we are going to turn that on as well.
| | 01:51 | I'm going to scroll up in the Timeline window
here, so we can see the red_apple is selected.
| | 01:57 | Before we begin animating we need to
pick the properties we are going to animate.
| | 02:00 | So let's come over to the Properties Panel.
| | 02:02 | Let's activate the Y axis.
| | 02:04 | And now with that selected let's come up
to the Timeline playhead, and let's grab the
| | 02:09 | Toggle Pin and move this out to one second.
| | 02:12 | What this basically does is, is lets us
see what the animation will resolve to, which
| | 02:16 | is the screen we're looking at here, while
changes we make will happen at the playhead.
| | 02:21 | So to see this happen we'll come up here and
select the apple, I'll just move this vertically
| | 02:25 | so that it's off the stage.
| | 02:27 | Edge Animate will automatically create this
transition in the two keyframes because we
| | 02:31 | turned on the Auto-Keyframe and Auto-Transition.
| | 02:34 | Now if I hit the Spacebar I
can see the animation play.
| | 02:39 | And one more nice effect that we have inside
of Edge Animate, if I come down here and select
| | 02:43 | this transition for top, or the Y axis, come
up to the Easing settings, come down and choose
| | 02:49 | Ease Out, let's choose Bounce, hit Return.
| | 02:53 | Hit the Spacebar, I can now add
a Bounce Effect to my animation.
| | 02:58 | So now with my animation complete, if I do
want to convert this into an animated symbol,
| | 03:02 | I can right-click on the apple, choose
Convert to Symbol, name this apple. I'll click OK.
| | 03:10 | And now over in the Library Panel I'll see I
have my apple symbol showing up in the Symbols
| | 03:14 | area, and on the stage I'll see a representation
of that symbol, and if I jog the timeline back
| | 03:19 | and forth, I can see the animation effect on
the stage even though all of those components
| | 03:22 | are now wrapped in a symbol.
| | 03:23 |
| | Collapse this transcript |
| Assigning actions| 00:00 | Now, working with Actions inside of Flash
Professional is very similar to the way we
| | 00:03 | work with Actions inside of Edge Animate.
| | 00:06 | Two common ways that we use Actions are
on the timeline and targeting objects.
| | 00:10 | So on the timeline, inside of Flash,
typically we create an empty keyframe, we come up to
| | 00:15 | the Actions window, and we add an action.
| | 00:19 | So inside of the Actions Panel, I can see that there
is a Stop action that's been assigned to the timeline.
| | 00:24 | And similarly, if we want to target specific
objects, I can come over here to the stage,
| | 00:28 | select the apple, come over to Code Snippets,
open up my Actions group, and click Go to Webpage.
| | 00:35 | Then, adding the snippet to the
Actions Panel will target the red apple.
| | 00:39 | So the red apple on the stage, with its
instance property named red_apple, we'll see the Flash
| | 00:44 | writes all the necessary ActionScript to enable
that red apple to now be clickable to a webpage.
| | 00:49 | Now, to work with Actions in a similar fashion
inside of Edge Animate, on the timeline, inside
| | 00:54 | of Edge Animate, we have this little
button here, which is insert a trigger.
| | 00:57 | This is how we assign actions to the timeline.
| | 01:00 | So with my playhead here at 1 second,
I'll come over here and click on this button.
| | 01:05 | This will automatically bring up the code
window inside of Edge Animate, and I can come
| | 01:09 | in here to the Code Snippets and simply
click Stop, close my code window, and now I have
| | 01:14 | the Stop command placed on the timeline.
| | 01:17 | If I want to target or add actions to objects I can
select an object on the stage such as this red apple.
| | 01:23 | We're going to right-click, come down
and choose Open Actions for "apple".
| | 01:29 | And since I'm targeting an element on the
stage, I need to click the event that I want
| | 01:32 | to attach the action to.
| | 01:33 | So, let's come over here and choose click.
| | 01:35 | So, on click, I want to
come over here and Open URL.
| | 01:39 | So, by selecting the snippets, Edge Animate
will create all of the necessary JavaScript
| | 01:44 | to enable that Apple to be clickable by the
end-user to go to the website that we type
| | 01:47 | into this code window.
| | 01:48 |
| | Collapse this transcript |
| Differences in publishing| 00:00 | Once you've completed your project inside
of Flash Professional, next you'll go into
| | 00:04 | the File menu and come down to Publish Settings,
and choose all of the formats you would like
| | 00:08 | Flash to publish out to.
| | 00:10 | We have a very similar workflow
inside of Edge Animate as well.
| | 00:12 | Now, back inside of Edge Animate, we also
have a Publish Settings under the File Menu.
| | 00:17 | Once this is selected, we can come in here
and check all of the different formats we
| | 00:21 | would like Edge Animate to
publish our project out to as well.
| | 00:24 | Now, the most common file format we publish
out of Flash is to a SWF file, which stands
| | 00:29 | for Shockwave Flash.
| | 00:30 | This file, however, needs to be interpreted
by the Adobe Flash Player, which is a plugin
| | 00:34 | to the web browser.
| | 00:36 | Edge Animate, on the other hand, uses HTML, CSS,
and JavaScript to write all of its animations
| | 00:41 | and interactive user experiences, and then
relies on the browser to interpret all of
| | 00:45 | those files to recreate our user experience.
| | 00:47 | Now, there is another publishing option we
have from Edge Animate, and that is to Publish
| | 00:51 | to an Animation
Deployment Package, or an OAM file.
| | 00:55 | This is similar to SWF in that it contains all of
the assets and scripts and HTML in one single file.
| | 01:01 | However, right now we can only use
those files in other Adobe applications.
| | 01:04 | So we can bring those into InDesign, Dreamweaver, or
Adobe Muse, and use those in our interactive projects.
| | 01:10 | And while this file format gives us a
really efficient way to work with other authoring
| | 01:13 | applications, it's not a format that
can be loaded directly into the browser.
| | 01:16 |
| | Collapse this transcript |
|
|
19. Coming to Edge Animate from Adobe After EffectsRelating to a new interface| 00:00 | In this chapter, I want to show you how you
can get started with Adobe Edge Animate by
| | 00:04 | leveraging your knowledge and
workflow from Adobe After Effects.
| | 00:07 | Now, inside of After Effects, we have a main stage
where we compose all of our animations and compositions.
| | 00:12 | Underneath, we have a timeline.
| | 00:14 | The timeline shows us every item that we have
on the stage and all of the different properties
| | 00:19 | that we can create animations from.
| | 00:21 | In the upper left-hand corner, we have our
Project Panel, and this contains a list of
| | 00:25 | all of the assets that are linked in
to the Adobe After Effects project.
| | 00:29 | And on the right side of the timeline, we
have a playhead which we can click and drag
| | 00:33 | and scrub through our animations.
| | 00:37 | Inside of Edge Animate, we have a stage very
similar to what we have inside of After Effects.
| | 00:41 | And we also compose our
animations and compositions on the stage.
| | 00:44 | Underneath, we have a timeline.
| | 00:46 | The left-hand side shows us all of the different
layers and objects on the stage that we can animate.
| | 00:50 | And on the right-hand side of the timeline, we
have a playhead that we can scrub back and forth
| | 00:54 | and see the animations as well.
| | 00:55 | Now, on the right-hand side of
the stage, we have a Library Panel.
| | 00:58 | This breaks our assets into three
categories: assets, symbols, and fonts.
| | 01:03 | Inside of the assets, we can
see a folder of images here.
| | 01:06 | This relates to a folder of images that
exist on our hard-drive in the same folder that
| | 01:09 | contains our Edge Animate project.
| | 01:11 | The Symbol section will show us areas where
we create symbols out of objects on the stage.
| | 01:16 | This is very similar to creating
pre-compositions in After Effects.
| | 01:19 | And then we have a Font section here where
we can load web fonts into our composition.
| | 01:23 | Now, in After Effects, we don't have to
worry about fonts because as long as you have it
| | 01:26 | on your system, the final result from After Effects
is either going to be an image sequence or a video,
| | 01:32 | and in both cases, fonts are
rasterized into the project.
| | 01:35 | With Edge Animate projects, the web browser
plays our project, and we need to have access
| | 01:39 | to those web fonts.
| | 01:40 | Now, to learn more about adding web fonts to
your composition, you can watch the chapter
| | 01:44 | on web fonts in this course.
| | 01:46 | And now that we're familiar with the interface,
next, we'll talk about creating animations.
| | 01:49 |
| | Collapse this transcript |
| Creating animations| 00:00 | Now, I want to show some of the similarities
between animating items inside of After Effects
| | 00:04 | and animating items inside of Edge Animate.
| | 00:06 | Now, inside of After Effects, in order to
animate an item, we select it on the stage.
| | 00:11 | Down in the Timeline Panel we
can see the item we have selected.
| | 00:14 | We can toggle open the
properties that we can animate.
| | 00:17 | I am going to come down here and
click on the stopwatch next to Position.
| | 00:21 | That's going to add a keyframe on the timeline.
| | 00:23 | I am going to grab the playhead, drag this
to the 1 second mark, come back over here,
| | 00:29 | activate a second keyframe.
| | 00:30 | Then I'm going to drag the playhead back
to the 0 mark, come up to the stage, grab
| | 00:34 | the apple, and just move
it vertically off the stage.
| | 00:38 | By doing that, After Effects will give us
an animation between those two keyframes.
| | 00:43 | Now, in addition to adding keyframes, we can
also animate items by attaching scripts to items.
| | 00:50 | So, to do that, with the apple selected, I
will come down and hold the Option key, or
| | 00:54 | Alt in Windows, click on the stopwatch, and that will
activate the script editor for this individual object.
| | 01:00 | Then I can come over here, and click on a
series of snippets that will automatically attach
| | 01:04 | a script to that individual element, giving
me the ability to add additional movements
| | 01:08 | to that object without
using additional keyframes.
| | 01:10 | I am going to move out of that menu.
| | 01:13 | I am going to undo that.
| | 01:15 | Now, another feature you might use a lot in
After Effects is pre-composing your animations.
| | 01:19 | This is basically grouping a series of
objects on the stage into one object.
| | 01:23 | So, to demonstrate this, I want to Toggle+Open
the animation that's assigned to that text layer.
| | 01:29 | Under Transform, we can see that
we have keyframes set for Opacity.
| | 01:32 | Now, up on the stage, I am going to click and
drag, and I want to select the chalkboard, the text
| | 01:38 | layer, and the chain graphics.
| | 01:40 | Now, with all of these selected, I am going
to come up to the Layer Menu, come down and
| | 01:45 | choose Pre-compose.
| | 01:47 | Let's give this a name, choose OK.
| | 01:53 | And now I have grouped all of
those elements into a composition.
| | 01:56 | And we can see the composition
showing up here inside of our Project Panel.
| | 01:59 | Now, a great feature inside of After
Effects is I can scrub the timeline and still see
| | 02:04 | the animation of that pre-
composition happening on the main stage.
| | 02:10 | And to change the layering, I can come over to
the Timeline Panel and just drag the chalkboard
| | 02:14 | to be behind the red apple.
| | 02:16 | So pretty quickly, I can create animations
by activating specific properties, and I can
| | 02:20 | group elements, even if they are animated, into
a composition that I can use on the main stage.
| | 02:25 | So now inside of Edge Animate, to animate
the apple, we are going to do something very
| | 02:28 | similar to what we did in After Effects.
| | 02:31 | Let's come over here and select the apple.
| | 02:32 | Now, in After Effects, by default, when we
activate a property, we automatically get
| | 02:36 | transitions, and keyframes.
| | 02:39 | Inside of Edge Animate, we
need to turn on those options.
| | 02:41 | So, the first item here is the Auto-
Keyframe Generator, second is the Auto-Transition.
| | 02:46 | These two together will keep track of any
changes we make along the timeline with any
| | 02:51 | properties that we have activated.
| | 02:52 | Now, with the apple still selected, let's come up to
the Properties Panel, let's activate the Y property.
| | 02:59 | We can now see the keyframe has been added
here, and next, we are going to activate a
| | 03:02 | feature that's unique to Edge Animate.
| | 03:04 | Next to the Auto-Keyframe and Auto-Transition is this
tool here called the Toggle Pin. Let's turn that on.
| | 03:11 | Once that's activated, above the playhead,
we can see this little blue pin here.
| | 03:14 | I am going to select that pin and
drag it out to the one 1 second mark.
| | 03:18 | This is a very unique feature in that it
allows us to work with the stage at the 1
| | 03:22 | second mark, which is what we see on the screen, but
changes we make are going to happen at the 0 marker.
| | 03:28 | So with the pin selected, I will come up here, grab
the apple, and just move this vertically off the stage.
| | 03:33 | Once I let go, you will see that we get a
transition now between the two different keyframes.
| | 03:39 | I can grab the playhead now, and drag
it back and forth and see the animation.
| | 03:43 | Let's turn off the Toggle Pin.
| | 03:44 | So, the change we made was at the 0 marker,
but out here where the Toggle Pin was set
| | 03:49 | is where the apple ended up.
| | 03:50 | So the Toggle Pin gives you a really quick
way to compose the animation's ending state,
| | 03:55 | and then work backwards
to create your animation.
| | 03:58 | Now we can attach a script to this object
so we can get some additional motion without
| | 04:01 | additional keyframes.
| | 04:02 | So, I am going to come down here
and select the transition for Top.
| | 04:06 | With that selected, let's come up
to the button here called Easing.
| | 04:09 | We will click this, choose Ease Out, and then
come down and choose Bounce, and hit Return.
| | 04:16 | So now I am going to hit the
spacebar to preview the animation.
| | 04:19 | So, now we will get the keyframes for the
Top settings, which control this from being
| | 04:24 | off the stage at the top to being down at
the bottom of the stage, but the bouncing
| | 04:28 | effect is being controlled through that script.
| | 04:30 | Now, our animation also features the
text on the screen that's animating.
| | 04:34 | So, we are going to do the same
thing we did in After Effects.
| | 04:36 | I want to group this
together into an animated symbol.
| | 04:40 | So I am going to come up to
the stage, select the text frame.
| | 04:42 | I am holding the Shift key.
| | 04:44 | I am going to select the
chalkboard and the two chain graphics.
| | 04:48 | With all of these selected, we will right-click
and come down and choose Convert to Symbol.
| | 04:53 | We'll name this chalkboard, click OK.
| | 04:57 | We'll see this symbol show up on the Library
Panel over on the right, and then notice that
| | 05:02 | all of these elements are
grouped together on the stage.
| | 05:04 | I am going to hit Command+[, or Ctrl+[ on Windows,
to move this to be behind the apple.
| | 05:10 | And just like After Effects, if I have a
group of objects with an animation, as I drag the
| | 05:15 | main timeline playhead back and forth, I can see
the animation that's happening inside of that symbol.
| | 05:19 | So, as you can see, the process for animating
elements inside of Edge Animate is very similar
| | 05:24 | to the workflow that we have
inside of Adobe After Effects.
| | 05:27 |
| | Collapse this transcript |
| Differences in publishing| 00:00 | And once you've completed your animation
project inside of After Effects, you will most likely
| | 00:04 | want to export your project by adding it to
the Render Queue and then rendering out either
| | 00:08 | an image sequence or a video.
| | 00:11 | However, in Edge Animate, when you're
finished with your project, you will come up to the
| | 00:14 | File menu and you will
come down to Publish Settings.
| | 00:16 | Now there is a few different formats that
you can publish out to from Edge Animate.
| | 00:20 | However, they all result in the same set of files,
which is a series of JavaScript, HTML, and CSS.
| | 00:26 | The web setting here will actually write all
of those files to a folder and have them be
| | 00:30 | sort of open or in the clear.
| | 00:31 | The Animate Deployment Package will create
a single OAM file that you can use in other
| | 00:37 | Adobe authoring applications
like InDesign, Dreamweaver, and Muse.
| | 00:41 | And then lastly, the iBooks and OS X format
will create a widget folder, which again will
| | 00:46 | contain all of the assets that the
animation needs, but will be contained in one single
| | 00:50 | widget file that you can use in
iBooks author or in the Mac OS X dashboard.
| | 00:55 | Now the video file that you get from After
Effects can be played in a variety of ways.
| | 00:59 | It can be loaded into the Flash player or
loaded directly into an HTML5-enabled browser.
| | 01:04 | It can also be played on tablets and mobile
phones natively, since those devices have native
| | 01:09 | video playback capabilities.
| | 01:11 | Edge Animate, on the other hand, creates a series
of JavaScript files and an HTML file and images
| | 01:16 | that are all loaded into the browser
starting with the preload JavaScript.
| | 01:20 | So it's up to the browser to take the
animations and recreate all of the animated sequences
| | 01:25 | based on the Javascript
files that are loaded in.
| | 01:28 | So the main difference here is that all of
the things you do in After Effects, including
| | 01:31 | add fonts, graphics, and animation
sequences are flattened or rasterized into one video
| | 01:36 | stream, whereas in the HTML5- and JavaScript-enabled
animations, the browser is reconstructing
| | 01:43 | those animations for every viewer
that looks at your animation file.
| | 01:46 |
| | Collapse this transcript |
|
|
20. Coming to Edge Animate from Adobe Photoshop CS6 ExtendedCreating animations| 00:00 | In this chapter, I want to show you how you
can get started with Edge Animate by leveraging
| | 00:04 | your knowledge in workflow from animation
skills you have inside of Photoshop CS6.
| | 00:08 | Now inside of Photoshop CS6 extended, we
can see the timeline down here at the bottom.
| | 00:13 | You can activate the timeline by going to the
Window menu, coming down and choosing Timeline.
| | 00:18 | Now in earlier versions of Photoshop
this panel was called the Animation panel.
| | 00:22 | So with the Timeline panel open, I have a
playhead down here, I can click and drag and
| | 00:25 | see an animation, so I have the text animating
on the screen, so next let's animate the apple.
| | 00:31 | So to create an animation inside of
Photoshop CS6, I am going to hold the Command key, or
| | 00:35 | Ctrl on Windows, click on the apple to
select that layer, and I can see it's selected in
| | 00:40 | the Timeline panel and in
the Layers penal over here.
| | 00:44 | Now with this selected, let's toggle this open
and look at the Properties that we can animate.
| | 00:49 | So down here we have Transform. Now the playhead
is at the 0 mark. And Activate Transform, that's
| | 00:55 | going to put a keyframe on the timeline.
| | 00:57 | We will drag this out to the one second mark,
let's come over here and add a second keyframe.
| | 01:05 | Now with two keyframes created,
let's come back to the 0 time marker.
| | 01:08 | Let's select the apple and let's
simply move this up vertically on the stage.
| | 01:14 | Once I let go, Photoshop will create an
animation between those two keyframes, so now if I click
| | 01:19 | and drag, I can see the apple dropping. I
am going to drag the playhead back to the
| | 01:23 | one second mark. And another nice feature we
have inside of Photoshop CS6, is we can group
| | 01:28 | objects on the stage into the Smart Object.
| | 01:30 | So I am going to hold the Command key down
with Move tool, I am going to select the Text
| | 01:35 | layer, I am going to hold Command+Shift, or
Ctrl+Shift in windows, I am going to select
| | 01:41 | the chalkboard, and then each
one of these chain graphics.
| | 01:46 | If I look over here in the Layers panel, I
can see all of the layers I have selected,
| | 01:50 | I am going to going to right-click, while
these are all selected, come up and choose
| | 01:53 | Convert to Smart Object.
| | 01:55 | That's going to take all of those layers and
group them into one single object that I can
| | 01:58 | move and change on the stage.
| | 02:00 | Now I still want the chalkboard to be
behind the apple, so in the Layers panel, I will
| | 02:03 | just grab this layer and
move it behind the apple.
| | 02:06 | And now a great feature of this version of
Photoshop is that if I come back to the Timeline,
| | 02:11 | scrub the timeline, I can see the animation
inside of that Smart Object still plays when
| | 02:16 | I grab the playhead and
drag it on the main timeline.
| | 02:19 | So this gives me the ability to group
items on the stage even if they're animated and
| | 02:23 | work with them as a single element.
| | 02:25 | Now inside of Edge Animate, we are going to
create this same animated elements, so let's
| | 02:29 | first come over here and select the apple
on the stage. Now with this selected, the
| | 02:32 | first thing we are going to do is come down
to the timeline, and we have some buttons down
| | 02:35 | here that will automatically track
things like keyframes and transitions.
| | 02:39 | So let's activate these first two
buttons, and a unique tool called the Toggle Pin.
| | 02:44 | So let's turn that on as well.
| | 02:45 | So with Auto-Keyframe selected, as we make
changes along the timeline, Edge Animate will
| | 02:49 | add keyframes for us automatically.
| | 02:52 | Transitions will automatically create
animations and the Toggle Pin will allow us to work in
| | 02:57 | a really unique way, where we can look at
the ending state of our animation but work
| | 03:01 | in the beginning state.
| | 03:04 | So with the Toggle Pin selected, let's come
over here and grab the playhead, let's move
| | 03:08 | this back to the 0 marker, but the
pin above is set to the 1 second mark.
| | 03:13 | So what this means is we are looking at
the final state of our animation on the stage
| | 03:16 | but we are going to be working
with elements at the 00 marker.
| | 03:20 | Now with our playhead where we want it,
let's come over here to the Properties panel and
| | 03:24 | let's activate the properties we want to change,
so let's come over here and choose the Y position.
| | 03:29 | Once I select that, we will see that the
keyframe has been added to the stage, and now what I
| | 03:33 | am going to do is simply come up here,
select the apple, and just move it off the stage.
| | 03:38 | The fact that we had the Toggle Pin
selected means that the Apple will resolve in that
| | 03:42 | final state when we drag the playhead out.
| | 03:45 | So there's the animation we just created.
| | 03:48 | Now since Edge Animate is creating
animations through JavaScript, we have some additional
| | 03:51 | capabilities inside of Edge Animate.
| | 03:53 | So let's come down here and select the
transition for top, and with that selected, let's come
| | 03:57 | over here and choose the Easing button, lets
choose Ease Out, and then Bounce, and hit Return.
| | 04:03 | This allows us to add scripts on to the
individual elements and get additional animation properties
| | 04:08 | without creating the keyframes.
| | 04:10 | So now when I preview the animation, we
can see that the ending state is still at the
| | 04:13 | bottom part of the stage, but we get that
extra bounce effect in there, which again is being
| | 04:17 | controlled by scripts and not keyframes.
| | 04:20 | And now the other thing I want to do is group some of
those elements on the stage like we did in Photoshop.
| | 04:24 | So let's come up to the stage, I am going
to select the Text layer, I am going to hold
| | 04:28 | the Shift key, select the chalkboard, and each
one of the chain graphics, I can see those
| | 04:33 | items selected in the timeline.
| | 04:36 | With all of these selected, I am going to right
click and come down and choose Convert to Symbol.
| | 04:41 | This is going to group all of these elements
together in much the same way creating a Smart
| | 04:45 | Object did inside of Photoshop.
| | 04:46 | I am going to name chalkboard, I am going
to click OK, we are going to see this symbol
| | 04:51 | show up in the Library panel on the right
hand side, and again very similar to Photoshop,
| | 04:56 | I can grab the playhead now, drag it back
and forth, and I can see the animations that's
| | 05:00 | inside of that animated symbol as I drag
the playhead on the main stage. And then lastly,
| | 05:05 | to change the ordering, I am going to hold
the Command key or Ctrl on Windows and the
| | 05:08 | left bracket and move that
symbol to be behind the apple.
| | 05:12 | So as you can see, by activating keyframes
for elements we want to animate, and grouping
| | 05:16 | items together inside of the Smart Objects,
we have a very similar workflow between Edge
| | 05:20 | Animate and Photoshop CS6 extended.
| | 05:22 |
| | Collapse this transcript |
| Differences in publishing| 00:00 | Now once you have completed your animation
inside of Photoshop, you will go to the File
| | 00:04 | menu, come down and choose
Export, and then choose Render Video.
| | 00:08 | Now your options inside of here will consist of
being able to create an image sequence or a video.
| | 00:13 | In both cases all of the assets from your
animation will be rasterized. This means that
| | 00:18 | choosing fonts and certain animation styles will be
rasterized into one data stream inside of the video file.
| | 00:24 | Now inside of Edge Animate, when you are
finished with your project, you will come up to the
| | 00:27 | File menu, come down to Publish Settings, and
in here you can choose the different formats
| | 00:32 | you want to publish out to.
| | 00:33 | So we have Web, we have an Animate
Deployment Package, and iBooks OS X.
| | 00:38 | Now in all of these cases, Edge is going to
write out JavaScript and HTML files and package
| | 00:43 | up all of the assets.
| | 00:45 | For the Web setting, all of these files are
going to be in the clear or open inside of a folder.
| | 00:50 | For the Animate Deployment Package, or an
OAM, or the iBooks widget, we are basically
| | 00:54 | going to get one file that's going
to have the same contents inside.
| | 00:58 | So what this means in terms of playback is
that your video file can be loaded into Flash
| | 01:02 | player and played inside of browsers, it can
be loaded directly into an HTML5-enabled browser,
| | 01:08 | or it can be played directly to mobile devices,
since they all have the ability to play video natively.
| | 01:13 | Edge Animate, on the other hand, is going
to create a series of HTML and JavaScript
| | 01:16 | files that can be loaded
directly into the browser.
| | 01:19 | The main difference here is that all of the
things you do inside of Photoshop using fonts,
| | 01:24 | bringing in graphics, creating animations,
are going to be flattened into one datastream
| | 01:28 | inside that video file.
| | 01:30 | So the end user doesn't need specific fonts
or graphics in order to see your animation.
| | 01:34 | However for JavaScript- and CSS-based
animations, it's up to the browser to load the assets,
| | 01:39 | load web fonts from a font service, and animate
all of the individual elements for each person
| | 01:44 | that visits your page with an animation on it.
| | 01:45 |
| | Collapse this transcript |
|
|
21. Coming to Edge Animate from Adobe Photoshop CS5 ExtendedCreating animations| 00:00 | In this chapter, I want to show you how you
can get started with Adobe Edge Animate by
| | 00:04 | leveraging your animation
skills inside of Photoshop CS5.
| | 00:07 | So here inside of Photoshop CS5, I have
the Animation panel showing at the bottom.
| | 00:11 | You can access the Animation panel by going
up to the Window menu and choosing Animation.
| | 00:16 | When you upgrade to Photoshop CS6, this
panel has been renamed to be the Timeline panel.
| | 00:21 | Now to create an animation inside of
Photoshop CS5, with my Move Tool selected, I'll hold
| | 00:27 | the Command key, or Ctrl on Windows. I am going
to click on this apple, that's going to select
| | 00:32 | the red apple in the Animation panel, and it's
also going to select it in the Layers panel.
| | 00:37 | Now with this selected, next I am going to
toggle open the Properties for the red apple
| | 00:41 | and I am going to click on
the stopwatch here for position.
| | 00:44 | That's going to put a keyframe on the
timeline at exactly where the playhead is.
| | 00:48 | Now I am going to grab the playhead,
let's drag this back to the zero marker.
| | 00:52 | Now by activating Position, Photoshop is
now going to create keyframes for any position
| | 00:56 | changes I make on this object.
| | 00:58 | So let's come up to the Stage, let's grab the
apple and just move it vertically off the canvas.
| | 01:03 | Now, when I let go, Photoshop is going to
create an animation of those two different states.
| | 01:10 | Now another nice feature we have inside of
Photoshop CS5 is we can group elements on the Stage.
| | 01:15 | So what I want to do is
group the animation of the text.
| | 01:18 | So let's come back to the timeline, we'll
toggle the text open and see that we have
| | 01:21 | the Opacity setting turned on for that.
| | 01:23 | I'll drag that playhead
out to the one second mark.
| | 01:26 | Now with my Move Tool selected, I'll hold
the Command key, or Ctrl on Windows, click
| | 01:30 | once to select the Type layer, I am going
to add the Shift key, click again to select
| | 01:36 | the chalkboard, and then
each of the chain graphics.
| | 01:40 | Now as I select these items, we can see
them highlighted in Animation panel, and we can
| | 01:43 | also see them highlighted in the Layers panel.
| | 01:46 | With all of these selected in the Layers
panel, I am going to right-click, I am going
| | 01:50 | to choose Convert to Smart Object.
| | 01:52 | Now I do want the chalkboard behind the apple,
so I am going to grab this Smart Object and
| | 01:56 | drag it behind the apple, and by converting
these to a Smart Object, I have all of these
| | 02:00 | items now grouped together into one element.
| | 02:03 | Now the other nice feature here is that if
I come down here and jog the timeline, I can
| | 02:07 | see all of the animations happening inside
of that Smart Object even though I'm jogging
| | 02:11 | the timeline on the main stage.
| | 02:14 | Now inside of Edge Animate I want
to create some similar animations.
| | 02:17 | So the first thing I am going to do is come
over here and select the apple on the stage.
| | 02:20 | Once I select this you can see all of
properties light up on the Properties panel.
| | 02:24 | I am going to first click down here on the
timeline, drag the playhead back to the zero marker.
| | 02:31 | Once we are at the zero marker, let's come
over here to the Properties panel, and let's
| | 02:34 | activate the Y axis.
| | 02:36 | As soon as I do that, you will see that we
now have a top or X-axis property keyframe
| | 02:41 | assigned to the red_apple layer.
| | 02:42 | Now the next thing that we'll need to do is
activate the Auto-Keyframe and Auto- Transition.
| | 02:47 | Photoshop does this by default when we
turned on that stopwatch, but Edge Animate has the
| | 02:51 | option of either creating different states
along the timeline or creating animations.
| | 02:56 | And there is a unique feature here
to Edge Animate called the Toggle Pin.
| | 02:59 | What this allows us to do is create an
animation and see the ending state while we are working
| | 03:04 | with the beginning state.
| | 03:06 | Now to use this, with the Toggle Pin selected,
you will see above the playhead, I have this
| | 03:09 | little pin, let's click and drag
this out to the one second mark.
| | 03:13 | So with this pin out here, we are actually
going to end up with the animation in the
| | 03:17 | state that we are seeing on the Stage,
even though changes I make right now are going
| | 03:20 | to affect the 0, 0 mark.
| | 03:23 | So to see this happen, let's come up here, let's grab
the apple, I'll just move it vertically on the stage.
| | 03:29 | As soon as I let go, you'll see that we
get a transition and two different keyframes.
| | 03:33 | So now if I grab the playhead and drag this
back and forth, we can see the animation has
| | 03:37 | been created, and the last state of the
animation is the very first state that we had selected
| | 03:42 | when we started to create the animation.
| | 03:44 | Now with the animation in place,
let's turn off the Toggle Pin.
| | 03:47 | Let's come down here and let's
select the transition for top.
| | 03:50 | Now since Edge Animate creates animations
with JavaScript, we can add special effects
| | 03:54 | to our animations without
adding additional keyframes.
| | 03:57 | So with this transition selected, let's come
up here and click on the easing button, let's
| | 04:02 | come down and choose Ease Out, and then come
down and choose Bounce, and then hit Return.
| | 04:07 | So, now when I press the Spacebar to preview
my animation, notice that in addition to moving
| | 04:11 | down to the bottom of the stage, we also
have the bounce effect that's happening.
| | 04:15 | Now that's being done through that JavaScript
that's being assigned in through that easing
| | 04:18 | button, and it adds additional movements onto the
animation without us having to add those keyframes.
| | 04:24 | Now I want to group some items together in a
similar fashion to what we did inside of Photoshop.
| | 04:28 | So let's come up to the Stage, let's click
and select the text block, I am going to hold
| | 04:33 | the Shift key, select the chalkboard, and
then each of the chain graphics. Now with
| | 04:38 | all of these items selected, let's right-click,
let's come down and choose Convert to Symbol.
| | 04:44 | I'll name it chalkboard, click OK, and now in
the Library panel, under the Symbol section,
| | 04:49 | I can see the new
chalkboard symbol we just created.
| | 04:52 | To change the stacking order, I am going to
hold the Command key and hit the left bracket,
| | 04:55 |
or Ctrl in Windows, and just change the
stacking order so that the symbol is now behind
| | 05:00 | the red apple. And similar to Photoshop, if I
come down to the timeline and jog the playhead
| | 05:05 | back and forth, I can see the animation inside
this symbol as I drag the playhead on the main Stage.
| | 05:12 | So by activating properties that I want to
animate and grouping items together inside
| | 05:15 | of the symbols, I can achieve the same animation
effects inside of Edge Animate that I'm used
| | 05:20 | to inside of Photoshop CS5 Extended.
| | 05:22 |
| | Collapse this transcript |
| Differences in publishing| 00:00 | Now when you have completed your animation
in Photoshop, you are going to come up to
| | 00:03 | the File menu, come down to
Export, and choose Render Video.
| | 00:08 | Most likely, you're going to render your
animation out as a video file so that you can use it
| | 00:12 | in other applications, or directly on a website.
| | 00:15 | When you have completed your animation
inside of Edge Animate, you are going to come up
| | 00:18 | to the File menu and choose Publish Settings.
| | 00:22 | Inside this dialog box, you will have the
option of creating three different types of
| | 00:25 | formats: the Web format, the Animate
Deployment Package, or the iBooks / OS X format.
| | 00:30 | In all of these cases, Edge Animate is
going to create a series of JavaScript files and
| | 00:34 | an HTML file in order to replicate
your user experience in animation.
| | 00:39 | The only real difference between these is
that under the Web setting all these files
| | 00:43 | are going to be created inside of
a folder so that you can see them.
| | 00:45 | In the Animate Deployment package, all of
the files will be grouped into a single OAM
| | 00:51 | file and for iBooks / OS X, you're going to
get a widget file, which is going to contain
| | 00:55 | all of those files inside of that widget.
| | 00:58 | So what this means in terms of playback is
that your video file can be loaded into Flash
| | 01:02 | player and played inside of browsers, it can
be loaded directly into an HTML5-enabled browser,
| | 01:07 | or it can be played directly on mobile devices,
since they all have the ability to play video natively.
| | 01:13 | Edge Animate, on the other hand, is going to
create a series of HTML and JavaScript files
| | 01:17 | that can be loaded directly into the browser.
| | 01:19 | The main difference here is that all of the
things you do inside of Photoshop--using fonts,
| | 01:23 | bringing in graphics, creating animations--
are going to be flattened into one data stream
| | 01:28 | inside that video file, so the end user
doesn't need specific fonts or graphics in order to
| | 01:32 | see your animation.
| | 01:33 | However, for JavaScript- and CSS-based
animations, it's up to the browser to load the assets,
| | 01:39 | load web fonts from a font service, and animate
all of the individual elements for each person
| | 01:44 | that visits your page with an animation on it.
| | Collapse this transcript |
|
|
22. Coming to Edge Animate from Sencha Animator 1.3Relating to a new interface| 00:00 | In this chapter, we are going to take a
look at how you can get started with Adobe Edge
| | 00:03 | Animate by using the animation techniques you
are familiar with inside of Sencha Animator.
| | 00:08 | Now in Sencha Animator, we have a main stage in
the middle of the screen, we have our timeline
| | 00:12 | at the top of the screen, and we can see
individual keyframes for all of the items on the Stage.
| | 00:17 | On the right-hand side, we have our Properties
panel, a Library panel, and then a Project panel.
| | 00:22 | Inside of the Library panel, we can see all
of the assets that we have available to our
| | 00:26 | Sencha Animator project.
| | 00:29 | Now on the left-hand side of the screen, we
have our Tool panel, and down at the bottom
| | 00:32 | we can see these two icons down
here showing us different scenes.
| | 00:35 | In order to help us organize our animations,
Sencha Animator uses the notion of scenes
| | 00:40 | where we can have separate animations across
different panels or scenes within one composition.
| | 00:46 | In the Edge Animate environment, we have the
Stage that's near the top of the screen, the
| | 00:50 | timeline is underneath, again showing
keyframes down here along the timeline.
| | 00:55 | On the right hand side, we have our Library
panel showing us access to all of the images.
| | 00:58 | In addition, we have this notion of symbols
inside of Edge Animate, and we can also create
| | 01:03 | web fonts inside of here.
| | 01:05 | In the top we see the Elements panel.
| | 01:08 | This shows us all of the HTML markup that
Edge Animate is going to create, or if we open
| | 01:12 | existing HTML, it will show us the HTML markup
inside of that structure to give us ability
| | 01:17 | to animate those pieces as well.
| | 01:19 | Now on the left-hand side
we have our Properties panel.
| | 01:21 | Now the Properties panel is
contextual to anything that we select.
| | 01:25 | So if I come over to the Stage and select
the red apple, for example, I'll see this
| | 01:28 | light up with all of the properties that I
can change for that particular object. And
| | 01:32 | then finally at the top of the screen
are all of the tools in the Tool panel.
| | 01:36 | So now that we are familiar with the interface,
next we'll talk about creating animations.
| | 01:39 |
| | Collapse this transcript |
| Creating animations| 00:00 | To create an animation
inside of Sencha Animator.
| | 00:02 | First, I'll come over here to the stage
select this apple, let's come up to the timeline,
| | 00:08 | grab the playhead, let's drag this out
this to one second, then over in the Properties
| | 00:12 | panel, we'll come over here
and click on the Create Keyframe.
| | 00:15 | Once the keyframe is created, let's grab
the playhead and the timeline, drag it back to
| | 00:19 | the zero marker, come down to the stage,
grab the apple, and I'll just move this up.
| | 00:24 | Once I let go, Sencha Animator will create
the animation, so now if I grab the playhead
| | 00:29 | and drag this back and forth, I
can see the animation of the apple.
| | 00:33 | Now we can also add some special effects,
since Sencha Animator is using scripts to
| | 00:36 | create the animation, so we can on to the
General tab, come down to Easing for example,
| | 00:42 | and choose Ease-In as the animation style.
| | 00:45 | Now underneath the stage, we see these
thumbnails here that represent scenes.
| | 00:49 | Sencha Animator has this idea of scenes
where you can separate your animations, so that
| | 00:53 | they can play independent of each other.
| | 00:56 | Now to animate objects inside of Edge Animator,
let's come over here and select the apple on the stage.
| | 01:00 | Down in the timeline panel, I have these
options here. The first one is Auto-Keyframe, second
| | 01:05 | one is Auto-Transition.
| | 01:07 | Now by default in Sencha Animator when you
create a new keyframe, the transitions are
| | 01:12 | automatically created when you make changes.
| | 01:14 | Inside of Edge Animate, these are options
that we can turn on or off. And then a unique
| | 01:18 | feature to Edge Animate is this
option right here called the Toggle Pin.
| | 01:22 | So let's turn on the Toggle Pin, and right
above the playhead, we get this little blue
| | 01:26 | symbol here, let's click and drag
this out to the one second mark.
| | 01:29 | So what this feature will do is allow us to
work backwards when creating our animations.
| | 01:33 | The point of the pin at the one second mark
shows us the ending composition of our animation,
| | 01:38 | but changes we make here will be affecting
each of the elements at the point where the
| | 01:42 | playhead is at on the timeline.
| | 01:44 | So to demonstrate this, with the apple selected,
let's come over to the Properties panel, let's
| | 01:49 | activate the Y property.
| | 01:51 | That's going to give us the keyframe down here
on the timeline on the red apple layer right here.
| | 01:56 | The Toggle Pin is still selected, let's
come up to the stage, let's grab the apple and
| | 02:01 | just drag it to the top of the stage.
| | 02:03 | Now when I let go, we're going to get our
two automatic keyframes, we're going to get
| | 02:06 | our transition, and if we come up here and
jog the playhead, we'll see that the position
| | 02:10 | of the apple will resolve at the
point where the toggle pin was placed.
| | 02:15 | Now with our animation in place, let's turn off
the Toggle Pin. Let's come into the timeline,
| | 02:19 | let's select the transition, and to apply
Easing in Edge Animate, let's come up here and click
| | 02:23 | on the Easing button, let's choose Ease-Out, and
then we'll come down and choose Bounce. And hit Return.
| | 02:31 | Now to preview the
animation, I'll hit the Spacebar.
| | 02:34 | Now similar to the way that we apply Easing
in Sencha Animator, we have an Easing button
| | 02:38 | right on the timeline inside of Edge
Animate. And one more feature that I want to cover
| | 02:41 | inside of Edge Animate is the idea of the symbol.
| | 02:44 | Now while Sencha Animator uses scenes to
separate animations, we can do something very similar
| | 02:49 | inside of Edge Animate using symbols.
| | 02:51 | So to demonstrate this, I'm going to grab the
timeline, drag this back to the zero marker.
| | 02:57 | Let's go over to the Library panel, let's
open up images, and let's drag a copy of the
| | 03:01 | green apple on the stage and position it.
| | 03:04 | Next let's come down to timeline.
| | 03:07 | Let's select the red apple,
let's choose Copy from the Edit menu.
| | 03:12 | Next I'll select the green apple, come down
and choose Paste from the Edit menu, and this
| | 03:18 | will paste the animation of the
red apple onto the green apple.
| | 03:22 | Now this is something that you can do in
Sencha Animator as well, but now what I am going
| | 03:26 | to do is let's come in here and select the
green apple, let's right-click, choose Convert
| | 03:31 | to Symbol, we'll name this green_apple, we'll
click OK and now on the stage we'll see this
| | 03:38 | symbol here representing the fact that that
symbol is animated and playing on the stage.
| | 03:44 | And then to time this out, on the green apple
let's go to Playback, let's choose Stop from
| | 03:51 | frame one, we'll jog the timeline out
until the red apple has completed its animation,
| | 03:57 | and then we'll come down
here and then click Play.
| | 04:01 | Instead of scenes, we have symbols.
| | 04:03 | So now we have the animation of the green
apple wrapped up in the symbol, and on the
| | 04:07 | main stage we can control when that
particular symbol plays while it's on the same stage
| | 04:11 | with the other elements in our composition.
| | Collapse this transcript |
| Differences in publishing| 00:00 | Once you've completed your animation inside
of Sencha Animator, you'll come up to the File
| | 00:04 | menu, come down and choose Export Project and
pick a folder to export your entire project.
| | 00:09 | You also have the option of going into Other
Export and exporting for other formats including
| | 00:15 | a widget for iBooks.
| | 00:16 | However, in Edge Animate we're going to
use something called the Publish settings.
| | 00:21 | So once you've completed your animation
inside of Edge Animate, come up to the File menu,
| | 00:25 | come down to Publish Settings, and here
you'll see a dialog box which will give you three
| | 00:30 | publication options.
| | 00:31 | First is the Web settings, which will
basically export all of the HTML and JavaScript files
| | 00:37 | similar to export from Sencha Animator. We
have the iBooks/OS X, this will create a widget
| | 00:42 | that you can use an iBooks author and then
the OS X dashboard. And unique to Edge Animate
| | 00:48 | is this option here called
the animate deployment package.
| | 00:51 | This basically creates an OAM file, which is a
ZIP archive which contains all of the JavaScript,
| | 00:57 | HTML and graphical assets needed
to recreate your animation project.
| | 01:02 | Now the OAM file format gives you a really
quick and efficient way to share your Edge
| | 01:06 | animation projects with other Adobe authoring
applications including InDesign, Dreamweaver,
| | 01:11 | and Adobe Muse.
| | 01:12 |
| | Collapse this transcript |
|
|
23. Coming to Edge Animate from Tumult Hype 1.5.2Relating to a new interface| 00:00 | In this chapter, I want to show you how you
can get started with Adobe Edge Animate by
| | 00:04 | leveraging your animation and
skill sets from Tumult Hype.
| | 00:07 | Now inside of Hype we have a main stage area
in the center of the screen, across the top
| | 00:11 | we have scenes, down at the bottom we have
our timeline with our playhead, which we can
| | 00:16 | drive back and forth and see our animation,
and in the upper right-hand corner of my screen,
| | 00:21 | I have the Inspector.
| | 00:22 | Now the Inspector looks a lot like the
inspector inside of tools like Keynote and Numbers, where
| | 00:27 | I can select the individual item and then go
to different tabs and see all of the different
| | 00:32 | properties for each one of the types
of content I have select on the stage.
| | 00:37 | Now inside of the Edge Animate environment,
our stage is in the upper center of the screen,
| | 00:41 | our timeline is underneath, our playhead shows
up here, where I can click and drag and scrub
| | 00:48 | through our animation.
| | 00:49 | In the upper left-hand
corner is our Properties panel.
| | 00:52 | This Properties panel will change based on
what we have selected on the stage, so if
| | 00:56 | I come into the stage and select on this
apple graphic here, we can see that the panel will
| | 01:00 | light up with all of the different properties that I
can change based on the element that I have selected.
| | 01:04 | In the right-hand side of the screen, I have
an Elements panel. This shows you all of the
| | 01:08 | HTML that Adobe Edge Animate will generate
when we publish out our file. And underneath,
| | 01:13 | we have the Library panel.
| | 01:15 | This shows us all of the assets available
to the project, our symbols, and any fonts that
| | 01:19 | we've linked to using online font services.
| | 01:22 | So now that we're familiar with the interface,
next we'll talk about Creating Animations.
| | 01:26 |
| | Collapse this transcript |
| Creating animations| 00:00 | Now, to create animations in Hype, the
first thing I'll do is come over here and select
| | 00:03 | the apple on the Stage.
| | 00:05 | Down in the Timeline Panel, the properties
that we can animate are in a separate panel
| | 00:09 | from the actual elements on the Stage.
| | 00:12 | So with the apple selected, I am going to
come down here, and choose Origin (Top), click
| | 00:16 | on the plus sign here to create a keyframe.
| | 00:20 | I'll drag the playhead out to the 1 second
mark, click over here and add a second keyframe.
| | 00:25 | Then, I'll come back to the first keyframe.
| | 00:28 | I am going to grab the apple,
move it vertically off the Stage.
| | 00:34 | When I let go, Hype will automatically
create an animation between those two keyframes.
| | 00:37 | So I can click and drag
this and see the animation.
| | 00:41 | Now, I'll come down into the Properties Panel,
select this animation, and over here we have
| | 00:47 | some easing effects.
| | 00:48 | I'll come down and choose Bounce.
| | 00:50 | With that in place, let's hit the Spacebar.
| | 00:52 | So, in addition to the animation of the
top keyframes, we also have the Bounce script
| | 00:57 | being applied, which adds additional
motion without additional keyframes.
| | 01:01 | Now, above the stage, we
have these two scenes here.
| | 01:03 | So, if I click over to Scene 2, we can see that
this is a completely independent timeline from Scene 1.
| | 01:10 | So Hype uses this idea of scenes, where we
can separate the animations so that they can
| | 01:16 | play independently.
| | 01:17 | Now, to create similar animations inside of
Edge Animate, I am going to come over here
| | 01:21 | to the Stage, and select the apple.
| | 01:24 | Now down in the Timeline, we have
a few toggles we can turn on here.
| | 01:27 | The first one is the Auto-Keyframe,
second one is Auto-Transition.
| | 01:31 | Now in Hype, when you assign individual
keyframes, you automatically get a transition.
| | 01:36 | This is an option inside of Edge
Animate that you can turn on and off.
| | 01:39 | So, with these two items selected, you are
going to get more of the behavior that you
| | 01:42 | are used to in Hype. And I am also going to
come over here and activate a feature that's
| | 01:46 | unique to Edge Animate called the Toggle Pin.
| | 01:48 | So with the Toggle Pin selected, we can see
right above the playhead, we get this little blue pin.
| | 01:52 | I am going to click and drag
this out to the 1 second mark.
| | 01:56 | Now, what this feature does is allows us to
work with our animation at the state of the
| | 02:01 | 1 second mark, which is what we see on the stage.
| | 02:03 | But as we make changes to the keyframes,
those keyframes will be applied where the
| | 02:08 | playhead is, at the 0 mark.
| | 02:10 | So to demonstrate this, we have the apple
selected, we have the Toggle Pin activated.
| | 02:14 | Let's come over to the Properties Panel.
| | 02:16 | Let's activate the Y
property, or the Top property.
| | 02:19 | That's going to give us a keyframe down here.
| | 02:21 | Now let's come up to the apple.
| | 02:24 | Let's grab it and drag it off the stage.
| | 02:26 | And then when I let go of the object, Edge
Animate will create an animation that resolves
| | 02:31 | in the same position that we first
started when we activated the Toggle Pin.
| | 02:36 | With the animation created,
let's come down in the timeline.
| | 02:39 | Let's select the transition for Top.
| | 02:41 | With that selected, let's come over here next
to the Toggle Pin, click on the Easing button,
| | 02:46 | come out and choose Ease Out,
and then Bounce. I'll hit Return.
| | 02:52 | And then when I hit the Spacebar to preview
the animation, we'll see the Bounce effect
| | 02:55 | is now attaching to the animation as well.
| | 02:57 | Now, there is one more feature I want to
take a look at inside of Edge Animate, and that
| | 03:00 | is the feature of being able
to create animated symbols.
| | 03:03 | So, I am going to come up
here to the Library Panel.
| | 03:05 | Let's open up the Images directory.
| | 03:07 | I am going to grab a copy of the green_apple.png,
just drag this onto the stage.
| | 03:12 | I am going to position it.
| | 03:15 | I am going to come down to the Timeline Panel.
| | 03:18 | I am going to select the right apple,
go to the Edit Menu and choose Copy.
| | 03:22 | Next, I'll select the green_apple.
| | 03:25 | Come up to the Edit Menu and choose Paste.
| | 03:27 | Now this is a feature that
you will also have in Hype.
| | 03:30 | And what it does is it copies all of the
animation keyframes from one element to the other.
| | 03:34 | So let's come down to the timeline.
| | 03:36 | I am going to turn off the Toggle Pin.
| | 03:38 | I am going to grab the entire
animation for the green_apple, drag it back.
| | 03:43 | Now if I drag the timeline, we
can see both elements are animated.
| | 03:47 | But now, to do something similar to what
we can do with scenes in Hype, I am going to
| | 03:51 | select the green apple.
| | 03:52 | I am going to right-click on
it and say Convert to Symbol.
| | 03:55 | We are going to name this green_apple.
| | 03:58 | And then on the Timeline for green_apple, we
are going to come over here to the Playback
| | 04:03 | Setting, drag the playhead back to 0,
click on this button here, choose Stop.
| | 04:10 | Then I'll drag the playhead out until the point
where the red apple has completed its animation.
| | 04:16 | Then come back to the Playback
control, and then choose Play.
| | 04:21 | So now the animation that's being wrapped
up inside of that symbol is being told to
| | 04:25 | stop at the 0 marker, and it's going to
remain stopped until it receives an instruction at
| | 04:30 | this point to play.
| | 04:32 | So I'll drag the playhead back to the 0, 0
marker, hit the Spacebar to preview, and then
| | 04:36 | you will see that the green apple will
play after the red apple has completed.
| | 04:39 | So, this is how we can control groups
of animations inside of Edge Animate.
| | 04:43 |
| | Collapse this transcript |
| Differences in publishing| 00:00 | Once you've completed your animated project
inside of Hype, you'll come up to the File
| | 00:04 | menu, come down and choose Export as HTML5,
and you can choose to export out to a folder,
| | 00:09 | which will result in a folder containing
all of the HTML and JavaScript files necessary
| | 00:14 | to create the animation.
| | 00:15 | And you can also choose a Dashboard/iBooks
Author Widget, which you can use in iBooks
| | 00:20 | Author or use with the Macintosh OS X Dashboard.
| | 00:24 | When you've completed your project inside
of Edge Animate, you're going to come up to
| | 00:26 | the File menu, and choose Publish Settings.
| | 00:30 | Inside this dialog box, you will have
three options for saving out your file.
| | 00:33 | First one is Web, which is similar to the
Export to Folder, which is going to give you a copy
| | 00:38 | of the HTML and all of the JavaScript files.
| | 00:41 | You'll also have the iBooks/OS X widget,
same thing that you have again inside of Hype.
| | 00:46 | And there's a third option which is unique
to Edge Animate, which is called the Animate
| | 00:50 | Deployment Package.
| | 00:51 | And what this option does is create an OAM file.
| | 00:54 | This is a file that is basically an archive
that contains all of the HTML, CSS, and assets
| | 00:59 | necessary to replicate your project.
| | 01:01 | And it's a file format that can be used in
other Adobe authoring applications, such as
| | 01:05 | InDesign, Dreamweaver, and Adobe Muse.
| | 01:07 |
| | Collapse this transcript |
|
|
ConclusionConclusion| 00:00 | So now that we've completed our Essentials
Training for Edge Animate, I want to talk
| | 00:03 | about some of the possibilities that you might
want to consider based on all of the material
| | 00:07 | we covered in this course.
| | 00:09 | The first resource I think you
should check out is html.adobe.com.
| | 00:13 | This website showcases all of the latest
technologies that Adobe is working on in relation to HTML,
| | 00:18 | CSS, and JavaScript.
| | 00:20 | Next, on the lynda.com library,
I'd like to recommend Muse.
| | 00:24 | If you found that working inside of Edge
Animate, without having to do anything with code was
| | 00:28 | very inviting, Muse is another application
from Adobe which will allow you to create
| | 00:32 | websites without coding anything at all.
| | 00:35 | So everything is done in
a very visual environment.
| | 00:38 | The next course on lynda.com would
be Digital Publishing Fundamentals.
| | 00:41 | While working in this course, if you liked
taking your Edge Animation into InDesign
| | 00:45 | and publishing out to a digital magazine,
you can learn more about that workflow with
| | 00:49 | the Digital Publishing Fundamentals.
| | 00:51 | Next is iBooks Author.
| | 00:53 | We also took our Edge Animate project into
iBooks Author, and created an iBook for the iPad.
| | 00:58 | In one of the earlier chapters, we
also created a series of web graphics.
| | 01:02 | We created web graphics from
Illustrator, Photoshop, and Fireworks.
| | 01:05 | There are specific courses for creating web
graphics from various applications, including
| | 01:09 | Illustrator here, Photoshop for Web
Design, and Fireworks New Features.
| | 01:16 | And if you'd like to learn more about
responsive web design, this particular project here, which
| | 01:21 | we actually used in the Edge Animate course to
modify existing HTML, is also a course available
| | 01:27 | on lynda.com as well.
| | 01:28 | So, all of the responsive aspects of this
design, I'll walk you through step-by-step
| | 01:32 | on how to create this.
| | 01:34 | You can find this responsive design course, in
addition to a series of jQuery-based courses,
| | 01:39 | on my area of lynda.com.
| | 01:41 | And in here, I have a whole series of courses
that will teach you step by step how to take
| | 01:46 | HTML, add CSS and JavaScript to
create rich interactive experiences.
| | 01:50 | And with that, that concludes Essential
Training with Edge Animate, and I really appreciate
| | 01:54 | you watching the course.
| | 01:55 |
| | Collapse this transcript |
|
|
