Join Chris Converse for an in-depth discussion in this video Creating reusable symbols, part of Edge Animate Essential Training.
- One of the most powerful features of Edge Animate, and one of my favorites, is the ability to create reusable symbols. This gives us a way that we can create artwork, wrap it into a symbol, and then reuse it any number of times in our composition. We can also share symbols between compositions or with other designers, and symbols can even have their own animation timelines, and we'll talk more about sharing symbols and animating symbols later on in the course. For now what I wanna do is focus on creating a reusable symbol and using symbols to organize our composition. In the last lesson, we organized all of the fingers and the arm.svg shape of the hand in order to make it easier to work with all of those elements.
What we're gonna do now is wrap the hand into a symbol. So I'm gonna marquee select the hand and all of the individual finger segments. So I'm gonna come over here to the right side of the stage, click and drag, and marquee select until I have the hand and all of the fingers selected. Now with all of these selected, in the Timeline panel I can see all of the individual finger layers and the arm.svg graphic. We can come up to the stage and right-click, or we can go to the Modify menu. In either case, we're gonna choose Convert to Symbol. We're gonna give this symbol a name. For the symbol name, I'll type hand, and then come down and click OK.
Now that we've created a symbol, in the Library panel, in the Symbol section, we can now see we have this hand graphic. I can toggle this open to get a preview. Now from an organizational standpoint, what I really like about this feature is all of that artwork is now wrapped into that single symbol, and in the Timeline we have just one layer now, representing all of that artwork. We can toggle this open and closed. We can see a playback feature here. If this were an animated symbol, we can use this playback to control animation. We'll talk more about that in the chapter on animation. But if we toggle the visibility of the hand layer, we can see of the artwork shows and hides because it's all part of that same symbol.
Now the other thing we can use symbols for is to create reusable artwork. So what I wanna do next is add a whole series of sugarcubes in a sugar dish. Now we have one cube drawn already, that's sitting here inside of the coffee cup. If I scroll down in the Timeline panel, I can find that sugarcube. So I'll select this here. With this selected, I'm gonna come up here and right-click. We're gonna choose Convert to Symbol, and I'll name this sugarcube. Now this is the same name as the layer name in the Timeline panel. So I'll come over here and click OK. And then what we'll see in the Timeline panel is this instance has been renamed to sugarcube2.
Drag this on the stage. Let's move this to about right here. And what I wanna do now is add a bunch of sugarcubes into the dish. So with the dish positioned where I want it, let's come back to the Library panel. Let's grab the sugarcube symbol. Let's drag in another copy of this. I'll then position this over next to the dish. Next let's select the zoom tool and zoom up here a little bit so we can see what we're doing. So now we have sugarcube3 showing up in the timeline. I'm gonna hit command left bracket to arrange this to be behind the dish.
Now with the first sugarcube in the dish selected, I'll option drag another sugarcube. I'll reposition this. In the Properties panel, I'll rotate this a little bit. Position this where I want it. Option drag a second copy. And I'll continue to do this. I will rotate each one, position them a little bit in the dish. Then option drag another copy until I have five sugarcubes sitting in the dish. Then I'll come down here to the Timeline panel. I'm going to rename each of the sugarcubes to just simply sugarcube 1 all the way through sugarcube5. And I'll collapse these layers up since I don't need to see the playback option.
And now at this point, I have six pieces of artwork on the stage that are all being generated from one single piece of art in that symbol. Now to edit a symbol, we can come up to the stage, select any one of the individual symbols, double click, and that's gonna bring us into what's called isolation mode. In the upper left-hand corner here, we can see a link back to the main stage. And this path here indicates that we are inside of the sugarcube symbol. If I go back to the main stage and double click any other item, we'll still be inside of the same sugarcube. Now with this selected we can see the background is all grayed out because we can only work with the artwork inside of this symbol.
Now any changes that we make are going to affect all of the sugarcubes. So let's come in here and make a color change. So let's come in here and assign a gradient. So I'll select the first color stop. Let's change this from being a white sugarcube to a brown sugarcube. Start with the wood color. We'll just drag this out a little bit, make it lighter. We'll select the second color stop, grab the same brown. Then I'll just drag this down a little bit, just to make this a little bit darker. Come in here and change the degrees. Let's rotate this around so that the gradient starts darker just on one corner.
Now also move the color stop down so that the gradient is much stronger just on this one corner. Once I like the change, I'll hit Return. And we've made this change. In the background we can still see all of the symbols are still showing as white. When we come up the top left of the stage, click on the stage link and go back to the main stage, all of the sugar cubes now will be modified based on changing that one sugarcube symbol. Now symbols aren't limited to just simple rectangles, like we used here. You can put any type of web graphic in a symbol. You can put text, you can put interactive elements, animations, and even audio and video.
So when you're putting your compositions together in Edge Animate, keep in mind how efficient symbols can be when replicating your desired layout.
- Creating a new project
- Preparing content in Photoshop or Illustrator
- Adding text to a composition
- Working with web fonts
- Creating reusable symbols
- Adding HTML5 audio and video to compositions
- Making responsive layouts
- Animating elements
- Targeting elements with actions
- Controlling HTML5 video and audio playback with actions
- Working in the Code panel
- Publishing your project
- Adding Edge Animate compositions to existing webpages
- Using OAM files in other applications