Working with the Frame Picker within a Graphic Symbol
You will learn how to use the Frame Picker in order to influence the Graphic Symbol’s very own timeline from the main Scene. You will create keyframes in order to animate the character.
This is video two in a series of three where we are discussing graphic symbols on lip syncing.
In video one, you've been working on these eyes and already learned a lot about graphic symbols.
The characters' eyes should be blinking like this in the original scene one Timeline.
But there's a lot more that you can do with graphic symbols.
You will learn how to show frames from the other Timeline
Using graphic symbol timelines on the main timeline
onto the main Timeline in this tutorial.
Let's make him smile at frame number 10.
In the second layer, the Mouth layer, you'll see there's a collection of mouths
Preparing mouth symbols for lip syncing
on the right-hand side of the Stage.
These were already converted to one graphic symbol.
Open the symbol with a double click.
For lip syncing, we need to make use of a variety of mouth expressions, and I've added a little agenda to explain which mouth is which expression.
I want to create a little animation for it by placing all the mouths in one same location.
I will do that by selecting them all with the Selection Tool.
Use the Align panel, which you can open from Window, Align to center them horizontally and vertically.
Then drag the mouse to the left and place the selection where the mouth should be on the character.
Distributing mouth shapes across keyframes
Select Distribute to Keyframe to drop every mouth in a separate keyframe, you can do this with a right click.
Please note that it will drop every mouth in the new keyframe, which will end up with an empty first keyframe.
Select the empty keyframe with a right click to delete that particular empty keyframe.
If you play the animation, you will see that the character talks with quite some speed.
Double click outside the character to go to the main Scene 1 Timeline.
In here, the character will talk rapidly as well and it's looping the animation and that's rather cool, but this is not what I intend to achieve.
Controlling symbol playback and selecting frames
Select the mouth and take a look at Properties.
Turn off the Loop option by selecting Single Frame and select frame number 14 as first frame.
Now the character will stay silent for the length of the whole animation.
I want to make him smile at frame number 10, so go to frame number 10 and create a keyframe with the Insert Keyframe button.
Select the mouth on the Stage and open the use Frame picker option in the Properties on the right-hand side of the screen.
From this panel, I will choose frame number 13 to make him smile.
It's a good idea to turn on the Pin current symbol option.
This option will keep the symbol active in the Frame Picker panel.
When you're working with more graphic symbols in combination with the Frame Picker, then it's helpful to launch a new Frame Picker panel with this button on the right top corner of this panel.
This Frame Picker is a really great feature to use in your animations.
Now, I think we are ready for the lip-syncing feature.
Let's start working with audio and lip syncing in the next video tutorial.
What you learned: Working with Graphic Symbols in Animate
How to create keyframes for a Graphic Symbol
Setup the animation correctly within the Graphic Symbol
You can control how Adobe websites use cookies and similar technologies by making choices below. But note that if you disable cookies and similar technologies entirely, Adobe websites may not function properly.
Cookies are small text files stored by your web browser when you use websites. There are also other technologies that can be used for similar purposes like HTML5 Local Storage and local shared objects, web beacons, and embedded scripts. These technologies help us do things like remembering you and your preferences when you return to our sites, measure how you use the website, conduct market research, and gather information about the ads you see and interact with.
You can make choices in the menu below about what cookies and other technologies you want us to use on Adobe sites when you visit them from this browser. You can always change those choices later by clicking on the Cookie Preferences link at the bottom of the page.
If enabled:
We can improve your experience by tailoring the site and the content to things we think might be of interest
We can better keep track of your preferences — like what language you prefer to use
We will better understand your likely interests so we can provide you more relevant Adobe ads and content on non-Adobe websites and in non-Adobe apps
It will help us improve the performance of our website and those of our partners who use the Adobe Experience Cloud
If disabled:
We won’t be able to remember you from session to session so the experience may not be tailored to your interests
You’ll still have access to the content of the site but certain features that depend on cookies may not function
You’ll still see ads, they just may not be as relevant to you
General information
You can control how Adobe websites use cookies and similar technologies by making choices below. But note that if you disable cookies and similar technologies entirely, Adobe websites may not function properly.
Cookies are small text files stored by your web browser when you use websites. There are also other technologies that can be used for similar purposes like HTML5 Local Storage, web beacons, and embedded scripts. These technologies help us do things like remembering you and your preferences when you return to our sites, measure how you use the website, conduct market research, and gather information about the ads you see and interact with.
You can make choices in the menu below about what cookies and other technologies you want us to use on Adobe sites when you visit them from this browser. You can always change those choices later by clicking on the Cookie Preferences link at the bottom of the page.
If enabled:
We can improve your experience by tailoring the site and the content to things we think might be of interest
We can better keep track of your preferences — like what language you prefer to use
We will better understand your likely interests so we can provide you more relevant Adobe ads and content on non-Adobe websites and in non-Adobe apps
It will help us improve the performance of our website and those of our partners who use the Adobe Experience Cloud
If disabled:
We won’t be able to remember you from session to session so the experience may not be tailored to your interests
We’ll still count your use of our site and services
You’ll still have access to the content of the site but certain features that depend on cookies may not function
You’ll still see ads, they just may not be as relevant to you
Operate the site and core servicesOperate site and measure engagement
Always active
These cookies are required, and they are used to enable the site and related services core functionality. Without them the site could not operate, so they cannot be disabled.
These cookies enable the site and related services’ core functionality and collect statistics about user engagement, such as counting active use to help us understand trends. These cookies cannot be disabled.
Measure performance
These cookies are used to analyze site usage to measure and improve performance. Without them Adobe cannot know what content is most valued and how often unique visitors return to the site, making it hard to improve information we offer to you.
These cookies are used to analyze site usage to measure and improve performance. Without them Adobe cannot know what content is most valued, making it hard to improve information we offer to you.
Extend functionality
These cookies are used to enhance the functionality of Adobe sites such as remembering your settings and preferences to deliver a personalized experience; for example, your username, your repeated visits, preferred language, your country, or any other saved preference.
Personalize advertising
These cookies are used to enable Adobe and our partners to serve ads more relevant to your interests. Without them you will still see ads, but they might not be as relevant to you.
Personalize advertising
These cookies are used to enable Adobe and our partners to serve ads more relevant to your interests. Without them you will still see ads, but they might not be as relevant to you.
