{"id":2233,"date":"2023-01-17T21:15:32","date_gmt":"2023-01-18T04:15:32","guid":{"rendered":"http:\/\/demoblogs.ecuad.camrose\/?page_id=2233"},"modified":"2023-01-17T21:15:32","modified_gmt":"2023-01-18T04:15:32","slug":"adobe-animate-quick-basics","status":"publish","type":"page","link":"https:\/\/palette.ecuad.ca\/mrose\/resources\/digital-animation-methods-and-software\/paperless-2d-animation\/adobe-animate\/adobe-animate-quick-basics\/","title":{"rendered":"Adobe Animate: Quick Basics"},"content":{"rendered":"<h5><b>Keyboard Shortcuts<\/b><\/h5>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li>Add frame = F5<\/li>\n<li>Add keyframe = F6<\/li>\n<li>Add blank keyframe (like an empty sheet of paper or flimsy) = F7<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>To flip through positions, frame-by-frame, as though you flip and roll through animation drawings, use the:<\/p>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li>Period Key [.] to move ahead one<\/li>\n<li>Comma Key [,] to move back one<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>To preview your animation:<\/p>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li>First, for the initial, at-your-fingertips preview, press the Enter Key (Return Key on a Mac)<\/li>\n<li>For a more precise real-time preview:\n<ul>\n<li>Windows = Control + Enter<\/li>\n<li>Mac = Command + Return<\/li>\n<li>Or, go to the Main Menu &gt; Control &gt; Test Movie &gt; Test<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h5><b>Creating a New Project<\/b><\/h5>\n<p>When you launch Animate and create a new project, choose ActionScript 3.0 in the \u201cCreate New\u201d section. The program will open with a Timeline, Tools, and a Stage \/ Work Area. If not, you can open various palettes and windows by using the the workspace options. Click on the Workspace pulldown menu at the top of the window or go to the Main Menu &gt; Window &gt; Workspace.<\/p>\n<p>For digital drawn animation and cutouts, Essentials or Classic are useful. You would need the following palettes (which you can also locate by going to the Main Menu &gt; Windows).<\/p>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li>Colour Mixer: Stroke and Fill palettes, HSB (and Alpha) values, and colour mixer (to make non-web safe colours).<\/li>\n<li>Info: Width &amp; Height, X &amp; Y entry boxes, RGBA values and anchor point positions.<\/li>\n<li>Align: To align objects, together as groups and\/or individually to the stage.<\/li>\n<li>Transform: Entry boxes for Scale &amp; Proportions, Rotate &amp; Skew.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h5><b>Resolution<\/b><\/h5>\n<p>Flash is designed primarily for the Internet, and therefore for screen resolution at 72 dpi. For animation production, we can overlook \u201cdots per inch\u201d because we don\u2019t necessarily print the material. What is more important is that we can change the dimensions. Consequently, if we wanted to, we could create high-definition files with Animate.<\/p>\n<p>You should work with full-resolution images.When you create a project, you should make sure that the file dimensions are:<\/p>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li>1080p: 1920 (wide) x 1080 (high)<\/li>\n<li>720p: 1280 (wide) x 720 (high)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>To do this, refer either to the Document Properties, to the right of the Stage. Alternatively, you could to to the Main Menu &gt; Modify &gt; Document to set the resolution, or context-click on the Stage \/ Work Area and select &#8220;Document Properties.&#8221; From there, you can change the \u201cSize\u201d and \u201cBackground Colour.\u201d<\/p>\n<h5><b>Frame Rate<\/b><\/h5>\n<p>Use the Document Settings Window to change the frame rate: Main Menu &gt; Modify &gt; Document.<\/p>\n<p>Go to &#8220;Frame Rate&#8221; and choose\/enter:<\/p>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li>24 fps for single-frame animation<\/li>\n<li>12 fps for double-frame animation (which you would then import to Premiere or After Effects and interpret the footage as 12 fps for typical character animation)<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h5><b>Background Colour<\/b><\/h5>\n<p>By using the Properties Inspector, or by going to Modify &gt; Document, you can change the background colour and, as a result, change the colour of the Stage. The Work Area will not appear on movies that you export. The area is outside of the camera field.<\/p>\n<h5><b>Layers<\/b><\/h5>\n<p>Similar to Premiere and After Effects, Animate uses a Timeline, which includes a long series of potential frames. The Timeline also consists of layers. As a default, a new project will start with one layer and a blank key frame at Frame 0. However, you can add more layers, very simply. There is an \u201cAdd Layer\u201d button located on the left-hand side of the Status Bar at the lower edge of the Timeline. You can also make a new layer by referring to the Main Menu and going to Insert &gt; Timeline &gt; Layer.<\/p>\n<p>As is the case with programs like Photoshop and Premiere, you can rename, hide, and lock layers. You can also change the order of a layer by clicking on it and dragging it up or down a stack of layers.<\/p>\n<h5><b>Frames and Keyframes<\/b><\/h5>\n<p>Obviously, an important feature with Animate is that you can animate with the program. You can use it to do drawn animation, to create digital cutouts, or you can set the software to animate moves for you.<\/p>\n<p>As part of the process, you will apply keyframes when you design a movement phrase. For example, when you make drawn animation, with each frame that you mark, Animate will assign a keyframe. In another situation, when you set specific keyframes (for example, one at frame 24 and another at 36),<\/p>\n<p>Animate will interpolate the calibrations between the two points and calculate in-between positions, including slow-in and slow-out movement.<\/p>\n<p>Animate utilizes a variety of frames and key frames. Here is a brief overview:<\/p>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li><b>Blank keyframe,<\/b> indicated by a \u201chollow circle\u201d icon on a frame. When you create a new project, as a default, Animate starts with a blank key frame on Frame 0 in the Timeline. A blank key frame is a key frame that does not have content on the Stage. It is a key frame \u201cwithout content.\u201d In a sense, a blank key frame is, the digital equivalent of an empty animation sheet or cel, waiting to be used. Once you draw on it or place an object on one, it will become a key frame.<\/li>\n<li><b>Keyframe,<\/b> represented by a frame with a \u201csolid black circle\u201d icon on a frame. Quite simply, a key frame is different from a blank keyframe in that it has content (e.g., a line, shape, text, etc.).<\/li>\n<li><b>Frame.<\/b> You can add a frame to a keyframe or blank keyframe, to lengthen the duration of an image; for instance, from one frame to two frames. After you have added a frame, you can click and drag its right edge to make a hold of several frames. In addition, if you assign a \u201ctween\u201d option to a series of frames between keyframes, Animate will interpolate the positions.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h5><b>Keyframe Context Menu<\/b><\/h5>\n<p>Select a frame in the Timeline (blank keyframe, keyframe or frame) and context-click (Windows = right-click; Macintosh = control-click) to reveal the following menu:<\/p>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li>Create Motion Tween<\/li>\n<li>Insert Frame<\/li>\n<li>Remove Frames<\/li>\n<li>Insert Keyframe<\/li>\n<li>Insert Blank Keyframe<\/li>\n<li>Clear Keyframe<\/li>\n<li>Convert to Keyframes<\/li>\n<li>Convert to Blank Keyframes<\/li>\n<li>Cut Frames<\/li>\n<li>Copy Frames<\/li>\n<li>Paste Frames<\/li>\n<li>Clear Frames<\/li>\n<li>Select All Frames<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h5><b>Inserting and Modifying Keyframes and Blank Keyframes<\/b><\/h5>\n<h5><b>Onion Skin<\/b><\/h5>\n<p>For animation, you will probably find it useful to use the Onion Skin option, to make your previous drawings translucent, as though you are working on an animation light-table.<\/p>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li>To activate this function, click the Onion Skin button located along the bottom region of the Timeline.<\/li>\n<li>If you look at the lower edge of the Timeline, you will find a series of buttons: Centre Frame, Onion Skin, Onion Skin Outlines, Edit Multiple Frames, and Modify Onion Markers. Onion Skin is the button with a &#8220;white and blue square side-by-side.&#8221;<\/li>\n<li>When you select the Modify Onion Markers button, you can change the range that the Onion Skin function reveals. By setting &#8220;Anchor Onion,&#8221; the left-hand bracket will stay in one place while you move the right-hand bracket. &#8220;Onion 2&#8221; will highlight the two frames before the Playhead and the two frames after. Similarly, &#8220;Onion 5&#8221; will highlight 5 frames on either side. &#8220;Onion All&#8221; will select all of the frames in a sequence.<\/li>\n<li>On the Timeline, move the End Onion Skin bracket toward the last file in the sequence to select a series of frames.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<h5><b>To Change a Line to a Fill<\/b><\/h5>\n<p>Using the Selection Tool, pick the line. Then, go to the Main Menu, and choose Modify &gt; Shape &gt; Convert Lines to Fills.<\/p>\n<h5><b>To Import Sound Clips<\/b><\/h5>\n<p>In order to use a sound clip in your project, it must be an MP3 or Wave file. Furthermore, you must import the clips into the project Library (the Library is similar to the project window in Premiere or After Effects).<\/p>\n<p>Before you import a file (or files), you should create a folder for sounds in your overall project folder, and to place the MP3 files in the folder. As you already know, the project folder is the &#8220;briefcase&#8221; that you will move back and forth from your network space or portable hard drive to the local drive of the computer station you work from.<\/p>\n<p>To import a sound file (or files), refer to the main menu and select File &gt; Import &gt; Import to Library. Select the MP3 files (or to select more, hold down the Shift Key and choose more), and then press the &#8220;Import to Library&#8221; button.<\/p>\n<p>The items should subsequently appear in your Library. To better organize your project, you can make a sound folder in the Library to house the MP3 files.<\/p>\n<h5><b>To Add a Sound Layer<\/b><\/h5>\n<p>First, you should establish a new layer for sound in the Timeline (and label it &#8220;Sound&#8221;).<\/p>\n<p>At the point where you want the sound file to begin, insert a keyframe (context-click on the protoframe and choose Insert Keyframe). After doing so, refer to the Properties Inspector and use the Sound pull-down menu. From there, you can choose one of the sound files that you recently imported to the Library.<\/p>\n<p>Animate uses several ways of synchronizing a sound file with images, which you will find in the Properties Inspector &gt; Sync. You should choose Sync &gt; Stream for animation projects. This will allow you to scrub for lip sync purposes.<\/p>\n<p>In order for the sound to play properly, you must set a duration for the file. Therefore, at an appropriate point on the timeline (e.g., 30 frames hence), insert a frame (context-click on the protoframe and choose Insert Frame).<\/p>\n<p>You will probably notice that, on the Timeline, Animate has not only inserted the MP3 file, it&#8217;s represented on the Layer with a waveform image.<\/p>\n<p>Note, with the sound synchronization set at Stream, you can scrub the sound by dragging the playhead over the wave file.<\/p>\n<h5><b>To Change the Height of a Sound Layer<\/b><\/h5>\n<p>Sometimes you might need to clearly review a sound waveform (for example, if you want to animate to a soundtrack and therefore to specific points on the Timeline). To increase the height of a layer, context-click on the layer and choose Properties. In the Layer Properties, you can set the Layer Height to 100%, 200% or 300%. Press OK after you have done this.<\/p>\n<hr \/>\n<h6>Back to<\/h6>\n<ul>\n<li style=\"list-style-type: none\">\n<ul>\n<li><a href=\"demoblogs.ecuad.camrose\/resources\/digital-animation-methods-and-software\/paperless-2d-animation\/adobe-animate\/adobe-animate-quick-basics\/\">Top of the Page<\/a><\/li>\n<li><a href=\"demoblogs.ecuad.camrose\/resources\/digital-animation-methods-and-software\/\">Animation Methods &amp; Software<\/a><\/li>\n<li><a href=\"demoblogs.ecuad.camrose\/resources\/\">Resources Page<\/a><\/li>\n<li><a href=\"demoblogs.ecuad.camrose\/\">Main Page<\/a><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Keyboard Shortcuts Add frame = F5 Add keyframe = F6 Add blank keyframe (like an empty sheet of paper or flimsy) = F7 To flip through positions, frame-by-frame, as though you flip and roll through animation drawings, use the: Period Key [.] to move ahead one Comma Key [,] to move back one To preview [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":943,"menu_order":1,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-2233","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/palette.ecuad.ca\/mrose\/wp-json\/wp\/v2\/pages\/2233","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/palette.ecuad.ca\/mrose\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/palette.ecuad.ca\/mrose\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/palette.ecuad.ca\/mrose\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/palette.ecuad.ca\/mrose\/wp-json\/wp\/v2\/comments?post=2233"}],"version-history":[{"count":0,"href":"https:\/\/palette.ecuad.ca\/mrose\/wp-json\/wp\/v2\/pages\/2233\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/palette.ecuad.ca\/mrose\/wp-json\/wp\/v2\/pages\/943"}],"wp:attachment":[{"href":"https:\/\/palette.ecuad.ca\/mrose\/wp-json\/wp\/v2\/media?parent=2233"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}