IntroductionAbout this course| 00:04 | Hi! This is Chris Converse and this is
a course on creating an
| | 00:07 | Animated Infographic with Edge Animate.
| | 00:08 | Throughout this course we're going to be
creating complex artwork using nothing
| | 00:11 | more than HTML and CSS. We're going
to create a this bright graphic inside of
| | 00:16 | Photoshop where we can create multiple
states of the same graphic and even
| | 00:19 | animate one of those states.
| | 00:20 | We're going to be adding web fonts into
our composition and we're also going to
| | 00:24 | be animating the individual data elements.
| | 00:25 | So I hope this course sounds interesting to you,
and if so, let's get started.
| | Collapse this transcript |
| Exercise files| 00:00 | If you are a premium subscriber to the
lynda.com online training library, you'll
| | 00:03 | have access to the exercise files.
| | 00:05 | The exercise files for this course
consist of two Photoshop files; one called
| | 00:09 | person.psd, which is basically a graphic
that's repeated. We're going to use
| | 00:13 | this as one solid graphic to
create a spreadsheet out of this.
| | 00:16 | And the second is a framed based animation
inside of Photoshop that we're
| | 00:20 | going to save out as an animated gif to use
this as the pre-loader for our composition.
| | 00:24 | Now if you don't have access to the
exercise files, you can recreate graphics
| | 00:27 | very similar to this pretty quickly
and then continue on with the course.
| | Collapse this transcript |
| Beginning your Edge Animate project| 00:01 | To begin our project let's create a folder on the desktop.
| | 00:06 | We'll call this myInfographic.
| | 00:08 | Let's open this up, we're going to resize this over here
and inside let's create another folder called images.
| | 00:19 | Now with that in place let's switch over to Edge Animate.
| | 00:22 | Inside of Edge Animate from the Splash screen
let's come over here and click Create New.
| | 00:29 | Once we have our untitled document
let's come up here and change the stage size
| | 00:32 | to 600 pixels wide by 300 pixels high.
| | 00:37 | Now with that in place let's choose File>Save
and from the desktop let's go into
| | 00:42 | myInfographic and we'll name this
Infographic.html then hit Save.
| | 00:48 | Now that we have saved our file from Edge Animate,
let's go back and look in the operating system.
| | 00:53 | Inside of the myInfographics folder
we now see that we have a series of
| | 00:56 | JavaScript files created by Edge Animate;
we have an Edge Animate source file
| | 00:59 | and in an edge includes directory
in addition to the images directory.
| | 01:02 | So now that have we have our project started,
| | 01:04 | next we'll work on creating the graphics from Photoshop.
| | Collapse this transcript |
|
|
1. Creating Graphics and a Color PaletteCreating a sprite graphic in Photoshop| 00:00 | So the first graphic we're going to create
from Photoshop is going be our sprite graphic.
| | 00:04 | So in the Exercise File open up person.psd.
I'll zoom up here.
| | 00:10 | So what I have done here is basically created
the same shape and I have spaced them
| | 00:13 | apart exactly 30 pixels. So if I get
the Marquee tool, click and drag you'll
| | 00:19 | see at the 30 pixel mark, the distance
that the orange person is from the
| | 00:23 | edge of the marquee is the same distance
that the blue person is from the left edge of the canvas.
| | 00:29 | So what we're going to be doing in Edge
Animate is bringing in this full graphic
| | 00:32 | and then to create the blue version of
the graphic we're going to clip on the
| | 00:35 | right-hand side 30 pixels and then to
make the orange graphic we are going to
| | 00:38 | clip on the left-hand side for 30 pixels.
| | 00:41 | That will allow us to use one graphic
but in two different states.
| | 00:45 | So back in Photoshop what we're going
to do is come up to the File menu,
| | 00:48 | we're going to choose Save for Web.
| | 00:50 | From here we're going to pick PNG-24 as
the file type, then choose Save.
| | 00:55 | Then from the desktop let's go into myInforgraphic,
let's go into images and we'll save
| | 00:59 | this as person.png, then hit Save.
| | 01:02 | Then you can close this file. If you made
any changes you can choose Save and
| | 01:06 | next we'll create the animation for the loading graphic.
| | Collapse this transcript |
| Exporting a preloader animation from Photoshop| 00:00 | Next we're going to create the loading graphic, so in
the exercise files let's open up preload_animation.psd.
| | 00:07 | I'm going to zoom up in here a bit.
| | 00:09 | Now if you're using Photoshop CS6, you can come
under the Window menu and come down to Timeline.
| | 00:13 | If you're using Photoshop CS2 through CS5.5, the name
of this panel will be up here and it'll called Animation.
| | 00:21 | So in either case let's open up
the Timeline or Animation panel.
| | 00:25 | Down here you'll see all of the individual frames.
| | 00:27 | This is the frame based animation.
| | 00:29 | As I click the different frames here you
can see the animation on the main canvas.
| | 00:34 | So basically this animation is going to play while
Edge Animate is loading the entire composition.
| | 00:39 | So to save this let's come up to the File menu,
let's choose Save for Web.
| | 00:44 | I'll zoom up in here as well.
| | 00:46 | The first this we want to do is make sure
that we're saving as a GIF format.
| | 00:49 | This is the only one of the web graphics
that can have animation.
| | 00:52 | Next let's come over here to the Matte color,
we're going to come in here and set this to black.
| | 00:56 | Once I do that you'll see that the edges of
the anti-aliasing here are Matted to black.
| | 01:01 | In Edge Animate we're going to set the
background to black, so that way this
| | 01:04 | animation will fit nicely against that black background.
| | 01:06 | And to preview this let's come down here
and click on the Play button.
| | 01:10 | So we can see the animation playing inside of here.
| | 01:13 | Once that looks good,
let's come down here and choose Save.
| | 01:16 | From the Desktop let's choose myInfographic.
the images directory
| | 01:19 | and this will be called preload_animation.gif.
Then hit Save, you can close and save your changes.
| | 01:28 | Now back in the operating inside of the
images directory we have our person.png,
| | 01:32 | which is sprite graphic and our preload animation
that we'll be using in the preload area of Edge Animate.
| | 01:37 | And now with our graphics created,
next we'll create a color palette using the
| | 01:40 | swatches feature inside of Edge Animate.
| | Collapse this transcript |
| Setting color swatches in Edge Animate| 00:00 | Now after you've created your graphics
and we switch back to Edge Animate,
| | 00:03 | you should see over in the right-hand
side under the Library panel an Assets
| | 00:07 | directory, inside up here showing us the
images directory and the graphics we created.
| | 00:12 | If you don't see this sometimes we
need to just reload the edge animation.
| | 00:15 | So you can come up here and close the file
infographic from the splash screen under
| | 00:20 | Recent Files you can simply come back
and reload the infographic.html file.
| | 00:25 | So now with our graphics loaded the
first thing we're going to do is add some
| | 00:27 | color swatches. So from the main stage
under Stage properties let's come over
| | 00:32 | here to the color, let's click on this.
New inside of Edge Animate 1.5 is the
| | 00:36 | ability to save swatches.
| | 00:37 | So what we're going to do is come down
here make sure we have Hex color selected
| | 00:42 | and let's add in the colors we're
going to be using for our project.
| | 00:45 | So the very first one is going to be a
dark blue, so that's going to be 246eb2.
| | 00:52 | Once that's selected, let's come
up here and click the plus sign (+).
| | 00:56 | Once that's added let's come down,
let's add another color 0079ea. Let's add that.
| | 01:06 | Let's come down let's add another color;
this one is going to be a9ebff, add the swatch.
| | 01:12 | Next color is going to be our dark orange,
that's going to be ff4a00, add the swatch.
| | 01:21 | And then finally our gold color that's going to be ffd424.
| | 01:26 | So now with all of our swatches in place
let's grab the color swatch here
| | 01:30 | and let's just drag this down to the lower left
to select black and then hit Return.
| | 01:34 | So we have colored the stage black,
but if we go back into our swatches we can
| | 01:38 | see that all of these swatches are now saved.
| | 01:40 | And now with our graphics imported and
our background colors and swatches setup
| | 01:44 | next we'll start creating the artwork for the data.
| | Collapse this transcript |
|
|
2. Creating the Data Artwork and LayoutCreating the base of the pie chart| 00:00 | Now to begin creating data for the artwork
let's start with the background most
| | 00:03 | graphic which is going to be the pie chart shape.
| | 00:05 | So let's come up here and select the Ellipses tool.
| | 00:08 | On the stage let's click and drag.
| | 00:10 | Let's come up to the Properties panel,
let's come in here and set this to
| | 00:16 | 200 pixels on the height and width,
center this a little bit.
| | 00:19 | What we're going to do now is apply
a stroke to this, so with this object selected,
| | 00:23 | let's come over here, let's click on
the color swatch for border.
| | 00:28 | Let's grab the selector and move it
to the upper left-hand corner to select white,
| | 00:32 | hit Return, under the Style let's
come down and choose Solid and then for
| | 00:37 | the size we're going to put 3 pixels then hit Return.
| | 00:42 | For the color let's come over here
and let's select a gradient, clicking on
| | 00:46 | the gradient will allow us to create a gradient
inside of this object using nothing but CSS.
| | 00:51 | Let's grab the top color, let's select
the light blue, let's select the bottom color,
| | 00:56 | pick the medium blue and
then select the Radial Gradient here.
| | 01:00 | Now that in place let's hit Return.
| | 01:02 | Once we hit Return and apply this
radial gradient we'll see this little warning
| | 01:06 | in the lower right-hand side of the stage.
| | 01:08 | This is Edge Animate's we have telling
us that one of the browsers might not be
| | 01:12 | able to support this particular style.
| | 01:14 | If we click on this we can see that Internet Explorer
version 9 doesn't support CSS gradients.
| | 01:19 | So what we're going to do is come
over here to the background color with
| | 01:21 | this object and just set a solid color, so that
Internet Explorer at least sees something blue.
| | 01:26 | So with this selected let's come over here
and click on medium blue, then hit Return.
| | 01:31 | And lastly to position the pie chart
under Position and Size with the pie chart
| | 01:35 | selected, let's come over here and make
sure that we have Global selected versus
| | 01:38 | Applied, for the X axis we're going to
put 17 pixels and for the Y axis we're
| | 01:43 | going to put 38 pixels; and once that's
positioned we're going to come down to
| | 01:46 | the layers panel and to keep our file
nice and organized let's double-click the
| | 01:50 | name here called Ellipse and let's rename this pie chart.
| | 01:53 | So now that we have the base pie chart created,
next we'll create the wedge shape.
| | Collapse this transcript |
| Creating the pie chart wedge| 00:00 | Now to create the wedge shape, let's
come up and grab the Ellipse tool, let's
| | 00:05 | draw another ellipse on the stage.
| | 00:09 | First let's come over to the Properties
panel, let's remove the border, set the
| | 00:13 | size to 0, let's come over to color.
| | 00:17 | For the solid background color we'll
choose Orange, let's come over to the
| | 00:21 | gradient, let's select the top color.
We'll choose Yellow, bottom color we'll
| | 00:27 | choose the Orange, set this to a
radial gradient, hit Return up in the
| | 00:35 | properties for width and height.
Let's set that 250 on each.
| | 00:41 | So now with this shape created next
we're going to clip this, so with the
| | 00:44 | object selected, let's grab the Clip tool.
Let's come over here and clip this from the bottom up.
| | 00:50 | Once we start to clip this you'll see
that the clip properties began to change,
| | 00:54 | you can toggle the clip properties open and closed.
| | 00:57 | So inside of the clip properties let's come
in here and change the bottom to 123,
| | 01:00 | this is just 2 pixel short of clipping it exactly halfway.
| | 01:04 | Now with this selected let's come down to the
Properties panel, let's name this wedge, hit Return.
| | 01:10 | So now with this half circle created
we're going to group this into anotherdiv.
| | 01:13 | So with the object selected let's come
up to Modify, choose Group Element into DIV.
| | 01:20 | What that's going to do is take the div
for this circle and put it inside of
| | 01:23 | another div, we can see the representation
of that in the Elements panel here
| | 01:27 | and we can also see the new
element down here on the timeline.
| | 01:30 | Let's select this name Group, lets rename this
wedge_container, let's hit Return.
| | 01:36 | With this selected, let's grab the
Clipping tool here as well, let's grab the clip.
| | 01:40 | Let's drag this one up and
let's match the clip to be the same of the
| | 01:46 | wedge that's inside of this div element.
| | 01:48 | So now that we have our wedge inside
of a wedge_container, come down to the
| | 01:51 | timeline, select the original wedge shape.
And if come over here and grab the
| | 01:55 | Rotation tool what we should see is
the wedge inside is now rotating around
| | 02:00 | and the clipping of the wedge container is
giving us this effect of giving us a wedge-shape.
| | 02:05 | Now the amount of data we're going to
represent with the pie chart is going to
| | 02:08 | be 32%, so to calculate this we're
going to take 360 degrees, we're going to
| | 02:12 | multiply that by 0.32, that's going to
give us 115.2 degrees and since we're
| | 02:18 | working from a half circle we're going
to take a 180 degrees, subtract 115.2
| | 02:22 | degrees and that's going to give us 64.8.
So we can come over here to the
| | 02:27 | Properties panel and put in 64.8
and hit Return and that will give us a
| | 02:31 | representation of 32% of a full circle.
| | 02:33 | Now with our wedge created let's come
down to the Timeline panel, let's click on
| | 02:37 | the wedge_container, let's grab this artwork,
let's drag this over here and Edge
| | 02:41 | Animate will snap this into place when
it is exactly in the center of the blue
| | 02:45 | pie chart graphic we created earlier.
Now with the artwork created for pie chart
| | 02:48 | next we'll create the artwork for the people.
| | Collapse this transcript |
| Clipping sprite graphics for the people artwork| 00:00 | Next we're going to place our person graphic.
| | 00:02 | So let's come over to here to the Assets panel,
lets grab person.png drag them on to the stage.
| | 00:08 | So with this graphic selected, let's
first create our clip. So make sure we're
| | 00:12 | on the Clipping tool here, let's clip this from the right.
| | 00:17 | Once we start this little bit we can come down
to the Properties panel, open up
| | 00:20 | the Clip area, for the right-hand side let's put in 30 pixels.
| | 00:26 | Now select this shape, let's come over to the X-property,
let's set the X to 260 and the Y to 140.
| | 00:35 | Let's select the Move tool, let's come
back down here and select the graphic.
| | 00:38 | Now holding the Option or Alt key I am
going to click and drag a second copy.
| | 00:42 | I am going to move a copy over to the right
until Edge Animate it'll show me
| | 00:47 | that the alignment lines up the left inside.
| | 00:49 | I am going to repeat this four more times,
then select all the people graphics,
| | 00:54 | hold the Option or Alt key again,
drag them down and that's going to
| | 00:58 | give me 10 people graphics.
| | 00:59 | So now what I am going to do is come
down into the Stage, select the very first person,
| | 01:04 | hold the Shift key select the top one,
which will select all 10 items.
| | 01:09 | Come up here, right-click, or you can go to
Modify menu and come down choose Convert to Symbol.
| | 01:15 | Now we're going to create an animation
inside of this symbol, so we're going to
| | 01:19 | name this anim for animation_people and click OK.
| | 01:26 | Now we'll see in the Library panel under Symbols,
we have a brand-new symbol called anim_people.
| | 01:31 | And on the Main stage if I want to move
this around I can simply grab one object,
| | 01:34 | which is an entire symbol here, and
now move all of the people around.
| | 01:38 | So I'll just position these right here for now
and then again we can make adjustments later.
| | 01:42 | Now that we have all of the art work
created for data, next we will add web
| | 01:46 | fonts into our composition.
| | Collapse this transcript |
| Adding Edge fonts| 00:00 | Let's add a font to our composition in Edge Animate 1.5.
| | 00:03 | Let's come over here to the Library panel,
let's come over to Fonts and click
| | 00:06 | the plus sign (+). There is a brand
new feature here in version 1.5 called
| | 00:11 | Edge web Fonts, and you can use these fonts
as part of the creative cloud subscription.
| | 00:14 | Now if you want to use fonts from
another online service in my Edge Animate
| | 00:19 | Essential Training course inside of Chapter 11,
I'll show you how you can use
| | 00:22 | fonts from other services including Adobe TypeKit,
Google web Fonts and Extensis webINK.
| | 00:27 | Now back inside of Edge Animate, under Fonts,
under Web Edge Fonts, we can
| | 00:32 | come in here, and we can sort on different font types,
or we can use to filtering in search for a font.
| | 00:38 | So I want to search for Quicksand,
I'll select this and then simply come down
| | 00:42 | and choose add font.
| | 00:44 | That's going to put the quicksand font
inside of my fonts area and Edge Animate
| | 00:47 | in turn, will use all the necessary JavaScript
and CSS files to activate this font in my composition.
| | 00:52 | Now with our font imported, next we'll create
some text blocks and apply this font to some text.
| | Collapse this transcript |
| Adding text to your layout| 00:00 | Now to add text to our composition let's
come up and select the Text tool.
| | 00:04 | Let's come over here to the Stage, let's click,
let's type 32%, let's close the Text dialog box.
| | 00:12 | With this still selected,
| | 00:13 | let's come over to the Properties panel,
let's come down and change the point size to 70 points.
| | 00:19 | Let's come over to color, let select white,
hit Return and put a font, lets come
| | 00:26 | in here to the font dropdown menu.
| | 00:28 | Let's come down and choose quicksand.
And for the style let's come down and
| | 00:32 | choose Bold. By default Edge Animate
will make the bounding box as large as
| | 00:38 | it needs to be for the type.
| | 00:39 | Now I am going to come in here just add
a little bit more space inside of here.
| | 00:44 | Next to position this, let's select
this block, let's come over to the
| | 00:48 | X-property, let's set this to 250 and
then 30 on Y. Next let's come over and
| | 00:56 | create another Text block.
| | 00:57 | We grab the Text tool, click on the Stage,
we're going to type in here in the
| | 01:02 | first sample, close the Text dialog box.
| | 01:06 | Let's come over to the type size in
the Properties panel, change this to 24 points.
| | 01:12 | Let's change the weight to Normal.
| | 01:15 | And inside of the Text properties,
let's open up this little triangle, which will
| | 01:18 | give us access to a few more properties.
| | 01:21 | Let's come over here to Line height and
change this to 24 as well, and hit Return.
| | 01:26 | Now with that in place let's come
over here and grab this on the Stage.
| | 01:30 | Let's align this over here to the
left-hand side and again I'll leave the
| | 01:33 | width here just a little bit larger in case
some browsers render the font little wider.
| | 01:37 | And now we'll create one more Text block.
| | 01:40 | Let's come up select the Text tool,
let's come down here and click.
| | 01:44 | Let's type in here this next animation
represents a 76% of the first sample.
| | 01:52 | Once that's in place let's close the
Text dialog box, let's move this over.
| | 01:57 | With this selected, let's come over to
the Properties panel, let's set this to 20
| | 02:01 | points in size, we will keep Normal.
For the color, let's come in here and select
| | 02:07 | the darker blue, hit Return.
| | 02:10 | For the Line height let's come down and
change this to 20 as well, then on the
| | 02:13 | Stage I'll move this down to align to
the bottom of the animation_people symbol.
| | 02:16 | I'll make this little bit taller
and close this down a little bit.
| | 02:21 | So now with the text created and styled,
next we will create a rule and a background box.
| | Collapse this transcript |
| Creating a rule and a background| 00:00 | Next we're going to create a
rule inside of Edge Animate.
| | 00:02 | So to do that let's come up and grab the Rectangle tool,
on the Stage let's click and drag.
| | 00:09 | First thing we want to do in the Properties panel
is make sure that the border is set to 0.
| | 00:15 | Let's come over here to the X property,
we're going to position this.
| | 00:18 | Set 209 for the X and 109 for the Y.
For the Width we will set this to 320.
| | 00:28 | For the Height let's set this to 1 pixel.
| | 00:30 | If in click away we can see that we have
now what looks like a 1 pixel rule,
| | 00:35 | but really this is a div with a height of 1;
this is why we had to make sure that
| | 00:39 | the border was set to 0.
| | 00:41 | Now let's select the rule, let's come
over to Color, for background color,
| | 00:45 | let's set this to white then hit Return.
| | 00:47 | Now with the rule in place, let's create
a background box, Rectangle tool again,
| | 00:53 | let's click and drag.
| | 00:55 | Let's come over to our Properties,
for the position of the X we're going to set
| | 00:59 | this to 25, 25 on the Y as well. The Width
is going to be 555 pixels, 260 on the Height.
| | 01:09 | Next let's come down to the gradient
for the Color, for the top color we're
| | 01:14 | going to set this to 0% Opacity.
| | 01:18 | So we're going to grab the alpha
and just drag this all the way down,
| | 01:22 | doesn't matter what color you pick,
if the Alpha set to 0, but I'll just set
| | 01:26 | this to white. Bottom color, let's
select our dark brown and let's bring the
| | 01:30 | alpha down here to about 26%.
| | 01:31 | And you see that represented here in
the rgba setting with this fourth value
| | 01:37 | here of 0.26, put that in place, hit Return.
| | 01:43 | Let's come over to background color,
again we will leave this on white,
| | 01:47 | drag this all way down to 0.
| | 01:48 | Now remember IE 9 doesn't support the
CSS gradients, so IE 9 will simply have a
| | 01:53 | transparent fill on this background and let's hit Return.
| | 01:58 | Next for the border, let's click on the color,
we're going to select the
| | 02:02 | dark blue swatch, hit Return, keep the style at solid,
and set the size to 1 pixel and hit Return.
| | 02:10 | Lastly let's take this box, let's either choose to modify
or you can hit Cmd or Ctrl+Left Bracket
| | 02:17 | and we're basically going to move
this down to be behind the pie chart
| | 02:22 | and we can see this down here
in the timeline panel moving down.
| | 02:25 | Let's select it, name it background.
| | 02:28 | And now with all of our design elements
in place for our composition,
| | 02:30 | next we can start animating these elements.
| | Collapse this transcript |
|
|
3. Animating the Data ArtworkAnimating the pie chart wedge| 00:00 | Now before I begin animating my wedge
I want to make sure that it's in its final
| | 00:03 | position, so let's come up here the wedge.
| | 00:07 | This is going to give me the wedge container,
and I want to have the wedge to be
| | 00:11 | a little more into my composition.
| | 00:13 | So let's come up here to the rotation
and let's set this to about 40 degrees.
| | 00:18 | I want the wedge shape to continue to
break the plane on the background box that
| | 00:21 | we created, but I do want more of
the orange inside of my composition.
| | 00:26 | Now the other thing we want to do
before we start animating is to make sure we
| | 00:28 | have no activated Keyframes in the timeline.
| | 00:30 | If I come down here to the timeline
I can see there are two properties assigned
| | 00:34 | to the animation people symbol.
| | 00:36 | I got this because you had the auto-keyframe
and auto-transition turned on.
| | 00:39 | So in some cases when you make changes on the Stage,
Edge Animate thinks were creating an animation.
| | 00:44 | So before we begin animating, let's come in here
and delete these two properties if you have those as well.
| | 00:49 | And again make sure we have no Keyframes activated.
| | 00:52 | So now we're ready to start animating,
let's come up here and activate the Toggle pin.
[00:00:556.07]
This is going to give me this little blue pin
above my playhead.
| | 00:59 | I'm going to click and drag this out to the two second mark.
| | 01:02 | What this does is allows us to create
an animation at the current 00 marker.
| | 01:07 | And the result of that animation
is what we're seeing on the Stage.
| | 01:11 | So this is a really fast and efficient way
to create animations.
| | 01:14 | So with the playhead at the 00 marker
and the toggle pin at the 2 second mark,
| | 01:18 | let's come down here and select the wedge in the timeline.
| | 01:22 | What we're going to do for the wedge
is come in here and change this from 65 degrees.
| | 01:27 | I'm going to drag this out and we're
going to set this to 180 degrees.
| | 01:30 | So I'll just type that in.
| | 01:33 | Once we're on a 180 degrees we can't see
any of the orange ellipse any more,
| | 01:37 | this is why didn't clip this quite at half,
so when we we're at the 180 we made sure
| | 01:42 | that we don't see any of that orange ellipse.
| | 01:44 | So now what we're going to do is grab
the playhead, drag this back and forth and
| | 01:48 | you'll see we've now created an
animation of the wedge opening from a 180
| | 01:52 | degrees all the way down to the 64 degrees.
| | 01:57 | Let's bring the playhead back to the 0 marker.
| | 01:59 | Now the other thing we want to do is
make the wedge looks like its opening from
| | 02:02 | both angles not just from one side.
| | 02:04 | So to do that we're going to
animate wedge_container as well.
| | 02:07 | So let's come down and select the wedge_container.
With the wedge_container selected,
| | 02:12 | let's come up to the rotation and
we're going to set this to 0 and hit Return.
| | 02:17 | So now we've animated both the
wedge_container and wedge itself.
| | 02:20 | So notice how we get the illusion
of the wedge opening from both ends.
| | 02:27 | Now the last effect we're going to do is hold
the Shift key, select both of the animations.
| | 02:32 | Let's come over to Transition, choose
Ease Out choose Elastic and hit Return.
| | 02:39 | Now if I hit the spacebar we can see
an animation of the wedge looking as if
| | 02:43 | it's growing form the center a on
both sides, and then using the Elastic
| | 02:48 | transition to give us that sort of bouncing effect.
| | 02:48 | So now that we have wedge animated,
next we'll animate the base of the pie chart.
| | Collapse this transcript |
| Animating the pie chart base| 00:00 | Next we're going to animate the base pie chart.
| | 00:02 | So down in the timeline let's bring our playhead back
to the 00 marker, let's activate Toggle pin.
| | 00:09 | If it's still activated you can drag it from
the 2 second mark back to the 1 second mark.
| | 00:14 | Now with the duration of the toggle pin being 1 second,
let's come down and choose piechart.
| | 00:18 | Let's come up to Transform inside of the
Properties panel, let's set this to 60%.
| | 00:25 | Let's come up and set the Opacity down to 0,
let's select the animation,
| | 00:31 | select the Easing, choose Ease Out, which is
Elastic on here as well, and then hit Return.
| | 00:37 | And now with the transition applied we can hit the
spacebar and preview the animation on the timeline.
| | 00:44 | Now you might notice it's hard to
focus on the animation of the piechart
| | 00:46 | because the wedge is starting so soon,
so let's come over here and deactivate the Toggle pin.
| | 00:52 | Let's move our playhead back and forth
and see when the piechart moves into place.
| | 00:58 | So it's pretty much done with its
elastic bouncing at about the half second mark,
| | 01:01 | so let's keep the playhead at a
half second, let's come down and let's
| | 01:05 | grab the animations for the wedge_container
and the wedge itself and drag
| | 01:09 | these to the right so that they don't start
until the piechart is just about done bouncing.
| | 01:14 | So now if we preview this, we have time to see
the piechart animating before the wedge starts.
| | 01:19 | And now with the piechart animated,
next we'll animate the text in the rule.
| | Collapse this transcript |
| Animating the text and rule| 00:00 | Now we're going to animate the top text in the rule.
| | 00:02 | So let's come down to the timeline,
let's drag playhead back to the 0 marker,
| | 00:07 | let's activate to Toggle pin,
let's drag the pin out to one second.
| | 00:12 | First let's grab that 32, let's set the X property
to 300 pixels, then set the Opacity to 0.
| | 00:19 | Next let's grab the smaller text block,
let's come up here and change the opacity
| | 00:25 | of that down to 0, next let's come
down and select the rule, let's change the
| | 00:29 | width of the Rule to 20 pixels and the Opacity down to 0.
| | 00:35 | Now let's select all three of these items.
| | 00:39 | Let's set the Transition to Ease Out,
Quadratic, hit Return, let's deactivate
| | 00:47 | the Toggle pin, let's grab the playhead let's drag this out.
| | 00:52 | So first we want to get the playhead to
where the wedge starts to animate, which
| | 00:57 | is at the half second mark, let's come
down and select the rule, let's drag this
| | 01:03 | over so that the rule begins to animate
at the same time as the wedge opens up.
| | 01:07 | With the playhead at the half second mark,
let's grab the first text block,
| | 01:12 | let's drag this to animate at the same time,
let's drag the playhead to the end
| | 01:18 | of the animation for the rule,
let's grab the other type, let's move this out
| | 01:23 | to the ending here.
| | 01:24 | So that the smaller type of fade in
after the rule has animated.
| | 01:27 | So now if we drag the timeline back and
forth we'll see that the rule animates up.
| | 01:31 | As the wedge opens up that 32%, fades in
and moves to the left and once the
| | 01:36 | rule finishes animating we fade in the second text block.
| | 01:39 | So now with the rule in top text animating,
next we'll animate the people.
| | Collapse this transcript |
| Creating an animated symbol of the people artwork| 00:00 | Now to animate the people let's select
the animation people symbol on the Stage.
| | 00:05 | To animate this symbol let's double-click
and go in to Isolation mode.
| | 00:09 | We can see up here that we're now inside
of animation people on the main Stage.
| | 00:13 | Let's grab the playhead let's drag this back
to the 0 marker, activate the Toggle pin.
| | 00:20 | Let's drag this out to once second then
come up to the Stage inside the symbol,
| | 00:25 | I'll do Shift key and click on all top 5 people.
| | 00:31 | Then either using the arrow keys or your mouse
I'm going to move these off the
| | 00:35 | stage vertically, that will automatically
create an animation of those five,
| | 00:40 | let's come back to the stage,
let's select the bottom people, holding Shift and
| | 00:46 | down arrow I'm going to move
these of the bottom of the Stage.
| | 00:50 | Now in the timeline I'm going to hold
the Shift key I'm going to select all of
| | 00:54 | these animations. With all of these
selected, let's come up to the Transition
| | 01:01 | let's choose Ease Out, Bounce hit Return,
let's turn off the Toggle pin and if I
| | 01:09 | animate these you'll see that these
will actually bounce into place, you can
| | 01:13 | hit the spacebar to preview this.
| | 01:17 | Now we want to animate these and have
them stagger a little bit, so that don't
| | 01:20 | all animate at the same time.
| | 01:21 | So let's come up to the Stage, let's
select to second person, let's scroll down,
| | 01:27 | let's grab this animation, let's drag
this over so that it starts at about the
| | 01:31 | quarter of a second mark, let's grab
the 7th person, let's scroll up here let's
| | 01:38 | move that over as well.
| | 01:39 | Next we'll grab the 8th person, let's
stagger that a little bit more, let's grab
| | 01:46 | the 9th person, stagger a little bit more
and then the 10th person.
| | 01:52 | Let's scroll down grab the 3rd person here,
4th person and 5th person.
| | 02:04 | So now let's bring the playhead back,
let's hit spacebar to preview.
| | 02:06 | So now we get the effect of all
of the people animating in columns.
| | 02:11 | And now with that in place, next we'll
create the animation for highlighting the
| | 02:14 | people that represent the second set of data.
| | Collapse this transcript |
| Creating and animating the highlighted people| 00:00 | So now to create the highlight animation,
first we need to create person
| | 00:03 | artwork that shows us the orange instead of the blue.
| | 00:05 | So let's come back over to the Assets,
let's drag a copy of person.png out to the stage.
| | 00:12 | In the timeline, let's make sure that
this shows up at the top, or the highest
| | 00:16 | layer in the timeline panel.
| | 00:18 | Let select the artwork, let's come up
to the Clip, lets come over here, lets
| | 00:24 | change the left clip, down the Property panel,
we can come down here the and
| | 00:28 | type in 30, this will give us a gold graphic.
| | 00:33 | In the tools select the Selection tool.
| | 00:36 | Let's move this over into place,
when you get it close to one of the blue
| | 00:39 | graphics, it should snapped into place.
| | 00:43 | Next holding the Opt or Alt key I
am going to drag out a copy of these to
| | 00:48 | match over top of the first eight graphics.
| | 00:50 | Since we're going to be representing 76%
of the second data set we need to
| | 00:54 | fill eight graphics of the people, and then
we will make the last one partially filled.
| | 01:01 | So now with all these in place, let's
hold the Shift key and select all eight
| | 01:06 | gold people graphics, let's bring the
playhead to about the 1 and 1/4 second mark.
| | 01:13 | Let's active the toggle pin,
let's drag this out to just one quarter of a
| | 01:19 | second, so these are going to be really fast animations.
| | 01:21 | With this all selected, come down to
the Clip, when we adjust the right-clip
| | 01:28 | you'll notice that we can see
the clip adjusting for all of them.
| | 01:32 | Let's click on this and add 30.
| | 01:38 | Now on the Stage let's come in here and
let's select the animations for all of these.
| | 01:46 | Go to Transition, let's change this to linear,
hit Return, let's deactivate the toggle pin.
| | 01:54 | Now if we drag the playhead we can see
the animation is playing for all these.
| | 01:58 | Now the reason we move this out to one
in a quarter is we're going to start by
| | 02:01 | animating the first row, and then the second row.
| | 02:03 | So we want to make sure that once we
start highlighting the graphics that are
| | 02:07 | already done bouncing into place.
| | 02:09 | So the first one is going to start
at this point, lets scroll down, let's
| | 02:13 | select a second person, let's drag the
second one out so that it starts just
| | 02:17 | before the first one ends.
| | 02:18 | Select the third one, then the fourth one
and we're going to position these
| | 02:22 | exactly the same for all 8 people.
| | 02:24 | And when we get to the 8th person
we need to fill this up just a little bit more
| | 02:30 | than half to represent the 6% of this
one person, or 60% of that last graphic.
| | 02:36 | So let's get the playhead at the end
of the animation on the eighth person.
| | 02:39 | Let's come back to the Clip and let's adjust the right clip
and just bring this in a little bit.
| | 02:45 | So we're going to come in and
we're going to set this to about 48.
| | 02:49 | So to preview let's hit the spacebar
we see all the people bounce into place
| | 02:54 | and then we will see the highlight
animation fill up to approximate 76% of all
| | 02:58 | the people that just dropped on the stage.
| | 03:00 | And now with this animated symbol in place,
next we will set the timing of this
| | 03:04 | animated symbol on the Main stage.
| | Collapse this transcript |
| Stopping and starting an animated symbol| 00:00 | Now to set the timing of this animated symbol
on the stage, let's come out of Isolation mode.
| | 00:04 | So with the top of the document, we can
come over here and click on Stage,
| | 00:08 | that will brings back to the main stage.
| | 00:10 | Now notice, since we have an animation
inside of anim_people we have this dotted gray arrow here.
| | 00:15 | So if I drag this back-and-forth you
can see the animation playing of the
| | 00:18 | animated people symbol on the Main stage.
| | 00:22 | So if I drag the playhead back to 0, notice the animation
for the animated people starts right away.
| | 00:28 | So let's come down here and under Playback
let's click on this button here and choose Stop.
| | 00:33 | What this will do is at the 0 marker of the Main stage
it will stop the anim_people symbol.
| | 00:39 | What we're going to do is decide when
we want the people to start to fall in.
| | 00:41 | I want that to start a little bit after
the wedge starts to open, so right about here.
| | 00:47 | So with the playhead at .574, let's
come down to Playback, let's come down and
| | 00:52 | choose Play, this will make the anim_people symbol
wait 'till half a second before it begins to play.
| | 00:58 | And then we can drag this out
and see how the timing works out.
| | 01:03 | Now the people start highlight right
about here, so once the people start to
| | 01:08 | highlight I want to bring in this text.
| | 01:10 | So let's select this text on the Stage,
let's activate the Toggle Pin,
| | 01:16 | let's drag this out to about half the second,
let's come upto the Opacity, let's set
| | 01:21 | the Opacity down and maybe let's set
the X to be a little bit to the right so
| | 01:26 | the sort of slides in a little bit.
| | 01:31 | I will click and drag that moves over.
| | 01:33 | Let's select the animation, let's choose
Ease out, Quadratic, and hit Return.
| | 01:39 | Deactive the Toggle pin let's save our file,
now let's preview this in a browser.
| | 01:45 | So we go to File, Preview in Browser
and so in the Browser, we can see all of
| | 01:51 | our animated elements and all of the
timing set, even the people waiting that
| | 01:54 | half the second since the Main
stage stop that animated symbol.
| | 01:58 | And now with our animated infographic in place,
next will create down
| | 02:01 | level stage so that visitors looking at your animation
in IE 7 or 8 can see a static graphic.
| | Collapse this transcript |
|
|
4. Final Preparations for PublishingCreating a down-level stage and preloader| 00:00 | Now IE 7 and 8 don't support some of the
animation techniques or CSS3 that we're
| | 00:04 | using in this Edge Animate composition.
| | 00:06 | So if somebody visits your site with IE 7 or 8,
we want to be able to show them something.
| | 00:12 | So what we're going to do is click on
the Main stage so that the Properties panel
| | 00:15 | shows us the Stage Properties and
we're first going to come down here to Poster.
| | 00:19 | So what Poster does is allows us to create a
snapshot of whatever's happening on the Stage.
| | 00:24 | So down the timeline let's grab the
playhead and let's drag this out to the
| | 00:27 | very end of our animation, so when we get to
this point here are entire infographic is in place.
| | 00:33 | Let's come over Poster, let's click on
the camera icon, we're going to come down
| | 00:37 | and Capture the current state of the Stage, click away.
| | 00:41 | What that will do is over here in the images directory,
we can see now we have a Poster.png file.
| | 00:46 | So Edge Animate again created a snapshot
of what we see on the Stage.
| | 00:51 | Next let's come over to Down-level Stage, click Edit.
| | 00:54 | So what we're doing inside the Down-level Stage
area is we're constructing
| | 00:57 | what browsers will see if they don't support
some of the advanced techniques
| | 01:00 | that we're working with inside of Edge Animate.
| | 01:02 | So what we're going to do here is come up
to the Poster, choose Insert, and
| | 01:07 | what this will basically do is grab the
Poster.png and drag it right into the Stage.
| | 01:12 | Now with our Down-level Stage created,
let's came up here and go to the Main stage.
| | 01:17 | Next let's come down to Preloader,
let's choose Edit, this is going to give us a
| | 01:22 | screen that people are going to see
while our Edge Animation is preloading.
| | 01:26 | Let's come over to our Library, let's
grab the preload_animation, let's just
| | 01:31 | drag this and put it right in the center of the Stage.
| | 01:33 | Now inside of Photoshop we set the
matte color here to be black, now the
| | 01:36 | Preloader is going to pick up whatever
color is in the background or the body of
| | 01:40 | the HTML page you are putting your animation into.
| | 01:42 | So you can always go back to Photoshop
and change the Matte color, if you're
| | 01:45 | going to be loading this against a different color background.
| | 01:48 | So with the Preloader in place let's go back to Stage.
| | 01:50 | Now that we have our Pre-loader and Down-level Stage
in place, next we'll talk about our publishing options.
| | Collapse this transcript |
| Publishing options| 00:00 | So now with you're animated infographic complete,
next you can come up to the
| | 00:04 | File menu, come down to Publish Settings.
| | 00:05 | By default web is always turned on, so
you can always take these HTML files and
| | 00:09 | all the JavaScript we looked at earlier,
put it up on your website, and run this
| | 00:12 | animation on your website.
| | 00:14 | You can also choose the Animate Deployment Package,
this gives you a single oam file,
| | 00:19 | represented here, that you can then bring
into Adobe Dreamweaver, Adobe
| | 00:24 | InDesign to using DPS, or into Adobe
News, lastly as iBooks, OS X, this will
| | 00:30 | give you a .WDGT, which is really just
a folder with all the contents inside,
| | 00:35 | and that's ready to be used
inside of iBooks or an OSX Dashboard.
| | 00:38 | And one thing to keep in mind iBooks does
not support the animated gif on the preloader.
| | 00:42 | So if plan on using this in iBooks author,
you can go to the Preload and
| | 00:45 | remove that animated GIF.
| | 00:48 | And with that, that completes creating
an animated infographics inside of Edge
| | 00:51 | Animate. Next we'll talk about
where you might want to go from here.
| | Collapse this transcript |
|
|
ConclusionWhere to go from here| 00:00 | Now that you've completed this course,
there are a few of the courses I have on
| | 00:04 | the lynda.com online training library
around Edge Animate.
| | 00:06 | One is Creating an Animated Star Field.
What's interesting about this course is
| | 00:09 | that the stars are randomized, so
that somebody watching the animation can't
| | 00:13 | predict where each stars going to show up,
or the timing that each star takes in
| | 00:16 | order to play and position itself on the Stage.
| | 00:19 | And another course I am creating a
Homepage promotional Marquee, where you can
| | 00:22 | photograph spread with each other, and
animated caption, and even provide users
| | 00:26 | the ability to jump between individual panels.
| | 00:29 | And with that, that completes creating
an animated infographic with Edge Animate
| | 00:32 | and I really appreciate you watching my course.
| | Collapse this transcript |
|
|
