top of page
Symbols:
MovieClips, Graphics and Buttons
One of the very first things you'll be asked to do once you open Adobe Animate is choose which 'platforms' you want to use: ActionScript (AS3) or HTML5. In short, AS3 is closely associated with Adobe Flash and has more limited compatibility, whereas HTML5 boasts wide support, mobile-friendly features, and adaptability to contemporary web and mobile applications.
Within your workspace, you'll notice two primary components as you begin working on your project:the stage, where you create your drawings, and the timeline, where you control the timing of your animations.
Once you've drawn something on the stage, with it selected in its entirety, you can press (fn+) f8, to convert it into a symbol. This symbol becomes a distinct component of your webpage and can be made interactive, meaning it can respond to a user's input. There are 3 types of symbols:
What’s the difference?
Just like your friend will turn their heads when you call their names, the biggest difference between a MovieClip and a graphic is that MovieClips can be named and can be referred to by its given name in code to induce interactivity within your project.
Now, when you create a MovieClip on your main timeline, it brings along its own timeline. This is where the second crucial difference comes into play – a MovieClip has the capacity to operate independently of what's happening on the main timeline.
1. MovieClips
Just because graphics are non-interactive, it doesn't necessarily mean that they're boring or make them less useful. On the contrary, their static nature offers certain advantages. Graphics can be particularly valuable for tasks like lip syncing. The beauty of using graphics here is the 'frame picker' feature. After creating a set of, say, 10 distinct mouth shapes, for example, this tool enables users to conveniently select and reuse specific frames as needed throughout the animation.
Note: As of right now, there is a naming feature that is available also for graphics. Don't let this fool you! You will not be able to reference them from JavaScript.
2. Graphics
Buttons are pretty self-explanatory. They are interactive elements that allow users to start or trigger actions or animations. If you want a character to jump when you click it or take the user to a different part of your animation, buttons are your tools for interaction.
Unlike Graphics or MovieClips, whose timelines mimic that of the stage, the timeline of a Button is quite unique. Here, four options are available: Up, Over, Down, and Hit, all of which require the project's creator to provide visual references for the button's various states. 'Up' refers to the Button's 'Up' (unclicked) state. 'Down' refers to the Button's 'Down' (clicked) state. 'Over' represents how the Button appears when a mouse hovers over it. 'Hit' is a special frame that is not visible to the website's user; it defines the button's clickable area.
3. Buttons
bottom of page