In this video, learn about designing reusable graphic symbols and storing them in the document library.
- [Instructor] As it stands right now, our button design is composed of two distinct elements, the background shape and the text label. Animate allows the creation of symbols, which can then be reused as instances across your document. Let's convert these assets to a unified graphic symbol. Using the selection tool, we can draw a selection rectangle around both the text and the background shape. And we can see now that both are selected. From the object properties, there's a little icon here that allows us to convert to symbol. This can also be located in the modify menu, convert to symbol. Here we can give the symbol a name. I'm going to call this submit graphic 'cause it is a graphic symbol. And that's determined by the type dropdown here. You can have a movie clip symbol, a button symbol, or a graphic symbol. Now, each of these symbol types work a little bit differently, but one of the neat things about graphic symbols is we're actually able to define button states or symbol states for our graphic symbols. So choosing graphic symbol allows us to make different variants of our button types all in one package. Let's go ahead and hit okay, to create that symbol. So now in our object properties, we can see that we have a single item on the stage selected. It's an instance of submit graphic, type of graphic. We've got our position and size, and some additional items down here that's particular to graphic symbols, including looping options. If we look inside of our library, we can see that our document library now contains a symbol, submit graphic, and we'll get a little preview right here. Basic shapes and texts and things of that nature never show up inside of the library unless they're converted to symbols. Additional items that will show up in your document library include any imported bitmap images, audio files, and other external data like that. With this new symbol in our document library, we've just made this UI design a lot more powerful.
- Setting up a UX project in Animate
- Drawing simple shapes
- Adding text
- Creating symbols
- Building interactive states
- Defining screens in the timeline
- Linking between screens
- Animating interactions
- Publishing and exporting your project