IntroductionPreviewing the final project| 00:00 | (music playing)
| | 00:04 | Hi! I am Chris Converse and this is a course
on creating an animated homepage marquee for
| | 00:07 | your website using Adobe Edge Animate.
| | 00:10 | This project is going to feature a few
nice interactive user experiences. One, if the
| | 00:14 | user rolls their mouse inside of the marquee,
it will stop the automatic animation so the
| | 00:18 | user can interact with navigation
buttons or the Learn More buttons.
| | 00:22 | When we resize the browser, the design is
also going to conform to the browser size,
| | 00:26 | giving us a responsive design technique that's
going to be useful for multiple size screens.
| | 00:31 | And we will also be linking the navigation
to the timeline, so users can click on the
| | 00:35 | navigation items and jump to
any panel that they want to see.
| | 00:39 | So I hope this course sounds
interesting to you, and if so, let's get started.
| | Collapse this transcript |
| About the exercise files| 00:00 | Now if you are a premium subscriber to the
lynda.com online training library you will
| | 00:03 | have access to the exercise
files included in this course.
| | 00:07 | If not, you can retreat similar background
graphics, making your graphics 980 pixels x 300 pixels.
| | 00:13 | You can use Photoshop or any other image editing
tool, and you can use any standard web graphic format.
| | 00:18 | I'm going to be using JPEGs, which you can
see in this folder here, but you can also use
| | 00:22 | GIF files or PNG files.
| | 00:24 | So now that we are familiar with the exercise
files, next we will start creating our project.
| | Collapse this transcript |
|
|
1. Setting Up Your ProjectCreating a new project in Edge Animate| 00:00 | To begin our project let's
create a folder on the desktop.
| | 00:05 | We will call this myMarquee.
| | 00:08 | I am going to resizes this and move it
over to the right-hand side of the screen.
| | 00:13 | I want you to be able to see the files that
Edge Animate is going to build as we progress
| | 00:17 | through the project.
| | 00:19 | Now with the folder created, let's
come down and launch Edge Animate.
| | 00:23 | Now, to create a new project in Edge Animate
you can use the Splash screen and click Create
| | 00:26 | New, or you can come to the
File menu and choose File > New.
| | 00:30 | In either case, we are going to get a
brand-new default Edge composition.
| | 00:34 | So the first thing we are going to do is
change the Stage properties. First let's come over
| | 00:37 | here to the Width. Let's come over here to
the Pixels tab here. Let's change that to
| | 00:41 | percent. We want the canvas to be 100%
wide inside of the browser. This will give us a
| | 00:47 | foundation to be able to add
responsive techniques to our composition.
| | 00:50 | For Height, let's come down and change this to
300 High. This matches the background graphics
| | 00:56 | that we created inside of Photoshop.
| | 00:58 | Under Minimum Width, let's come down here
and let's change this to 500 pixels. We never
| | 01:03 | want our composition to be less than 500
wide. And for the Maximum Width, let's come down
| | 01:08 | and change this to 980 pixels--again,
matching the size of the graphics we created.
| | 01:14 | Overflow we are going to leave at Hidden.
This way anything that's larger or outside
| | 01:18 | of the Main Stage will be clipped by the div
containing this element. And then we are going
| | 01:22 | to leave Autoplay on.
| | 01:25 | Now with these settings in place, let's
choose File > Save As. From the Desktop, let's choose
| | 01:32 | to myMarquee folder, and for the file name
let's call this marquee.html, then hit Save.
| | 01:39 | Now to see what Edge Animate created, let's
come back to the operating system. Let's go
| | 01:43 | in to the myMarquee folder. We see here the
marquee.html file. This is the file that we
| | 01:48 | originally saved from Edge, but Edge also
created a source.an file. This is the Edge
| | 01:53 | Animate file where we are going to do our work.
| | 01:56 | We also have three JavaScript files
that relate to this particular project
| | 01:59 | and an edge_includes folder, which has all of the
JavaScript files necessary for the entire framework.
| | 02:05 | So now that we have our project created and
saved, next we are going to look at adding
| | 02:07 | the images into our project.
| | Collapse this transcript |
| Adding images to your project| 00:00 | Now that we have our composition created
in the myMarquee folder on the desktop, what
| | 00:03 | we are going to do here is add our
images into the myMarquee folder.
| | 00:07 | Edge Animate is always paying attention
for this particular project to this myMarquee
| | 00:11 | folder, very much the way a web browser looks at a
particular directory on your computer or on a server.
| | 00:17 | So inside of the myMarquee folder,
let's come in here and create an images directory.
| | 00:24 | With the images directory created, let's come
back to the Exercise Files, let's grab panel1,
| | 00:29 | panel2, and panel3.jpg, or again, you can use your
custom graphics that you've created, and let's drag
| | 00:34 | of these into the images directory.
| | 00:36 | So now we have an images directory with all
of these JPEGs inside of the myMarquee folder.
| | 00:41 | Let's switch back over to Edge Animate.
| | 00:43 | Now, in some cases, Edge Animate will update
automatically and you will see those graphics
| | 00:47 | in the Assets panel. If that's not happening
for you--which, it's not happening from either--
| | 00:52 | let's close the marquee.html file.
| | 00:55 | Then from the Splash screen under the
Recent Files, let's just simply open it again.
| | 01:00 | Each time you open your composition in Edge
Animate it will look into the source project
| | 01:03 | folder and look for any additional assets.
| | 01:06 | So here we can see, under the Assets
section of the Library panel, an images directory
| | 01:10 | with the three different
graphic showing up here.
| | 01:13 | So now that our images are
recognized by Edge Animate,
| | 01:15 | next, we'll look at creating
symbols out of these graphics.
| | 01:18 |
| | Collapse this transcript |
| Creating symbols for the panel artwork| 00:00 | Now for this project we are going to be
making use of a feature called symbols inside of
| | 00:04 | Edge Animate, and we are going to create a
series of symbols and nest them inside of each other.
| | 00:08 | So to start, we want to create a series
of symbols from our background graphics.
| | 00:11 | So first, let's come over to the Library panel.
Under Assets and images, let's grab panel1.jpg
| | 00:16 | and just drag and drop it onto the stage.
Once it's on the stage, you can click and
| | 00:20 | drag it. I am going to move it to the upper
left-hand corner until it snaps into place.
| | 00:25 | We can see up here in the Properties panel,
this is an image, and what I want to do now
| | 00:29 | is convert this into a symbol.
| | 00:30 | I can do that either by right-clicking and
coming down and choosing Convert to Symbol
| | 00:35 | or we can come up to the Modify
menu and choose Convert to Symbol.
| | 00:43 | Let's name this
panel_01_photo and then click OK.
| | 00:48 | So in the Library panel we'll see we have
our Assets with the images, and then under
| | 00:52 | Symbols we have a brand-new
symbol here called panel_01_photo.
| | 00:56 | So what this does is it allows me place this
symbol any number of times along my timeline
| | 01:01 | and then simply editing the one symbol
will update all instances of that symbol.
| | 01:05 | You will also notice down in the Timeline panel we
now have a brand-new layer here called panel_01_photo.
| | 01:10 | So let's do the same thing
for the other two graphics.
| | 01:14 | Let's grab panel2.jpg and just drag it on
the stage. Let's move it till it snaps into
| | 01:18 | the upper-left. We will right-click, choose Convert
to Symbol. We will call this panel_02_photo, click OK.
| | 01:31 | Let's come up to the images directory.
Let's grab panel3.jpg, align that to the upper-left.
| | 01:39 | Let's right-click, Convert to Symbol.
We will call this panel_03_photo, then choose OK.
| | 01:49 | So now we can see we have three symbols in
the Symbols panel, and we have three new layers
| | 01:53 | in our Timeline panel:
panel_01_photo, panel_02_photo, and panel_03_photo.
| | 01:58 | So now with our three artwork-based symbols
created, next, we will work on animating these
| | 02:02 | across the timeline.
| | Collapse this transcript |
| Animating the panel artwork| 00:00 | Now, to animate the background photos, let's
make a few adjustments. Let's come down to
| | 00:04 | our Timeline panel.
| | 00:06 | Now down on the right-hand corner
is the magnification of the Timeline.
| | 00:09 | Here on the timeline I can see 3 seconds.
| | 00:11 | If I come down here and make this smaller, I can
add more seconds, so I can see more of the timeline.
| | 00:17 | I am going to move this down to the point
where I can still see individual seconds,
| | 00:21 | but this will give me up to 12 seconds.
| | 00:23 | I am also going to come in here between the
stage and the timeline and just make my timeline
| | 00:28 | a little bit taller.
| | 00:33 | And over on the Timeline panel, on the
left-hand side let's come over and let's hide panel2
| | 00:37 | and panel3, so that I can only see panel1.
| | 00:41 | Now let's come up to the Stage. Let's select
panel1. I can tell this is selected by seeing
| | 00:46 | the highlight down here in the Timeline panel.
| | 00:48 | I can also tell by the panel 01_
photo selected in the Properties panel.
| | 00:52 | So now that I know I have the first photo
selected, let's grab the timeline. Let's drag
| | 00:56 | this out to 1 second.
| | 00:59 | In the Timeline panel let's make sure you
have turned off Auto-Keyfame and Auto-Transition.
| | 01:03 | These should all be gray. We are going to
manually set some of the transitions here.
| | 01:08 | And so at the 1 second mark, with panel_01_
photo selected, let's come to the Properties panel
| | 01:13 | and let's activate Keyframe for Opacity.
| | 01:16 | Let's come down here and
change the Opacity to 0.
| | 01:20 | Next, let's move the playhead out to 2 seconds.
Let's activate another keyframe. Let's move this up to 100%.
| | 01:31 | Select the first keyframe, right-click, and
choose Create Transition. Now if I drag
| | 01:35 | the playhead here, we can see we've
created an animation across 1 second.
| | 01:38 | Now, if you don't like the white being in the
background, let's simply come up here, let's
| | 01:44 | click in the negative area here to select
the Stage, let's come over here to the swatch
| | 01:49 | for background, let's come down and change
this to black, hit Return or any other color,
| | 01:55 | let's come back to the timeline, let's jog
the animation, and we can see that we have
| | 01:58 | a photograph that fades up
from black instead of white.
| | 02:02 | Now, with the first animation in place, let's
grab the playhead. Let's drag this out to 6 seconds.
| | 02:08 | Let's come over to the label for panel_02.
Let's turn on the Visibility. Let's select
| | 02:15 | this. Let's come up to the Properties panel.
Let's activate a keyframe for Opacity here as well.
| | 02:22 | With that activated, let's come down and
scrub this down to 0, drag the playhead out from
| | 02:28 | 6 to 7, activate another keyframe, animate this
up 100, select the first keyframe, right-click, and
| | 02:38 | choose Create Transition.
| | 02:41 | So now from 6 to 7 seconds we will see the
second photo fades in, giving us a cross-fade effect.
| | 02:47 | Next, let's grab the playhead. Let's drag
this out to 12 seconds. Let's come over and
| | 02:54 | show panel_03_photo. Let's select this layer,
activate a keyframe for Opacity. We will set
| | 03:02 | this down to 0. Let's grab the playhead.
| | 03:05 | Now if we drag this out, we can
add more time to the timeline.
| | 03:09 | Let's bring this over to 13 seconds,
activate a keyframe, bring the Opacity up to 100%.
| | 03:16 | Select the first keyframe,
right-click, and Create Transition.
| | 03:23 | So now, from 12 to 13 seconds, we
have a cross-fade from photo2 to photo3.
| | 03:30 | At this point, save your work. And to test the
animation in a browser, let's choose File > Preview in Browser.
| | 03:37 | And you can also use the
keyboard shortcut Command+Return.
| | 03:40 | And now in our browser we can see the
first photograph will fade up at 1 second, the
| | 03:44 | second one will fade up at the 6-second mark, and
the third one will fade up at the 12-second mark.
| | 03:48 | And after the third one the animation will stop.
| | 03:51 | So next, we will look at adding a
looping capability into our composition.
| | Collapse this transcript |
| Setting the animation to loop| 00:00 | Now to create our looping effect,
first we need to fade out photo 03.
| | 00:03 | So down on the timeline, let's grab the playhead.
Let's drag this out to the 18-second mark.
| | 00:11 | Let's select panel_03_photo. Let's
activate another keyframe for opacity.
| | 00:18 | Let's move this over to the 19-second mark. Let's add
another keyframe. Let's bring the Opacity down to 0.
| | 00:25 | Select the first keyframe, right-click,
choose Create Transition, and now we see that the
| | 00:30 | photograph fades from 3 back to 2.
| | 00:32 | However, we want to be able to
fade back to the first photograph.
| | 00:36 | So let's come back to the timeline labels,
let's select panel_02_photo, and let's bring the
| | 00:40 | playhead back to the 13-second mark.
| | 00:44 | This is the point where the third
photograph fades in over top of the second.
| | 00:48 | So let's come down here and let's activate a
keyframe for Opacity, and let's bring that down to 0.
| | 00:54 | We're not creating a transition here, so what
happens is once we get to the 13-second mark,
| | 00:59 | panel_02_photo, which is completely covered
up by panel_03, will have its Opacity set to 0.
| | 01:05 | This way, at 18 seconds, when we fade out the
third photo, this will cross-dissolve back
| | 01:10 | into the first photo.
| | 01:11 | So now with that in place, let's scrub
the timeline back to the very beginning.
| | 01:16 | Let's bring the playhead back to the 2-second
mark, which is the point where the first photograph
| | 01:20 | has faded in from our initial animation.
| | 01:23 | Let's come over here and let's click on this
little button here, which is the Insert Label
| | 01:26 | button, and let's type in
the name loop. Hit Return.
| | 01:31 | So now at the 2-second mark we
have a custom label named loop.
| | 01:38 | Let's scrub the timeline
back out to the 19-second mark.
| | 01:41 | Let's come over here to the
Actions panel. Let's insert a trigger.
| | 01:45 | This will bring up the dialog box for
the code for that particular action.
| | 01:49 | On the right-hand side, under the
Snippets, let's choose Play from.
| | 01:54 | By default, this will put 1000
ms into the parentheses here.
| | 01:58 | So what we want to do instead is tell the
particular symbol to play. And inside of the
| | 02:03 | parenthesis, two quotes for a string literal,
we're going to type in loop, and then close.
| | 02:10 | So now once the timeline gets to the
19-second mark, it's going to jump back to the looping
| | 02:15 | area, which is the point where the base photograph
is already animated in, and just continue to loop.
| | 02:22 | So let's choose Command+S or
Ctrl+S to Save our project.
| | 02:25 | Let's come down and
choose Preview in Browser.
| | 02:29 | So in the browser at the 1-second mark photo_
01 fades in; after 6 seconds photo_02 fades in;
| | 02:34 | at 12 seconds photo_03 fades in; and then at 18
seconds photo_03 will fade back out, revealing photo_01.
| | 02:42 | We set the timeline to go back to the looping
point, and this gives us the effect of a constant,
| | 02:46 | seamless transition
between the three photographs.
| | 02:50 | Now that our photographs seamlessly animate,
next, we can start working on the captions.
| | Collapse this transcript |
|
|
2. Creating and Animating SymbolsCreating the caption box background| 00:00 | Now, we're going to work on creating the caption.
| | 00:02 | First let's create the caption box.
| | 00:03 | So let's come up here to the tools in the
upper left-hand corner. Select the Rectangle tool.
| | 00:09 | Come back to the stage. Let's click and drag.
| | 00:12 | Once we have a rectangle defined,
let's come over to the Properties panel.
| | 00:16 | Under the Width, let's set this to 300 pixels, tab
down to the Height. Let's set that to 250 pixels.
| | 00:24 | Next, let's come down to Color.
Let's come down here and let's select black.
| | 00:28 | And then let's come over to the Alpha setting
here, and let's set this to 70%, and hit Return.
| | 00:36 | Now we have 30% transparent or 70% opaque
black square, and we're going to use this
| | 00:41 | as the background for all of the captions.
| | 00:43 | So let's come in here, right-click. Let's
convert this to a symbol. Let's call this
| | 00:48 | caption_box. Click OK.
| | 00:54 | Next, let's come up to the tool panel.
Let's select the Type tool. Let's click and drag a type block.
| | 01:02 | Let's type in
"This is a 1-line caption."
| | 01:06 | Close the text block.
| | 01:09 | Let's move this into place. Let's widen
this a little bit. Change the Height.
| | 01:17 | Let's come over to the Properties panel.
Let's change our type to 18 pixels.
| | 01:23 | Let's come up here and set the color to
white, and we have our text block here.
| | 01:28 | Now, with the text block selected, hold the
Shift key. Also, select the caption box, so
| | 01:34 | now both of these are selected.
| | 01:36 | Let's right-click, let's convert both of these into a
symbol, and let's name this panel_01_caption, then click OK.
| | 01:45 | So now if we look in the Symbols area of the
Library panel, we'll see we now have a caption
| | 01:49 | box symbol, and we have a panel_01
caption which contains the caption box.
| | 01:54 | This way we can reuse the caption box in the
other panels that we're going to make later on.
| | 01:57 | And now with the caption box and text in
place, next we'll create our Learn More button.
| | Collapse this transcript |
| Creating button artwork for captions| 00:00 | Now we're going to create the artwork for
the Learn More button, so let's come into
| | 00:04 | panel_01_caption. Let's
double-click this on the stage.
| | 00:07 | This will bring us into Isolation mode.
| | 00:09 | Here we can see that we're inside of
panel_01_caption, which is inside of the main stage.
| | 00:14 | So inside of this symbol, let's come up
to the Rectangle tool. Let's click and drag.
| | 00:20 | Once we've drawn a rectangle let's come over
to the Properties panel. Under Width, we're
| | 00:25 | going to set this to 110, and for the
Height, we're going to set that to 25.
| | 00:32 | Once that's in place, let's come up to Color.
| | 00:34 | In here we're going to add a
custom color. It's going to be #0366a9.
| | 00:42 | Let's set the Alpha up to 100. Let's hit Return.
| | 00:47 | Let's come up here and let's activate the
border. So under None, let's come down and
| | 00:51 | choose solid. We'll leave this at 1 pixel.
| | 00:55 | And for the Color we're going
to pick a slightly lighter blue.
| | 00:58 | So under custom color let's
start with #299ae0, then hit Return.
| | 01:03 | Now, if I click away, you can see this
slightly lighter border around the darker-blue button,
| | 01:10 | and this will act as the
artwork for our call-to-action button.
| | 01:13 | Next we'll add a text to label and
then we'll convert that into a symbol.
| | Collapse this transcript |
| Converting a custom button into a symbol| 00:00 | Next, we'll create a text
label for the Learn more button.
| | 00:04 | So we want to make sure we're still inside
of panel_01_caption, inside of isolation mode.
| | 00:09 | Let's come up to the tools. Let's
grab the Text tool. Let's click and drag.
| | 00:16 | Let's type in Learn more.
| | 00:18 | With the text selected,
let's come down and choose center.
| | 00:23 | Let's change the type size from 18 to 14 pixels.
| | 00:28 | Let's move this over top of the button.
| | 00:29 | I am going to resize this, and I'll use my
arrow keys to just move this into the center
| | 00:36 | of the blue box. So now if click away,
we can see our Learn more button.
| | 00:40 | So what I'm going to do is come in here,
select the text, hold the Shift key, and select
| | 00:45 | the blue rectangle.
| | 00:47 | With both of these selected, let's
right-click and choose Convert to Symbol.
| | 00:53 | Let's name this learn_more, then click OK.
| | 00:58 | Now we have an instance of the learn_more
symbol placed inside of the panel_01_caption symbol.
| | 01:04 | Next, let's grab the symbol.
Let's align it to the left of the type.
| | 01:07 | I am going to hold the Shift key, hit the
down arrow twice, which will nudge the button
| | 01:12 | away from the type about 20 pixels.
| | 01:15 | And we'll space the button away from the text
about the same amount in each one of our captions.
| | 01:19 | Now that we have the button positioned where we
want it, there is one more thing we're going to do.
| | 01:23 | With the Learn more symbol selected, let's
come up to the Properties panel, and notice
| | 01:26 | we have this custom class item here.
Let's open this up and let's add a custom class
| | 01:31 | called button_learn_more, then hit Return.
| | 01:37 | What we're doing here is adding a custom
class that Edge Animate will pass through the HTML,
| | 01:42 | and we're going to lock on to this later
to create our rollover states with jQuery.
| | 01:47 | So now that we have all of the elements
created for panel_01_caption, next, we'll position
| | 01:50 | the caption on the main
stage and then animate it.
| | Collapse this transcript |
| Animating the caption symbols| 00:00 | Now to position and animate panel_01_
caption, let's come back to the main stage.
| | 00:03 | Now if you are still in isolation mode, you
can come up here to the document breadcrumbs,
| | 00:07 | come up and click on stage.
That will bring us to the main stage.
| | 00:12 | On the main stage you can select this, and
all of these nested items are now inside of
| | 00:15 | that one symbol called panel_01_caption.
| | 00:19 | Let's move this down.
| | 00:21 | Let's set the X position to 20, so come up
here to the Properties panel. On the X, let's
| | 00:27 | set that to 20 and for the Y,
we are going to set this to 310.
| | 00:35 | Open my stage up a little bit here. I like
to put this just a couple of pixels outside.
| | 00:40 | And remember, our main Stage has the overflow
hidden, so anything we paste outside of this
| | 00:44 | stage area will get
clipped inside of the browser.
| | 00:47 | Next, let's come down to the timeline.
| | 00:49 | Let's get the playhead at the 2-second mark,
make sure panel_01_caption is selected. Let's
| | 00:56 | come up to the Properties panel. Let's
activate the Y property. That's going to give us a
| | 01:01 | top property here on the timeline. So with
the first keyframe in place, let's scrub out
| | 01:06 | to the playhead. Let's bring this over to
2.5, which is one half of a second.
| | 01:12 | Let's activate the top property again. Let's select this.
I like to hold the Shift key and use my up arrow.
| | 01:18 | I am going to bring this up until the bottom
of the button is at the bottom of the stage.
| | 01:25 | Hold the Shift key, hit two more so that I
get the same spacing underneath of the button
| | 01:30 | as the button is spaced from the text.
| | 01:34 | Let's grab the first keyframe on the timeline.
Let's right-click and choose Create Transition.
| | 01:39 | And with the transition selected, let's come
up to the Easing button. Let's open this up.
| | 01:44 | Let's choose Ease Out and let's
choose Quad, and then press Return.
| | 01:50 | This will give this a nice smooth
transition as the caption animates up.
| | 01:55 | Now, the caption is going to stay up the whole
time when the photograph is up, so let's bring
| | 01:59 | out the playhead up to the 6-second mark. Let's
come over here. Let's add a keyframe for top.
| | 02:07 | Let's move this to 6.5, add another keyframe,
select panel_01_caption on the stage, hold
| | 02:15 | the Shift key, use your down arrow, and
let's just move this back down to the 310 mark.
| | 02:21 | Select the first keyframe,
right-click, choose Create Transition.
| | 02:27 | With the transition selected, let's come over to the
Easing. Let's choose Ease In > Quad and then press Return.
| | 02:35 | So now we have the caption that we will
animate in during the first photograph, and then once
| | 02:39 | the photograph begins to change to
photo_2, the caption will move away.
| | 02:44 | To test this, let's choose File > Preview in
Browser. The photo fades in, the caption slides
| | 02:52 | up, and just as the second photo begins to fade in,
the caption for photo1 will then animate down.
| | 03:00 | Now that we have the first caption animating,
next, we will work on duplicating and animating
| | 03:03 | captions 2 and 3.
| | Collapse this transcript |
| Duplicating symbols for the second caption| 00:00 | Now that we have the full caption symbol
created for panel1, let's come over to the Library
| | 00:05 | panel. Let's select panel_01_caption,
let's right-click, and let's choose Duplicate.
| | 00:11 | This will duplicate the panel_01_caption,
but it will keep the instances of caption
| | 00:15 | box and Learn more. So, those symbols won't
get duplicated, but they will have instances
| | 00:19 | placed into the new symbol we just duplicated.
| | 00:23 | Next, let's double click this in the Library
panel. Let's rename this to panel_02_caption.
| | 00:32 | Let's hit Return, and now let's edit this.
| | 00:35 | Let's double-click this from the Library panel.
| | 00:37 | This will bring us into isolation mode, but
instead of seeing everything in place on the
| | 00:41 | background, which is called editing in place,
we are seeing just the artwork and symbols
| | 00:45 | for panel_02_caption.
| | 00:47 | So first let's come up to the text. Let's
select this. Let's double-click it to change
| | 00:52 | the text. So let's change this to say,
"This is a 2 line caption for this panel."
| | 00:59 | Close the text block. Let's grab the Learn
more button, hold the Shift key. You can hit
| | 01:05 | the down arrow twice to position this
approximately 20 pixels away from the text, the same amount
| | 01:09 | of space we had in panel_01_caption. And then from the
document breadcrumbs, let's go back to the main stage.
| | 01:17 | Now, back on the main stage, we only
have an instance of panel_01_caption.
| | 01:20 | Next, we'll add another instance of
panel_02_caption and create the animation for that as well.
| | Collapse this transcript |
| Animating caption two| 00:00 | Now to place panel_02_caption on the stage,
let's come over to the Library panel. Let's
| | 00:04 | grab panel_02_caption.
| | 00:08 | Let's just drag and drop
this right on the stage.
| | 00:10 | Now, with this placed on the stage, let's
grab this symbol. Let's just drag it and align
| | 00:14 | it right on top of the panel_01_caption.
| | 00:17 | Now in the timeline, we have these little arrows here
which show us all of the animated transition pieces.
| | 00:23 | Let's come in here and close up all
the ones for panel1 and all the photos.
| | 00:28 | This way we can see more
layers in the Timeline panel.
| | 00:30 | So here we are, on panel_02_caption.
| | 00:34 | I'll scrub the playhead. Let's bring this
up to 7 seconds, which is the point where
| | 00:38 | photo2 is fully faded in.
| | 00:41 | Under panel_02_caption, let's select this.
Let's come over to the Properties panel. Let's
| | 00:46 | activate the Y property.
| | 00:48 | Again, make sure your Auto
Transition and Auto Keyframe are turned off.
| | 00:53 | Let's move the playhead out to 7 1/2 seconds,
activate the keyframe again. Let's select
| | 01:00 | the caption on the stage. Let's arrow up
until the Learn more is right at the bottom. I'll
| | 01:07 | hold the Shift key, hit two more
arrows to put it about 20 pixels up.
| | 01:11 | An Edge also has rulers, so once you've
measured this, you can come down and drag a guide,
| | 01:17 | put this right here. That will
help us position the third caption.
| | 01:20 | Let's come down to the Timeline panel. Let's grab the
first keyframe, right-click, choose Create Transition.
| | 01:27 | With this selected, let's come up to Easing.
Let's choose Ease Out, keep Quadratic, hit Return.
| | 01:35 | Let's scroll the timeline over to the right.
Let's drag the playhead out to the 12-second mark.
| | 01:41 | This is right where the third photograph
will begin to transition in. Let's add another
| | 01:46 | keyframe for panel_02_caption.
| | 01:51 | Bring this into 12 1/2, another keyframe.
Let's grab this, use my arrow keys, and just arrow this down.
| | 02:02 | Select the first keyframe, right-click,
choose Create Transition. Select this, add Easing,
| | 02:08 | Ease In, Quadratic, hit Return.
| | 02:13 | Now, panel_02_caption will
slide up as photo2 fades in.
| | 02:17 | We'll hold its position all the way until
photo3 begins to fade in, and then we'll move
| | 02:23 | panel_02_caption back down.
| | 02:25 | So now, with the first two captions in place,
next, we'll work on creating the third one.
| | Collapse this transcript |
| Duplicating symbols for the third caption| 00:00 | Now, to create our third panel caption,
let's come over to the Library panel.
| | 00:04 | Let's select panel_02_caption, right-click.
Let's duplicate that symbol, double-click to rename.
| | 00:13 | Name this panel_03_caption, hit Return.
| | 00:15 | Now, on the main stage,
let's grab panel_03_caption.
| | 00:19 | Let's drag it from the
Library panel onto the stage.
| | 00:23 | Let's move this down into place,
position it right over top of the first two.
| | 00:29 | Now in the Library panel, let's come
over and double-click panel_03_caption.
| | 00:34 | This will bring us into
isolation mode for just panel_03_caption.
| | 00:39 | Let's select the text block, double-click it.
| | 00:42 | Let's change the sentence and let's type,
"This is a 3 line caption for the third panel
| | 00:47 | or marquee project on lynda.com."
| | 00:48 | Once you are done, close the text editing box,
position the button right under the text,
| | 00:57 | hold the Shift key, hit the down arrow twice, and
then up in the breadcrumbs, come down to the stage.
| | 01:05 | So now that we have our panel_03_caption created,
next, we'll position it on the stage and animate that as well.
| | 01:10 |
| | Collapse this transcript |
| Animating caption three| 00:00 | Now that we have in our third caption
positioned on the stage, let's come down to the timeline.
| | 00:05 | Make sure the playhead is
positioned at the 13-second mark.
| | 00:08 | Make sure we have panel_03_caption selected.
| | 00:11 | Let's active a keyframe for the Y property.
Let's move this out to 131/2 seconds, activate
| | 00:18 | another keyframe, and come up to the stage.
Let's select panel_03_caption. Holding my Shift
| | 00:26 | key, hitting the up arrow, I am going to move
this up until the bottom of the button lines
| | 00:30 | up with the bottom of the guide we created.
| | 00:32 | Down in the timeline, select the first keyframe,
right-click, Create Transition. Easing, let's
| | 00:42 | choose Ease Out, Quadratic, hit Return.
| | 00:47 | Now let's grab the playhead. Let's bring this
out to the 18-second mark, add another keyframe
| | 00:53 | for the Y property, move this out to 18 1/2
seconds, another keyframe, select this on
| | 01:01 | the stage, Shift+Down
Arrow, let's move this down.
| | 01:07 | Select first keyframe, right-click, Create
Transition. Easing, choose Ease In, Quadratic, hit Return.
| | 01:16 | So at this point we have a looping
animation with three photographs that cross-fade and
| | 01:20 | a caption that comes up during each
one of the individual photographs.
| | 01:23 | To test this, let's come up to the File
menu, let's choose Preview in Browser.
| | 01:27 | So we have our beginning animation, which
brings in the first photograph. Then after a few
| | 01:31 | seconds we transition photograph 1 into
photograph 2, caption1 goes away, caption2 comes up.
| | 01:37 | At 12 seconds we have photograph 3 fade in.
| | 01:39 | We have the caption for 2 fade away
and then the caption for 3 animated.
| | 01:43 | At the end of the animation at 18 seconds,
we animate the caption block 3 down, jump
| | 01:48 | the timeline to the looping point, right at
the point where our caption1 animates in for
| | 01:52 | the first photograph.
| | 01:53 | Now that we have all of the elements
animating properly, next, we'll add in the ability to
| | 01:58 | stop the animation if the user moves their
mouse inside of the composition. That way
| | 02:02 | things aren't animating when the user
is trying to interact with our marquee.
| | Collapse this transcript |
|
|
3. Setting Custom Variables and FunctionsSetting a custom variable| 00:00 | Next, we're going to work on creating a
script so that we can detect whether the mouse is
| | 00:04 | inside of the composition, and if it is,
we're going to actually stop the animation so the
| | 00:08 | user can interact with our marquee.
| | 00:10 | So the first thing we're going to do is create a
text field on the stage to test our interactive state.
| | 00:16 | So on the main stage, let's come up and grab
the Text tool. Let's click and drag. And let's
| | 00:24 | just create a test field here so we can
detect the state of a variable that we're going to
| | 00:28 | be setting in a few minutes.
| | 00:30 | So let's type autoplay into this text field.
| | 00:32 | With the text field selected, let's come up to the
Properties panel. Let's name this instance test, hit Return.
| | 00:41 | Let's make sure our type
is 24 pixels and is white.
| | 00:44 | Now down in the Timeline panel,
let's scroll this to the left. Let's bring the timeline
| | 00:50 | all the way down to the 0
marker. Llet's choose Insert Action.
| | 00:55 | So in our code window here what I first want
to do is set a variable. So we're come over
| | 00:59 | here to the right-hand side, we're going to
choose Set Symbol Variable, and Edge Animate
| | 01:05 | will create, based on its API, a way to set
a variable inside of a particular symbol.
| | 01:10 | So here we're on the Main stage, so setVariable.
The variable name we want is going to be called
| | 01:16 | marqueeAutoplay, so inside of this string
literal, we'll name this marqueeAutoplay, and
| | 01:27 | the value for this is going to be on.
| | 01:29 | We're going to set that to be on by default.
| | 01:32 | In order to see what this value is,
let's hit a Return, and we're going to set our test
| | 01:38 | text block to get the property of this variable.
| | 01:42 | So to do that, let's come over to the Snippets.
Let's choose Set Element Text, so we get symbol.
| | 01:49 | and then our jQuery $ sign.
| | 01:52 | Inside up here we're going to type test.
That's the name of the text block instance. And then
| | 01:59 | html variable, we're going to set this to
be a value. Inside of the parentheses we're
| | 02:05 | going to type sym.getVariable, beginning and
ending parenthesi. Inside, let's come up here
| | 02:20 | and double-click the name marqueeAutoplay.
Let's paste that down here inside of the string literal.
| | 02:28 | So now what's going to happen is when we
run this we're going to set a variable called
| | 02:32 | marqueeAutoplay with a value of on, and then
we're going to take the value of marqueeAutoplay
| | 02:37 | and set that as the text
for the test text block.
| | 02:42 | Let's close this. Now to save this we have
to Preview in Browser, so I'm going to hit
| | 02:47 | Command+Return. And what we'll when the
animation starts to play, we see this text block up
| | 02:51 | here showing us the word on, which
again is the value of the marqueeAutoplay.
| | 02:56 | So now that we've properly defined and set
the value of a variable on the main stage,
| | 03:00 | next we'll this variable based on whether
or not the user rolls their mouse inside or
| | 03:04 | outside of our composition.
| | Collapse this transcript |
| Detecting a mouse rollover on the main stage| 00:00 | Now we're going to write some custom jQuery
to detect whether or not the mouse is inside
| | 00:04 | or outside of our main
composition or the main stage.
| | 00:07 | So back in the timeline, let's double-click on
the action we added earlier at the 0 marker.
| | 00:13 | I'm going to make my text
window a little taller here.
| | 00:18 | I'm also going to come in here and get
rid of all of the green text, the comments.
| | 00:24 | Edge Animate will add these in by default to
sort of help you write some of your scripts.
| | 00:28 | So now what we're going to do is we're going
to start with $(). I want to test the stage.
| | 00:36 | Edge Animate will name the
stage with an ID of stage.
| | 00:39 | So inside of the parentheses, two quotes for a
string literal, a pound sign, type in stage, outside
| | 00:47 | of the parentheses .mouseenter, beginning and
ending parentheses, outside of the parentheses
| | 00:58 | .mouseleave, another set of
parenthesis, then a semicolon.
| | 01:07 | Inside of the parenthesis for mouseenter,
we're going to type function, another set
| | 01:12 | of parentheses, then
beginning and ending bracket.
| | 01:17 | Let's copy that. Let's put that
inside of the mouseleave parentheses.
| | 01:22 | So basically, what we're doing here is
searching for an element with an ID of stage, setting
| | 01:26 | a mouse enter with a custom function
and a mouse leave with a custom function.
| | 01:32 | Let's come in here and let's
split these open on the brackets.
| | 01:38 | Let's bring our cursor
inside of the mouseenter function.
| | 01:42 | Let's tab that in. And the first thing we want to
do is set the system variable marqueeAutoplay to off.
| | 01:48 | So let's come up here to line one. Let's copy
this. Let's paste that inside of here, change
| | 01:56 | the on to an off. Let's go inside of
mouseleave and let's paste this in again, leaving the
| | 02:03 | value for marqueeAutoplay to on.
| | 02:06 | Next, let's come up here and select text
that sets the text Property. Let's copy that.
| | 02:14 | Inside of mouseenter functionm, let's hit a
Return. Let's paste this in here, and then
| | 02:20 | let's come down inside of mouseleave.
Let's paste the same thing in again.
| | 02:26 | So when we do a mouseenter we're going to
set the test so we can see what the value
| | 02:31 | of marqueeAutoplay is, and then on
mouseleave we're going to change the value and the set
| | 02:35 | the test text block again.
| | 02:38 | Now to test this, let's close our code window.
Let's choose Preview in Browser, and notice
| | 02:46 | when I roll my cursor inside of the stage,
the text changes from on to off. And as long
| | 02:51 | as I'm in here, it will say off and when
I roll outside, it will change back to on.
| | 02:58 | So now moving in and out of the stage
mouseenter and mouseleave will change the value of that
| | 03:02 | variable and update the text field.
| | 03:05 | So now that we're properly detecting for
whether or not the user's mouse of our marquee, next,
| | 03:10 | we can write a custom function to stop the
timeline so that we don't animate the marquee
| | 03:15 | when the user's mouse is inside of the stage.
| | Collapse this transcript |
| Creating a custom JavaScript function| 00:00 | Now, in order to access a custom function from
other places on the timeline, we need to take
| | 00:04 | the function and define it as a variable.
| | 00:06 | So let's go back to the script at the 00 marker.
| | 00:09 | We created a function called checkAutoPlay.
| | 00:12 | After that custom function, let's hit a Return.
| | 00:15 | Next, we're going to type sym.setVariable,
very similar to what we did up here on line 1.
| | 00:24 | After setVariable beginning and ending parentheses
and a semicolon. Inside, two quotes for string literal.
| | 00:33 | We're going to call this
myFunction, then a comma.
| | 00:38 | Let's come up here and copy the name
checkAutoPlay, copy that to the clipboard.
| | 00:45 | Let's paste that inside of the parentheses.
| | 00:47 | So what we're doing here is we're taking a
new variable named myFunction and setting
| | 00:51 | it equal to the function named checkAutoPlay,
so we can later on call the myFunction variable,
| | 00:57 | which will in turn play the custom
function that we created inside of the script.
| | 01:02 | Now, with that in place, let's close the script.
| | 01:04 | Let's come back to the timeline. Let's move
the playhead out to 5 1/2 seconds. Let's come
| | 01:09 | over to the Actions. Let's insert a trigger,
and inside of here we want to create a new
| | 01:13 | variable and we're going to set it equal to
the myFunction variable we just created earlier.
| | 01:21 | So let's create a variable called myLocalVar.
We're going to set that equal to sym.getVariable
| | 01:30 | beginning and ending parentheses, semicolon.
Iinside of the parentheses, two quotes for string
| | 01:36 | literal, myFunction. Let's hit a Return.
| | 01:43 | Let's come up here. Let's copy the myLocalVariable,
because now the value of that is equal to a function.
| | 01:48 | Next line, myLocalVar, beginning and
ending parentheses, then a semicolon.
| | 01:54 | So what's happening here is the timeline
trigger at 5 1/2 seconds is declaring a new variable,
| | 01:58 | setting it equal to a function variable we
created at the 00 marker, and then we're going
| | 02:02 | to run that, because it is a function and
we can run that like any other function.
| | 02:06 | Next, let's copy these two lines.
Let's close the timeline trigger.
| | 02:12 | Let's come back to the timeline. Let's move
out to the 11-second mark, maybe about 11 1/2.
| | 02:21 | Let's add another timeline trigger,
Let's paste that. Let's close it.
| | 02:29 | Let's come out to the 17 1/2. Let's insert
another timeline trigger. Let's paste the same script.
| | 02:36 | So now at 3 points along the timeline, we're
going to check that custom function, which
| | 02:40 | in turn is going to check to variable marquee
autoplay, whose value is going to be set based
| | 02:45 | on whether not we're rolled in or
out of the marquee with our mouse.
| | 02:48 | Now to test this, let's hit
Command+Return, look at this in the browser.
| | 02:51 | I have my cursor inside, the Marquee auto
variable is set to off, and notice that the
| | 02:57 | animation doesn't go past the very first frame.
| | 03:00 | I'll roll my mouse outside. The variable changes
from off to on, and then in the custom function
| | 03:05 | we will in turn trigger the timeline to play,
and this will continue to play until we move
| | 03:08 | our mouse outside the marquee stage, which will in
turn turn off the autoplay and stop the main stage.
| | 03:15 | So now that the marquee's
animation responds to the user's mouse,
| | 03:18 | next, we can work on creating
navigation to go between the panels.
| | Collapse this transcript |
| Running a custom JavaScript function| 00:00 | Now that we have our rollover
detection in, let's add a custom function.
| | 00:03 | So back on the timeline, let's go to the action that
we put at the 0 marker. Let's double-click this.
| | 00:10 | After the mouseover function after our mouseover
script, let's hit a few Returns. Let's add a function.
| | 00:17 | So we'll type function, space. The name of our
function is going to be checkAutoplay, beginning
| | 00:25 | and ending parentheses,
beginning and ending bracket.
| | 00:28 | Let's split that open on the brackets.
| | 00:32 | Inside of the function, let's start with the
conditional statement. We're going to type
| | 00:36 | if, beginning and ending parentheses,
beginning and ending bracket, split that open. Inside
| | 00:43 | of the parentheses for if, the condition is
going to be sym.getVariable, then beginning
| | 00:53 | and ending parentheses. Inside of the parentheses,
two quotes for a string literal, marquee_autoplay,
| | 01:04 | double equals. We're going to check the
absolute equality. Two quotes and then on.
| | 01:09 | So what we're saying is if the getVariable
equals on, we're going to execute what's inside
| | 01:15 | of this if statement.
| | 01:17 | So I'm going to type sym.play, beginning
and ending parentheses, then a semicolon.
| | 01:23 | Now we are going to add an else, so after the
beginning and ending bracket, let's add else.
| | 01:29 | Another beginning and ending
bracket. Let's split that open.
| | 01:34 | Inside here we're going to type sym.stop,
beginning and ending parentheses, then a semicolon.
| | 01:41 | So what this function is going
to do, when we call checkAutoPlay,
| | 01:44 | we're going to check to see if
the autoplay variable equals on.
| | 01:47 | If it does, we are going to continue to play the
main stage; if not, we're going to stop the main stage.
| | 01:52 | Now we also need to play the main stage when the
user moves their mouse outside of the marquee as well.
| | 01:56 | So let's come up here and copy the
sym.play, let's copy that to the clipboard.
| | 02:02 | Let's come up to the mouseleave
function, and let's paste up here as well.
| | 02:07 | So if the autoplay checks, and if the marquee
autoplay equals on, we're going to play; otherwise
| | 02:12 | we're going to stop. And when the mouse
leaves, we're going to initiate play as well.
| | 02:17 | Now that we have our custom function defined,
next, we're going to create some timeline triggers
| | 02:20 | to run this function and check
the marqueeAutoPlay variable.
| | Collapse this transcript |
|
|
4. Creating and Linking the NavigationCreating navigation button artwork| 00:00 | Now we're going to create the navigation for
our marquee so that we can have the user jump
| | 00:03 | between individual panels.
| | 00:05 | So to start this, I'm going to come down here to
the stage and I'm going to scroll over to the right.
| | 00:09 | I'm going to move the responsive ruler.
I'm going to move this out to greater than 980
| | 00:15 | pixels. And you'll notice that this ruler
will lock at the 500 mark and the 980-pixel
| | 00:21 | mark, which matches the stage
settings of minimum width and maximum width.
| | 00:25 | I'm also going to come down
here and change the zoom to 300%.
| | 00:30 | I'm going to scroll inside of the stage so I
can see the lower right-hand corner of the stage.
| | 00:36 | Now let's come up to the tools. Let's select
this Ellipse tool. Let's click and drag. Hold
| | 00:42 | Shift to conform this to a circle.
| | 00:44 | We want to come in here to the width and height.
| | 00:47 | We're going to set this
to 14 pixels x 14 pixels.
| | 00:52 | Under Color, let's come in here
and make sure this is set the white.
| | 00:57 | Now with this selected,
let's come over to the X and Y properties.
| | 00:59 | For the X-property, let's set this to 850
pixels and 260 on the Y. And our users are
| | 01:09 | going to be able to interact with these, so
let's come down in the Properties panel to cursor.
| | 01:14 | Let's click on Auto and
let's change it to a pointer.
| | 01:16 | This will indicate to our users through the
use of a pointer that they can click on these
| | 01:19 | individual graphics.
| | 01:21 | And then lastly, with the object selected,
let's right-click, come down and choose Convert to Symbol.
| | 01:29 | Let's name this nav button, then,click OK.
| | 01:31 | So now we have an instance
of nav button on the stage.
| | 01:35 | Let's come up to the Properties panel.
Let's change this instance name to nav_button_01.
| | 01:41 | For each individual button we have to
have a unique name for each navigation item.
| | 01:45 | Now let's come down to the stage, hold the
Option or Alt key in windows, click and drag
| | 01:51 | to drag out a second copy or a second instance.
| | 01:55 | Let's come up to the Properties panel.
Let's name the instance nav_button_02.
| | 02:01 | Let's set the X-property to 890, then hold
the Option or Alt key, drag out a third copy,
| | 02:11 | name the instance nav_button_03,
and set the X property 930 pixels.
| | 02:20 | This will space each one of the
buttons 40 pixels apart, and then click away.
| | 02:25 | So now in the timeline you'll see we have
nav_button_1, nav_button_2, and nav_button_3,
| | 02:30 | and we can also see these on the stage.
| | 02:32 | At this point, let's choose Command+S or
Ctrl+S to save, and then preview in browser.
| | 02:37 | Now, in the lower right-hand corner, we'll see
the three buttons and as we roll over these,
| | 02:40 | we'll get the hand cursor indicating
to the user that these are clickable.
| | 02:44 | Now that we have the buttons created, next,
we'll hook these up to actually jump the timeline
| | 02:47 | to specific points.
| | Collapse this transcript |
| Linking the navigation to panels| 00:00 | Now, before we add links to these buttons, we're
going to need to put frame labels on the timelines
| | 00:04 | so we can link these to specific points.
| | 00:06 | So down in the timeline, let's scroll this
over to the left. Let's bring our playhead
| | 00:11 | over to the 5-second mark.
| | 00:13 | This is a few seconds right before the trigger,
which will actually detect the marquee autoplay.
| | 00:19 | So inside of here, let's come over to the
frame label. We'll call this panel_01, hit Return.
| | 00:27 | Let's scroll out, bring the playhead out to
the 11-second mark, add a frame label, name
| | 00:35 | this panel_02, and then scroll out.
Bring the playhead out to the 17-second mark.
| | 00:45 | Add another frame label, name it panel_03.
| | 00:50 | So now we have three destinations
that we can link our buttons to.
| | 00:53 | Let's come up to the stage. Let's select the
first nav button instance named nav_ button_01.
| | 00:59 | Let's right-click. Let's come down to Open
Actions for nav_button. Inside of here we're
| | 01:05 | going to come down and choose the click event.
| | 01:08 | So on click, we're going to come down and
choose Play from. Let's come in here and let's delete
| | 01:14 | the 1000 ml, two quotes for a string literal, and
let's type in the name of the frame label panel_01.
| | 01:23 | Now with that in place, let's come in here.
Let's copy this. Let's close our script. Let's
| | 01:29 | select the second nav button instance named
nav_button_02. Let's right-click, Open Actions
| | 01:36 | for nav_button_02, select the click event.
Let's paste our script. Let's change the 01
| | 01:43 | with an 02. Close our code window, select the
third nav button instance named nav_button_03,
| | 01:53 | right-click, choose Actions, click event, paste in
our script, and change this to panel_03, then close.
| | 02:05 | Let's choose File > Save
and then Preview in Browser.
| | 02:09 | Now inside of our marquee, we can come in here,
roll over the different buttons. Let's click
| | 02:13 | on panel_02. This will jump the timeline
over to panel_02. Click on the third one, this
| | 02:18 | will jump us to panel_03,
back to 2, and then back to 1 .
| | 02:22 | Then I'll leave this on panel two, I'll
roll my mouse outside of the stage. The autoplay
| | 02:28 | will be turned on, and then the marquee will continue
to animate until the user rolls back into the marquee.
| | 02:34 | Now that we've got our navigation hooked up,
next, we'll add an indicator so that the user
| | 02:37 | knows which one of the panels
they are currently looking at.
| | Collapse this transcript |
| Creating the navigation indicator| 00:00 | Now we're going to create
the artwork for the indicator.
| | 00:02 | So let's come up to the tools. Let's grab
the Ellipsis tool. Let's click and drag, hold
| | 00:08 | the Shift key to conform this to a circle.
| | 00:10 | In the Properties panel, let's come in to
the width and height. We'll change this to
| | 00:15 | 28 on both. Under Color, let's
come down and choose for the fill.
| | 00:23 | You can pick any color, but we're going to
come down and set the Alpha to 0. Let's come
| | 00:27 | under stroke. Let's pick white, chose solid
for the type, and then 2 pixels for the size.
| | 00:37 | Selector the indicator on the stage.
Let's come up to the Properties panel. Let's change
| | 00:44 | the instance name to indicator. Let's
click and drag, and let's position it right over
| | 00:49 | top of the very first nav button. It
should snap into place aligning in the center.
| | 00:53 | Now we do need to make sure the indicator
is behind those individual navigation buttons;
| | 00:57 | otherwise the indicator will get in the
way of the user clicking on those buttons.
| | 01:01 | So with the indicator selected, let's come
up to the Modify menu, come down to Arrange,
| | 01:06 | and choose Send Backward.
| | 01:08 | You'll see in the timeline the indicator is now
behind button 3. You can also hit Command+Left
| | 01:13 | bracket or Ctrl+Left bracket.
| | 01:14 | I'm going to hit two more times and we'll see the
indicator is now behind all three of these button.
| | 01:19 | I'm also going to come in here and collapse these,
since I don't need to see the properties for those buttons.
| | 01:24 | And now that we have the indicator artwork
created, next, we'll animate the indicator
| | 01:28 | state to reflect the
current panel of the marquee.
| | Collapse this transcript |
| Animating the navigation indicator| 00:00 | Now to animate the indicator, let's come up to
the stage. Let's select the indicator artwork.
| | 00:05 | This will also select this in the timeline.
| | 00:08 | Now, it is behind the very first one, which
is the first panel, and we need this to stay
| | 00:12 | in place until we transition to the second
panel, which happens at the 6-second mark.
| | 00:16 | So let me scroll down in the Timeline window
here. So at the 6 second mark, with the indicator
| | 00:23 | selected, let's activate the left or X property.
| | 00:26 | So we added a keyframe here. Let's move
this out to the 7-second mar. This is the same
| | 00:33 | duration that the second
photograph takes to fade in.
| | 00:36 | So at the 7-second mark
let's activate another keyframe.
| | 00:39 | Let's come up to the stage. Let's move this over
so that it's behind the second navigation item.
| | 00:46 | Let's come down to the timeline, select the first
keyframe, right-click, and choose Create Transition.
| | 00:52 | With this selected, let's come up to
Easing, choose Ease Out > Quadratic, hit Return.
| | 00:57 | So now if we scrub the timeline, we can
see when the photography changes from panel 1
| | 01:03 | to panel 2, the indicator will also move
to indicate that we're on the second panel.
| | 01:10 | Scroll the timeline. Let's find a point where we
animate from two to three, which happens at 12 seconds.
| | 01:17 | So at 12 seconds, on indicator, let's
activate another keyframe. Bring the playhead out to
| | 01:23 | the 13-second mark, activate another keyframe,
come up to the stage, drag this over until
| | 01:29 | it snaps behind the third navigation item.
| | 01:33 | Select the first keyframe, right-click,
choose Create Transition, make sure Ease Out and
| | 01:39 | Quadratic are still selected.
| | 01:41 | Next, let's scroll the timeline out. When we
get out to the 18-second mark, let's activate
| | 01:50 | another keyframe, then move out to 19 seconds,
activate another keyframe, grab the indicator
| | 01:58 | and let's drag this all the way back to
be behind the first navigation button.
| | 02:03 | Select the first keyframe, right-click,
Create Transition. Then again, make sure Ease Out
| | 02:09 | and Quadratic are on.
| | 02:11 | So now with that completed, Hit Command+S
or Ctrl+S to Save and then Command+Return
| | 02:15 | or Ctrl+Return to preview in browser.
| | 02:17 | And now in the browser we can see the
indicator is behind the very first panel, and then when
| | 02:21 | we go to panel 2, the indicator will animate
to be behind the second button and then behind
| | 02:26 | the third button, and then when we go from
3 to 1, the indicator will animate from the
| | 02:29 | third button to be behind the first button.
| | 02:32 | This also works if I come up
and interact with this as well.
| | 02:34 | Since we're jumping on the timeline and the
indicator is animated across the timeline,
| | 02:38 | the indicator will also move along as
I select different navigation items.
| | 02:42 | And now that we have our animation and navigation in
place, next we'll add some custom interactions using jQuery.
| | 02:47 |
| | Collapse this transcript |
|
|
5. Creating Custom Interactions with jQueryAdding a custom CSS class to navigation artwork| 00:00 | Now we're going to add a rollover to the
navigation buttons. But instead of adding a custom rollover
| | 00:04 | event to each button, what we're going to
do is add a custom class and then write a
| | 00:08 | jQuery script later.
| | 00:10 | So the first thing we need to do is come
into our navigation. Let's double-click one of
| | 00:14 | the nav buttons. So with this selected--we
can see we have the ellipse selected here--
| | 00:19 | let's come over here in the Properties panel,
let's click on the custom class, and let's
| | 00:22 | add a custom class into this.
| | 00:25 | So we'll type button_circle and then hit Return.
| | 00:29 | Now since we are working inside of the nav
button symbol, which we can see up here in
| | 00:34 | the breadcrumbs, that custom class that we
just added is going to be added to all instances
| | 00:39 | of nav button symbol.
| | 00:40 | So let's come back to the main stage.
| | 00:43 | Now, to test this and make sure,
let's come into the second instance.
| | 00:48 | Let's select this, come up to custom class.
We can see it's highlighted. And if I open
| | 00:51 | this up, we can see button_
circles has been applied here as well.
| | 00:56 | Back to the main stage. And now that we
have our custom class assigned into each one of
| | 00:59 | our nav button instances, we'll write a
custom jQuery script to activate the rollovers.
| | Collapse this transcript |
| Create a navigation rollover effect with jQuery| 00:00 | Now, instead of adding a custom action to
each one of our navigation buttons, what we're
| | 00:04 | going to do instead is write a jQuery statement
that's going to target the custom class inside
| | 00:08 | of each nav button and
write our own rollover script.
| | 00:12 | So down in the Timeline panel, let's scrub
the playhead. Let's drag this all the way
| | 00:16 | back to the 0 marker, and then let's open
the action that we have at the 0 marker.
| | 00:21 | So after our custom function and our variable
defined in the function, let's add a few returns.
| | 00:25 | So what we're going to down here is we're going to
start with a jQuery statement: $(".button_circle").
| | 00:37 | This is the same name as the custom class we put
inside of every one of the nav button instances.
| | 00:45 | So after button_circle we're going to type
.hover, another set of parentheses, semicolon.
| | 00:53 | Inside of the parentheses for hover, we're
going to put two functions: the first one
| | 00:58 | is on mouse over or on hover;
the second one is on mouse leave.
| | 01:04 | So I'll type function(), beginning
and ending bracket, then a comma.
| | 01:11 | Let's come in here and copy that,
and let's paste it a second time.
| | 01:16 | Next let's split both of
these open on the brackets.
| | 01:21 | So again, inside of the first one here is on
mouse over, we're going to type $(this), outside
| | 01:30 | of the parentheses, we're going to type .css,
beginning and ending parentheses, semicolon.
| | 01:38 | Inside of the parentheses,
two quotes for a string literal.
| | 01:41 | We're going to type background-color.
| | 01:43 | Outside of the quotes for a string literal but
still inside of the parentheses for css, comma, two
| | 01:51 | more quotes for another string literal.
| | 01:54 | This is going to be the color, #299ae0.
| | 02:01 | Let's copy this entire line.
| | 02:04 | Now inside of the mouseout, which is the
second function inside of the hover statement,
| | 02:08 | we're going to set this back to white, so #fff.
| | 02:12 | So again, this jQuery statement is going to
find every instance of button_circle inside
| | 02:16 | of any symbol or anywhere on our composition
and then when we hover over it, we're going
| | 02:20 | to change the background color to this blue,
and then when we were no longer hovering over
| | 02:24 | the object, it's going
to go back to being white.
| | 02:26 | So let's hit Command+S or Ctrl+S to save our
project, and let's go to File > Preview in Browser.
| | 02:35 | Now when I roll in mouse into the composition,
when I roll over each one of these buttons,
| | 02:39 | they will turn blue, and when I roll
away, they will go back to being white.
| | 02:43 | So again, this is a much more efficient
technique than adding a custom action on each one of
| | 02:49 | the individual navigation items.
| | 02:52 | So now with that in place, next, we'll work
on hover states and hyperlinks for the learn
| | 02:55 | more buttons inside of our captions.
| | Collapse this transcript |
|
|
6. Linking the Caption ButtonsLinking the caption buttons to web pages| 00:00 | Now we're going to add
hyperlinks to our learn more buttons.
| | 00:03 | So what we're going to do here on the
stage, I'm going to zoom out to 100%.
| | 00:07 | You can type in 100 here and hit
Return or you can hit Command+1 or Ctrl+1.
| | 00:11 | I'm also going to come down here and center
the stage. And I'll scroll out here a little
| | 00:16 | bit, since my screen is a little bit smaller.
| | 00:19 | And down in the Timeline panel, I'm going to
jog the playhead out to the five-second mark
| | 00:24 | so I can see the caption on the stage.
| | 00:26 | Next, let's double-click. This will brings
us inside of panel_01_caption, and we have
| | 00:31 | the Learn more symbol instance selected.
| | 00:34 | Now, with this selected, the first thing we want to do
is indicate to our user that they can click on this.
| | 00:38 | So in the Properties panel, let's come down to the
Cursor Setting. Let's turn on the Pointer and hit Return.
| | 00:44 | Next, we're going to right-click, come
down and choose Open Actions for "learn_more."
| | 00:50 | Inside of here, what we're going to do is
come down to click, then on the right-hand side,
| | 00:55 | under the Snippets, let's
come down and choose Open URL.
| | 00:59 | So inside of here, we're going to change
adobe.com to lynda.com, and then inside of self, we're
| | 01:07 | going to put blank.
| | 01:10 | That way when we click this link, it will open a new
window with the lynda.com website in that new tab.
| | 01:17 | Next, let's copy this line. Let's close this.
| | 01:24 | Let's come back out to the main stage.
| | 01:26 | Let's scrub the Timeline. Let's come out to
the 11-second mark. Let's double-click inside
| | 01:32 | of panel_02_caption. Let's select Learn more
buttons inside of here, come over to cursor
| | 01:37 | in the Properties panel, select pointer.
Then we'll right-click, choose Open Actions for
| | 01:43 | "learn_more", choose a click
event. Let's paste in our code.
| | 01:53 | This one we'll just link
to Adobe. Let's close that.
| | 01:59 | Back to the main stage. Let's scroll the
timeline out, then scrub it out to the 17-second mark,
| | 02:07 | double-click panel_03_
caption, select Learn more.
| | 02:13 | Assign the pointer cursor, right-click, Open
Actions, click event. Let's paste in our script.
| | 02:26 | We'll type in codifydesign.
| | 02:32 | So now we have our setting cursor setting
and a hyperlink activated for each one of
| | 02:35 | the buttons inside of our three captions.
| | 02:37 | Command+S or Ctrl+S to save,
and then let's preview in browser.
| | 02:47 | Now, inside of the browser, let's come down and click
on the button for Learn more inside of caption 01.
| | 02:52 | That will open lynda.com in the new tab.
| | 02:55 | Let's close this. Let's come over,
let's activate panel two.
| | 03:00 | We'll click this one.
This will bring up adobe.com. We'll close that.
| | 03:05 | Come over to the third panel. We'll click
Learn more, and this will bring up my company,
| | 03:11 | Codify Design Studio.
| | 03:13 | So now we have activated not only the pointer
tools for the buttons but hyperlinks for each
| | 03:17 | one of these individual buttons.
| | 03:19 | Now that we have those in place, next we'll
activate a hover state using the same technique
| | 03:22 | we used for the navigation.
| | Collapse this transcript |
| Adding a custom CSS class to the caption button artwork| 00:00 | Now to add a custom rollover state to our Learn
more buttons, let's go into one of our captions.
| | 00:04 | I'm going to double-click here
and go into panel_03_caption.
| | 00:09 | If I select the Learn more symbol here, we can
see that this is an instance of the learn_more
| | 00:13 | symbol, and we already created a
custom class called btn_learn_more.
| | 00:17 | Again, we needed to do this because we have a
box and a text field inside of this symbol.
| | 00:22 | So we're going to lock onto the
parent container of these items.
| | 00:27 | So now let's come back to the stage.
Let's double-click the Learn more.
| | 00:31 | Now we're inside of the learn_more symbol,
which is inside of the panel_03_caption.
| | 00:35 | Inside of here we have our two objects. Inside the
Learn more symbol, let's select the blue rectangle.
| | 00:40 | With that selected, we're going to add
a custom class onto this item as well.
| | 00:44 | So up here in the Properties panel, let's click on a
custom class. Let's add button_artwork, then hit Return.
| | 00:52 | So now since we've added that custom class
inside of the Learn more symbol here, that
| | 00:57 | will be applied to every instance of the
Learn more button, which is inside of every one of
| | 01:01 | our caption symbols.
| | 01:03 | And now with that in place, we can write a
custom jQuery statement to activate rollovers
| | 01:06 | for all of the Learn more buttons.
| | Collapse this transcript |
| Create a button rollover effect with jQuery| 00:00 | Now to write our custom jQuery to activate
the rollover states for the Learn more buttons,
| | 00:04 | let's come back to the main stage.
| | 00:06 | Down in the Timeline panel, let's scroll
out to the left. Let's bring our playhead all
| | 00:12 | way out to the 0, 0 marker.
| | 00:14 | Let's double-click the action at the 0 marker.
| | 00:18 | After the custom function that we wrote
earlier for the navigation items, let's come in here
| | 00:22 | and do something very similar.
| | 00:24 | Let's start with a dollar sign,
beginning and ending parentheses, two quotes inside
| | 00:28 | for a string literal.
| | 00:29 | We're going to search for .btn_learn_more.
| | 00:37 | This is the custom class we put on the outermost
symbol in each instance inside of the captions.
| | 00:43 | After the parentheses .hover();. Inside we are going to a
dd two functions, function (), beginning and ending bracket, then a comma.
| | 01:01 | Let's copy the function and
paste it again after the comma.
| | 01:03 | Then we'll split these open on the brackets.
| | 01:07 | So, on mouseover the first
thing we're going to do, $(this).
| | 01:17 | Outside of the this we are going to type .find,
because we are going to look for a class that's
| | 01:21 | inside of the actual button learn more class.
| | 01:25 | Beginning and ending parentheses, semicolon.
| | 01:28 | Inside of the parentheses for find,
two quotes for a string literal.
| | 01:32 | We are going to search for button_artwork.
| | 01:36 | Outside of the parentheses, .css,
beginning and ending parentheses then a semicolon.
| | 01:45 | Inside of the parentheses for css,
two quotes for a string literal.
| | 01:50 | We are going to type background-color.
Then outside of the quotes but still inside of
| | 01:57 | the parenthesis, two more
quotes for another string literal.
| | 02:00 | I am going to open up my code window
here. The value is going to be #2d90d2.
| | 02:11 | Let's come in here and
copy this entire statement.
| | 02:17 | Inside of the rollout area, or the second
function of hover, we are still going to find
| | 02:21 | button_artwork again. We are going to set the CSS
background-color back to the original color, which is #036689.
| | 02:33 | Let's close our code window. Let's chose
Command+S or Ctrl+S to save and then Preview in Browser.
| | 02:42 | Now when I roll over the Learn more button,
the main button trigger is being found, and
| | 02:47 | then we're searching for the rectangle
inside with the class of button_artwork.
| | 02:51 | So, now we are getting a rollover effect
when we roll our mouse over the nav button instance,
| | 02:55 | and this work for all three captions.
| | 02:57 | Let's jump over to panel 2
and then jump over to panel 3.
| | 03:02 | So, now that the functionality of our project's
complete, next we'll make the design responsive
| | 03:06 | and we will get rid of our debugging code.
| | Collapse this transcript |
|
|
7. The Final DetailsMaking your design responsive| 00:00 | Now we are going to set up parts
of our design to be responsive.
| | 00:03 | When we started the project we created a
width of 100% on our main stage, so this means as
| | 00:08 | our stage collapses down and our Overflow is
set to hidden, our photography will be cropped
| | 00:13 | and we won't get a horizontal
scrollbar in our composition.
| | 00:16 | However, the problem we are going to have is
when we close the browser down, the navigation's
| | 00:20 | going to be hidden.
| | 00:21 | So in Preview in Browser here, if I close
the browser down, you'll see that the navigation
| | 00:25 | actually gets hidden.
| | 00:27 | When we get under 500 pixels, this is where
we'll have horizontal scrolling. But again,
| | 00:31 | our navigation can be interacted with until
we open the browser up to a certain width.
| | 00:36 | So we are going to set a responsive design property
on the navigation so that it moves with the browser.
| | 00:41 | So, let's close out of Preview in Browser.
| | 00:44 | On the stage I am just going to scroll over
to the right-hand side here, and when we set
| | 00:48 | up our responsive properties, we have this
little ruler here that we can move back and
| | 00:52 | forth, and Edge Animate will give us a
preview of what the design will look like.
| | 00:56 | 980 is our maximum width, all the way down
to a minimum width of 500. But again, notice
| | 01:01 | we don't see the navigation moving here either.
| | 01:03 | So what we are going to do is come down to
the Timeline panel. I want to group together
| | 01:08 | the indicator, hold the Shift, and select nav_
button_01, nav_button_02, and nav_button_03.
| | 01:13 | By holding Shift and selecting these here,
I'm assured that I'm selecting all of those individual items.
| | 01:18 | Let's come up to the Modify menu. Let's
come down and choose Group Elements into a DIV.
| | 01:24 | What this is going to do is basically take
all of those individual navigation items and
| | 01:28 | put a wrapping div around them, and we
can also see this in the Elements panel.
| | 01:33 | If your Elements panel is not open, you can
open this up. And here we can see each one
| | 01:38 | of our individual navigation buttons, and the
indicator is now going to be grouped inside of this div.
| | 01:46 | I'll close this up.
Let's come over to the Properties panel.
| | 01:49 | With this div selected, let's come down to
Position and Size. Let's set a registration
| | 01:54 | point to the lower right-hand inside, and if you
are on Global, let's come over here and click Applied.
| | 01:58 | What this is going to do is give us the
properties in CSS for the right and bottom positioning
| | 02:04 | of this particular object.
| | 02:05 | Now the Bottom setting is set to 17 pixels,
and the Right setting is set to 36 pixels.
| | 02:10 | I'm going to come in and just
change this to 40 pixels on the right.
| | 02:15 | On the stage, you'll see this moves over a
little bit, and what this positioning does
| | 02:18 | is it make sure that the right-hand side is
always 40 pixels from the right-hand side of the stage.
| | 02:24 | Now, if I come up here and grab the
Responsive Ruler, and click and drag this, notice as
| | 02:28 | I drag the ruler, the navigation will always
be 40 pixels from the right side of the browser.
| | 02:36 | Now that this is working as I expect in the
Responsive Ruler, let's hit Command+S or Ctrl+S to save.
| | 02:42 | Let's preview this in a browser,
make sure it works in the browser as well.
| | 02:45 | So inside of the browser, let's
come over here and resize this.
| | 02:48 | As we close this down, the photograph in
the background will clip from the right.
| | 02:51 | I don't get any horizontal scrollbars
until we get under 500 pixels, and the navigation
| | 02:56 | will fall at the right-hand side
of the browser within 40 pixels.
| | 02:59 | So this gives me the ability to interact with my
composition at any size between 980 and 500 pixels.
| | 03:07 | So now that our composition is responsive,
next we'll get rid of that debugging code.
| | Collapse this transcript |
| Removing the debugging code| 00:00 | Now we are going to remove the debugging code.
| | 00:03 | If you're showing this to your client, one
thing you can do before the project is complete
| | 00:06 | is you can move this text off the stage.
| | 00:09 | Since we have the Overflow hidden,
your client won't be able to see this during review, but
| | 00:12 | you can still have it there in case
you need it to debug anything else.
| | 00:16 | But when you are done, you can come in here and
just simply hit Delete and remove that from the stage.
| | 00:21 | Next, let's come down to the Timeline panel.
| | 00:22 | Let's come over to the
action at the 0, 0 marker.
| | 00:26 | Let's double-click this.
| | 00:27 | Let's scroll up to the top of the script.
| | 00:30 | Inside of the mouseenter and mouseout for
the stage, we'll find the lines where we update
| | 00:34 | the instance name test.
| | 00:36 | I can do one of two things here. You can
simply put two // at the beginning of those lines,
| | 00:42 | inside of mouseenter and mouseleave. This will
comment these out and will not be paid attention
| | 00:46 | to by the browser. Or you can simply come in
here and just delete these line altogether.
| | 00:51 | So, I'll delete this two lines, hit
Command+S or Ctrl+S, Preview in Browser, and now you'll
| | 01:00 | get the user experience that we developed without
seeing the debugging code in the upper-left corner here.
| | 01:05 | And with that, that completes creating an
interactive responsive animated homepage marquee
| | 01:09 | for your website using Edge Animate. Next, we'll
talk about where you might want to go from here.
| | 01:13 |
| | Collapse this transcript |
|
|
ConclusionWhere to go from here| 00:00 | Now, if this is one of your first projects
with Adobe Edge Animate, I have another course
| | 00:04 | on lynda.com called Edge
Animate Essential Training.
| | 00:07 | This will walk you through, step by step, all
of the major features of Adobe Edge Animate.
| | 00:11 | There is even a section inside of this course
where if you have experience with other animation
| | 00:16 | tools, such as Flash, After Effects,
Photoshop, and even Sencha Animator or Tumult Hype,
| | 00:22 | I'll show you step by step how you can take
those skills and work them into Adobe Edge
| | 00:25 | Animate, showing you how to migrate your skills
and workflow from one application to the other.
| | 00:30 | I also have another course called Creating
an Animated Star Field where we'll create
| | 00:33 | randomized animations with Adobe Edge Animate.
| | 00:35 | What this will do is show you how to create
a responsive design that also will take an
| | 00:39 | animation and randomize it across the stage so
that the animation never gets old or repetitive
| | 00:44 | and users can watch the
animation for a longer period of time.
| | 00:51 | And in addition to Adobe Edge Animate, I also
have a whole series of courses that walk you
| | 00:54 | step by step through creating your own interactive
animated experiences using jQuery, HTML, and CSS.
| | 01:00 | We'll do things like create interactive photo
galleries, HTML5 video players, rotating carousels,
| | 01:06 | dropdown menus, and tooltips.
| | 01:08 | And again, each one of these
will walk you through step by step.
| | 01:10 | So, if you have very little experience with
JavaScript, you can apply JavaScript and jQuery
| | 01:15 | to your HTML and CSS work.
| | 01:17 | And with that, that concludes Creating an
Interactive Marquee for your Homepage with
| | 01:21 | Edge Animate, and I really
appreciate you watching my course.
| | 01:23 |
| | Collapse this transcript |
|
|
