Руководство пользователя adobe animate


2023-02-04 00:39

Креатив
Развитие

Adobe Animate — это профессиональный инструмент для создания анимации и интерактивных приложений. С помощью Animate вы можете создавать анимационные персонажи, рекламные баннеры, интерактивные веб-сайты и многое другое. В этой статье мы расскажем о базовых принципах создания анимации в Adobe Animate.

Шаг 1: Создание нового проекта

Откройте Adobe Animate и создайте новый проект. Выберите тип проекта, который вам нужен: анимация, интерактивный проект или игра. Выберите размер холста, фреймрейт и другие параметры, затем создайте новый проект.

Шаг 2: Создание персонажа

Создайте персонажа, который будет анимироваться. Вы можете нарисовать персонажа в Adobe Animate, импортировать изображение или использовать готовый шаблон персонажа. Добавьте элементы анимации, такие как руки, ноги, глаза и рот, чтобы персонаж мог двигаться и говорить.

Шаг 3: Создание ключевых кадров

Создайте ключевые кадры для каждой анимации. Ключевые кадры — это кадры, в которых происходят изменения в анимации. Создайте первый ключевой кадр и установите позицию персонажа и другие параметры. Затем создайте следующий ключевой кадр и измените позицию персонажа. Продолжайте создавать ключевые кадры для каждого изменения в анимации.

Шаг 4: Создание анимации

Создайте анимацию, используя ключевые кадры. Вы можете использовать готовые эффекты анимации или создать свои. Используйте функцию таймлайна, чтобы изменять позицию персонажа, его размер, цвет и другие параметры в каждом ключевом кадре.

Шаг 5: Экспорт анимации

Экспортируйте анимацию в нужный формат, чтобы использовать ее в своих проектах. Adobe Animate поддерживает экспорт в различные форматы, такие как GIF, MP4, AVI и другие.

Вот и все! Теперь вы знаете, как создать анимацию в Adobe Animate. С помощью этой программы вы можете создавать высококачественные анимации для различных целей, будь то реклама, обучение или развлечение.


Download Article


Download Article

Adobe Animate (formerly Adobe Flash Professional) has long been the standard for creating animations for the web, television, video games, and other interactive applications. Many famous cartoons; including Blue’s Clues, My Little Pony, and Metalocalypse, have used Flash/Animate in their animation process. During the 2010’s, Adobe Flash Player fell out of favor on the internet due to security reasons and was gradually replaced with other formats, such as HTML5 and WebGL. As of December 2020, Adobe and all major web browsers have officially ended support for Flash Player and it is no longer available for download. However, Adobe Animate is still part of Adobe’s Creative Cloud suite. You can still use Adobe Animate to create animations for Flash and various other formats. This wikiHow article teaches you the basics of how to create an animation in Adobe Flash or Animate.

  1. Image titled Create a Flash Animation Step 1

    1

    Download and Install Adobe Animate or Flash. Adobe Animate is part of Adobe’s Creative Cloud suite. It requires a subscription to the Adobe Animate software or Creative Cloud. If you have an older version of Adobe Flash Professional, you can use that as well. You can download Adobe Animate from https://www.adobe.com/products/animate.html.

  2. Image titled Create a Flash Animation Step 2

    2

    Create a new project in Flash or Animate. Flash has an icon that resembles a red square that says «Fl» in the middle. Adobe Animate has a purple icon that says «An» in the middle. Click the icon to open Adobe Flash or Animate. Then click Create New in the menu to the left. Enter the height and width of the video animation you want to produce, or select one of the standard resolution options. Then click Ok or Create.

    • You can create a new project at any time in Adobe Animate or Flash by clicking File in the menu bar at the top, followed by New.
    • If you want your animation to have any interactive elements, such as menus, or buttons, you’ll also need to select a scripting language. Use the drop-down menu below «Platform Type.» You can choose ActionScript 3.0, which is the old scripting language that Flash used, or you can choose «HTML Canvas» to create an HTML5 document.

    Advertisement

  3. Image titled Create a Flash Animation Step 3

    3

    Understand the layout. When you create a new project in Adobe Animate or Flash, you will see the following items on your screen:

    • Toolbar: The toolbar contains all the drawing tools you can use to create and manipulate objects.

      • The selection tool is used to select and move objects.
      • The shape tool is used to create basic shapes.
      • The brush and pencil tools are used to draw shapes free-hand.
      • The pen tool can be used to create precision vector objects.
      • The eraser tool is used to erase drawings you have made, and the text tool is used to add text to your animation.
      • The toolbar also contains the Stroke and Fill color boxes, which are used to select the color of your objects.
      • The Stroke color is the color of the outline around your shapes, and the Fill color is the color inside your shapes.
      • The Toolbar is to the left by default. If you do not see the toolbar, click Windows in the menu bar at the top and then click Tools.
    • Stage: The stage is the white area in the center of the screen. This is the area that will be viewable when you publish your animation. You can have objects on the stage or to the side of the stage. Objects to the side of the stage will not be viewable when you publish your animation.
    • Timeline: The timeline is the horizontal bars at the bottom of the screen. This is where you create changes in your animation. This contains a series of rectangles that represent each frame. Every fifth frame is numbered at the top of the timeline. The timeline can have multiple layers, each containing different objects that can move independently. You will also see a red or blue vertical line. This is the playhead. You can click and drag the playhead to move forward and backward through the timeline. You can click the Play triangle at the bottom of the Timeline to preview your animation.
    • Panels: You will see a variety of tabs and panels on the left side of Adobe Animate or Flash. This contains panels, such as the Library or the Properties panel. There are also panels for color swatches, motion presets, components and more.
  4. Advertisement

  1. Image titled Create a Flash Animation Step 4

    1

    Understand the basics of tweening. Flash/Animate uses a function called tweening, which allows you to set start and end points for an object. Each starting and endpoint is called a keyframe. Flash/Animate will move and transform the object automatically from one keyframe to another. This is much simpler than the traditional method of animating objects, which requires you to move an object by hand in each frame.

    • Tweening can be used to move an object from one position to another in a straight line, rotate an object, grow or shrink an object, or a combination of these types of movements.
    • You can use tweening and traditional frame-by-frame animation in conjunction with each other.
  2. Image titled Create a Flash Animation Step 5

    2

    Create your first object. You can use the tools in the toolbar to draw objects in Flash or Animate. Start by creating a simple object, such as a bouncing ball.

    • If you want, you can draw a background image on a separate layer in the timeline. You can also import an image into Animate or Flash to use as a background.
    • Animate and Flash are vector-based graphics programs. It is highly recommended that you use Flash/Animates’s built-in drawing tools in the toolbar or import an image from a vector-drawing program, like Adobe Illustrator or Inkscape. Vectors can scale easily without distortion, while traditional raster images will get fuzzy and pixilated if you try to enlarge them.
    • You can only tween one object per timeline layer at a time. So if you want to create an object with multiple moving parts, you will need to draw each moving part separately and put them on their own layer.
  3. Image titled Create a Flash Animation Step 6

    3

    Convert your object to a symbol. In order to tween your object, you will need to convert it into a symbol. This is the format that Flash and Animate use in order to manipulate them. If you try to tween an object that has not been made into a symbol, you will be prompted to do so first.

    • To convert an image to a symbol, right-click the object and click Convert to Symbol. Use the drop-down menu next to «Type» to select Movie Clip. Then click Ok.[1]
    • To edit an object after it’s been converted to a symbol, simply double-click on it. You will see a blank timeline at the bottom of the screen that is specific to the symbol you have selected. You can use this to create symbols within symbols, each with its own independent animation.
  4. Image titled Create a Flash Animation Step 7

    4

    Insert frames needed to create a motion tween. Right-click the frame where you want the motion tween to end and click Insert Frame. This will insert a series of blank frames starting from the first frame and ending at the frame you inserted a frame at.

  5. Image titled Create a Flash Animation Step 8

    5

    Move the object to where you want it to be at the start of the animation. Click the frame you want your animation to start on. Then click the selection tool (it’s the icon that resembles a black mouse cursor) and click and drag your object to where you want it to be at the start of your animation.

    • Objects do not have to start or stop on the stage. For example, if you want an object to fly in from off camera, you would drag it outside of the stage on the side you want it to fly in from. That would be the starting point of your motion tween.
  6. Image titled Create a Flash Animation Step 9

    6

    Insert a keyframe where you want the motion to stop or change. Keyframes are used to indicate when an animation starts, stops, or changes. This includes a change in the direction it is moving. To insert a keyframe, right-click the frame you want to insert a keyframe and click Insert keyframe. This places a dot in the frame, indicating that the frame is a keyframe.

  7. Image titled Create a Flash Animation Step 10

    7

    Create a motion tween. To create a motion tween, right-click the keyframe you want the motion tween to start on. Then click Create Motion Tween. All the frames will turn blue or purple, depending on if you are using Flash or Animate.

  8. Image titled Create a Flash Animation Step 11

    8

    Move the playhead to the end of the motion tween. To do so, simply click the last frame of the tween in the timeline.

  9. Image titled Create a Flash Animation Step 12

    9

    Move the object to where you want it to be at the end of the tween. Use the selection tool to click and drag the object to where you want it to be at the end of your motion tween. This will automatically create a new keyframe on the frame you moved the object. Flash or Animate will automatically calculate the movement between the first and second keyframes. This is the basics of motion tweening in Flash and Animate.

    • You will need to create a separate motion tween for each object that moves and for any change in the animation.
    • Alternatively, in addition to using motion tweens to move an object, you can use the Free Transform tool to rotate an object or change its size. The Free Transform tool resembles a mouse cursor over a box. Click this option in the toolbar or press «Q» to select the free transform tool. You will see a bounding box around your object with a white dot in the middle. The white dot is the pivot point that your object will rotate around. You can click and drag the white dot to move the pivot point. Click and drag the small dots in the corner or side of the bounding box to adjust the size of your object. Hold Shift while dragging to keep the object shape proportional. Click and drag outside of one of the dots in the corner of the bounding box to rotate an object.
    • Use the Properties menu to the right to adjust the ease of a motion tween. Easing in will make the motion start slow and gradually speed up. Easing out will start fast and gradually slow down. On Animate, select «Ease In» or «Ease Out» from the drop-down menu and then use the graph to adjust the ease. On Flash locate «Ease» in the Properties panel and enter a number between -100 and -1 to ease in and 1 to 100 to ease out.
    • You can also use a shape tween to make an object change shape in Flash and Animate.
  10. Advertisement

  1. Image titled Create a Flash Animation Step 13

    1

    Understand the basics of frame-by-frame animation. This is considered the «traditional» method of animation, in that each frame has the same picture but is slightly altered. When the frames are played in quick secession, the images appear to move. This is the same basic technique used in traditional hand-drawn animations and is more time-consuming than tweening.

    • By default, Flash and Animate will produce animations at 24 frames per second (FPS). That means one second of animation will have 24 frames, but not every frame has to be different. You can adjust this if you’d like, and many Flash animations use 12 FPS, but 24 will produce a much «smoother»-looking animation.
    • You can use frame-by-frame animation in conjunction with motion tweening. For example, you may want to use frame-by-frame animation to animate the movement of a character’s legs. But you may want to use motion tweening to make them move from one side of the stage to the other.
  2. Image titled Create a Flash Animation Step 14

    2

    Create your assets. Because frame-by-frame animation requires multiple images with slight differences, you will need to create all of these assets by hand. You can create them all before you begin, or make them as you go using the tools in the toolbar.

    • While creating your assets, consider all the parts that will be moving in your animation. Create a separate image for all the moving parts so that they can be placed on a separate layer in the timeline. For example, if you want to animate a character talking, it’s much easier to create the character’s blank face, and then create the eyes and mouth as separate assets. That way, you only have to redraw a new mouth and eyes for each frame, instead of having to draw an entirely new character for each frame.
  3. Image titled Create a Flash Animation Step 15

    3

    Create your first frame. When you first start Flash or Animate, you will have a blank layer and an empty Timeline. Use the drawing tools in the toolbar to draw assets, or import a pre-drawn image to the first frame.

    • To import an image into Flash or Animate, click File in the menu bar at the top. Then click Import followed by Import to Stage. Select your image asset(s), and click Open. Alternatively, you can import all your assets into your library. To do so, click File followed by Import. Then click Import to Library and select all of your assets. Then click Open. Click the Library tab to the right to view all the assets in your Library. You can drag and drop them into the stage when you are ready to use them.
  4. Image titled Create a Flash Animation Step 16

    4

    Convert your image into a symbol. By turning an object or drawing into a symbol, you can use it again in multiple frames. To turn an object into a symbol, select it. Then right-click it and click Convert to Symbol. Give the symbol and name and select «Move Clip» as the symbol type and click Ok

  5. Image titled Create a Flash Animation Step 17

    5

    Insert a keyframe at the next frame where you want the animation to change. Keyframes are used to denote any change in the animation. This includes when a new asset or instance is used. To create a new keyframe, right-click the frame you want to add a new keyframe to and click Add Keyframe. Keyframes that contain an image will have a black dot in the timeline frame. Blank keyframes are denoted by a hollow circle over the frame.

    • You don’t need a new image in each frame. In general, having a keyframe every two to four frames will produce a good animation.
  6. Image titled Create a Flash Animation Step 18

    6

    Import or create a new drawing at the new keyframe. Click the keyframe you just created. Then use the drawing tools in the toolbar, or import a new image to the stage at that keyframe. The new image should only be slightly different from the previous drawing.

  7. Image titled Create a Flash Animation Step 19

    7

    Convert the new drawing to a symbol. Convert each asset or instance into a symbol so that it can be used later on. Right-click the new drawing and click Convert to Symbol. Then give the new symbol a name and select «Movie Clip» as the symbol type.

  8. Image titled Create a Flash Animation Step 20

    8

    Repeat the process. Continue adding a keyframe at each frame that changes. Then add a new drawing at each new keyframe. Continue until your animation is finished. [2]

    • Make small, incremental changes. Your animation will look much smoother if you make very small changes to the keyframe. For example, if you want a stick person waving an arm, your second keyframe should not be the other end of the wave. Instead, use a few keyframes to transition from the beginning of the wave to the end. This will produce a much smoother animation.
  9. Advertisement

  1. Image titled Create a Flash Animation Step 21

    1

    Record or find your sound effects and music. Sound gives your animation more engaging. You want to add different sound files for music, sound effects, and dialogue. Flash/Animate supports a variety of file formats, including Adobe Sound, MP3, WAV, AIFF, and OGG.[3]

    • You can record your sounds in Adobe Audition, or another digital audio workspace, such as Pro Tools, or even Audacity.
    • MP3 will typically give you perfectly acceptable sound quality while keeping the file size to a minimum. Avoid WAV files if possible, as these are often quite large.
  2. Image titled Create a Flash Animation Step 22

    2

    Import the sound files to your Library. Use the following steps to import your sound files to your Library:

    • Click File in the menu bar at the top.
    • Click Import.
    • Click Import to Library.
    • Select your audio files.
    • Click Open.
  3. Image titled Create a Flash Animation Step 23

    3

    Create a new layer for each sound type. You may want to have a separate layer for music, sound effects, and dialogue. To create a new layer, either click the icon that resembles a turning page at the bottom of the timeline or use the following steps to insert a new layer:

    • Click Insert in the menu bar at the top.
    • Click Timeline.
    • Click Layer.
  4. Image titled Create a Flash Animation Step 24

    4

    Create a keyframe where the sound will start. To do so, right-click the frame you want the sound to start playing in the sound layer in the timeline. Then click Insert keyframe.

  5. Image titled Create a Flash Animation Step 25

    5

    Add the sound or music file. To do so, make sure you have the keyframe that you want the sound to start selected. Then click the Properties tab in the menu to the right to display the Properties panel. Then use the drop-down menu next to «Sound» to select the sound file you want to start playing.

    • If you do not see the Properties panel tab or panel, click Window in the menu bar at the top. Then click Properties.
  6. Image titled Create a Flash Animation Step 26

    6

    Add an effect to the sound (optional). If you want to add an effect to the sound, use the drop-down menu next to «Effect» to select an effect. The effects you can choose from are as follows:[4]

    • Left channel: This plays the sound in the left speaker only.
    • Right channel: This plays the sound in the right speaker only.
    • Fade to right: The starts the sound on the left speaker and gradually shifts it over to the right speaker.
    • Fade to left: The starts the sound on the right speaker and gradually shifts it over to the left speaker.
    • Fade in: This starts the volume at 0 and gradually increases the volume to full.
    • Fade out: This starts the sound at full volume and gradually quiets the volume to silence.
    • Custom: This option allows you to customize the fade and channels using an envelope. This option is not supported in HTML5 or WebGL projects.
  7. Image titled Create a Flash Animation Step 27

    7

    Select how the sound will sync with the animation. Use the drop-down menu next to «Sync» to select how the audio will sync with the animation. Your options are as follows:

    • Event: This will start playing the audio in it’s entirety when the keyframe is hit in the timeline. The audio will keep playing, even if the timeline or final SWF file reaches the end. It will play again, even if an instance of the sound is already playing.
    • Start: This works the same as «Event», except that it will not play the sound if an instance of the sound is already playing.
    • «Stop:’ This silences the sound if it is already playing. You can use a separate keyframe to stop a sound that is already playing.
    • Stream: This forces your animation to keep pace with your sound. If the frames can’t be rendered fast enough, they will be skipped. Unlike «Event» sounds, «Stream» sounds will not keep playing after the animation is done playing.
  8. Advertisement

  1. Image titled Create a Flash Animation Step 28

    1

    Save your work. You should save often when working in Adobe Flash or Animate. To save your work, simply click File, followed by Save. To rename your saved file, click Save as instead. Enter a name for your project and click Save.

  2. Image titled Create a Flash Animation Step 29

    2

    Click File. It’s in the menu bar at the top.

  3. Image titled Create a Flash Animation Step 30

    3

    Click Publish Settings. It’s in the file menu. This opens the Publish Settings menu, which allows you to select the format(s) you want to publish in.

  4. Image titled Create a Flash Animation Step 31

    4

    Select the formats you want to publish your animation in. Use the checkboxes along the left side to select which formats you want to publish your animation in. In addition to the standard SWF format that Flash/Animate normally publishes in, you can also select HTML Wrappers to publish an HTML document with your animation embedded in it, as well as GIF, JPEG, or PNG. You can also select Windows Projector, or Mac Projector to create a Windows or Mac application.

    • You will need Flash Player to view a published SWF file. Since Adobe no longer supports Flash, you can download Flash Player Projector Content Debugger from a third-party website like Archive.org, or Techspot.com.
    • If you plan on doing further editing in Adobe After Effects, make sure you click the checkbox next to «Optimize for Adobe After Effects.»
  5. Image titled Create a Flash Animation Step 32

    5

    Enter a file name for your final file. Enter the name that Flash/Animate will create when you publish your work in the box next to «Output File» near the top of the menu. Additionally, you can click the folder icon and select a location to publish your animation.

    • If you have multiple file formats selected, click the format type in the menu to the left and check the Output File name for each format.
  6. Image titled Create a Flash Animation Step 33

    6

    Click Ok. It’s at the bottom of the menu. This saves your publish settings.

  7. Image titled Create a Flash Animation Step 34

    7

    Publish your animation. Use the following steps to publish your animation using the Publish settings you have selected:

    • Click File in the menu bar at the top.
    • Click Publish.
  8. Advertisement

  1. Image titled Create a Flash Animation Step 35

    1

    Click File in the menu bar at the top. Since Adobe no longer supports Flash Player, if you want to share your movie with other people, you’ll need to export it in a format that other people can view. Click File to access the Export menu.

  2. Image titled Create a Flash Animation Step 36

    2

    Click Export. It’s near the bottom of the File menu. This displays a fly-out menu.

    • Alternatively, if you are using newer versions of Adobe Animate, you can click the icon that resembles a square with an arrow pointing up in the upper-right corner. Click Publish and then click the radio option next to «Video.» Then click Publish to publish the animation as an MP4 video file.
  3. Image titled Create a Flash Animation Step 37

    3

    Click Export Movie. It’s in the fly-out menu that appears when you hover over «Export.»

  4. Image titled Create a Flash Animation Step 38

    4

    Select the file format you want to export your animation as. Use the drop-down menu next to «Save as type» to select the file type you want to save your animation as. You can save it as a GIF, Quicktime (.mov), Windows Media (.avi), or a PNG, JPEG, PICT, or Bitmap sequence.[5]

    • Saving your animation as a PNG, JPEG, Bitmap, or PICT sequence will render each frame of your animation as an individual image. You can load these images into a video editor, like Premiere Pro, or After Effects as an image sequence and render your animation as a video file. What’s useful about this method is that if Flash or Animate crashes while publishing your animation, you can start up again right where you left off.
  5. Image titled Create a Flash Animation Step 39

    5

    Enter a filename for your animation.

    • If you are exporting your animation as an image sequence, each image filename will be numbered sequentially. It’s recommended you save your image sequence images to a separate folder.
  6. Image titled Create a Flash Animation Step 40

    6

    Click Save. This saves your animation in the file you selected.[6]

  7. Advertisement

Add New Question

  • Question

    Where can I download Flash?

    Community Answer

    You can subscribe to the Adobe Creative Cloud package in your Creative Cloud account and download it from the Adobe site Or you can start a free trial for seven days by registering a Creative Cloud account. Download Flash Pro CC (now Animate CC) from the Adobe site.

  • Question

    How can I send an animation through Gmail, if possible?

    Community Answer

    You have to zip up the files first. There are multiple tools for zipping up files, and Windows comes with one. However, if there is not a pre-installed zipping tool, you can download 7-ZIP which is very easy to use. Once you have it installed, simply right click on your folder and click zip. You can then drag it into your email and send it.

  • Question

    Do I have to pay for the program?

    Bijan Ghaffari

    Bijan Ghaffari

    Community Answer

    Flash comes with Creative Cloud, along with Photoshop and Stock, as well as other various Adobe services. Creative Cloud has a free trial. Afterwards, you will have to pay a certain fee per month.

See more answers

Ask a Question

200 characters left

Include your email address to get a message when this question is answered.

Submit

Advertisement

Video

Thanks for submitting a tip for review!

About This Article

Thanks to all authors for creating a page that has been read 606,633 times.

Is this article up to date?

Содержание

  1. Основы анимации в Animate
  2. О частоте кадров
  3. Идентификация анимаций на временной шкале
  4. О слоях в анимации движения
  5. Распределение объектов по слоям для анимации движения
  6. О новых слоях создано с помощью команды «Распределить по слоям»
  7. Как создать мультик на компьютере: уроки для начинающих
  8. Как снять мультик из пластилина
  9. Создание мультфильма из бумаги
  10. Основы Lego анимации
  11. Анимация для профи
  12. Как сделать мультик на компьютере в домашних условиях: пошаговая инструкция
  13. Шаг 1. Создайте проект
  14. Шаг 2. Добавьте фотографии
  15. Шаг 3. Установите параметры
  16. Шаг 4. Добавьте диалоги
  17. Шаг 5. Наложите музыку или озвучку
  18. Шаг 6. Сохраните мультик
  19. Посмотрите видеоурок по созданию мультфильма:
  20. Заключение

Основы анимации в Animate

Как и для большинства операций в Animate (раньше этот продукт назывался Flash Professional CC), для анимации не требуется ActionScript. Однако если необходимо, можно создать анимации с помощью ActionScript.

Animate предоставляет несколько способов для создания анимации и специальных эффектов. Каждый метод предоставляет разные возможности по созданию привлекательного анимированного содержимого.

Animate поддерживает следующие типы анимации:

Воспользуйтесь элементами анимации движения, чтобы задать свойства объекта, такие как положение и альфа-прозрачность в одном кадре, а затем снова в другом кадре. Animate затем интерполирует значения свойств для кадров, находящихся в промежутке между указанными кадрами. Анимация движения полезна в тех случаях, когда анимация состоит из непрерывного движения или преобразования объекта. Анимация движения отображается на временной шкале как непрерывный диапазон кадров, который по умолчанию может быть выбран как один объект. Анимация движения — это мощное средство, которое несложно создать.

Классическая анимация похожа на анимацию движения, но более сложна в создании. Классическая анимация позволяет создавать некоторые анимированные эффекты, которых невозможно добиться с использованием диапазонов анимированных кадров.

Позы обратной кинематики (не используются в Animate)

Позы обратной кинематики позволяют растягивать и поворачивать объекты фигур, а также соединять группы экземпляров символов, чтобы перемещать их одновременно, обеспечивая тем самым естественность движения. После добавления костей к фигуре или группе символов можно изменить положение костей или символы в разных ключевых кадрах. Animate интерполирует положения в переходных рамок.

При анимации формы в отдельном кадре на временной шкале рисуется форма, а в другом кадре эта форма изменяется, либо рисуется новая форма. Animate затем интерполирует фигуры для промежуточных кадров, создавая анимацию одной фигуры, перетекающей в другую.

Такая техника анимации позволяет указывать различные объекты для каждого кадра временной шкалы. Эта техника используется для создания эффекта, при котором создается впечатление быстрого воспроизведения кадров фильма. Эта техника полезна при создании комплексной анимации, где графические элементы каждого кадра должны быть различны.

О частоте кадров

Частота кадров, скорость воспроизведения анимации, измеряется числом кадров в секунду (fps). При слишком низкой частоте кадров анимация выглядит так, как будто она останавливается и начинается, при слишком высокой частоте кадров происходит размытие деталей анимации. Частота кадров 24 кадра/сек является принятой по умолчанию для новых документов Animate, и обычно именно с такой настройкой достигаются лучшие результаты при отображении веб-страниц. Частота кадров стандартного видео также составляет 24 кадра/сек.

Сложность анимации и производительность компьютера влияют на плавность воспроизведения. Чтобы определить оптимальную частоту кадров, проверьте свои анимации на разных компьютерах.

Поскольку для всего документа Animate указывается одна частота кадров, задайте скорость до начала создания анимации.

Идентификация анимаций на временной шкале

Animate отличает анимацию движения от покадровой анимации на временной шкале путем показа различных индикаторов в каждом кадре с содержимым.

На временной шкале появляются следующие индикаторы содержимого кадра:

Диапазон кадров с синим фоном указывает на анимацию движения. Черная точка в первом кадре означает, что диапазону анимации присвоен целевой объект. Черные ромбы указывают последний кадр и другие ключевые кадры свойств. Ключевые кадры свойств — это кадры, содержащие изменения, явно определенные пользователем. Можно выбрать тип отображаемых ключевых кадров свойств, щелкнув диапазон анимации правой кнопкой мыши (Windows) или удерживая клавишу Command (Macintosh) и выбрав из контекстного меню пункт «Показывать ключевые кадры» > тип. По умолчанию Animate отображает все типы ключевых кадров свойств. Все остальные кадры диапазона содержат интерполированные значения, относящиеся к свойствам анимации целевого объекта.

an motion tween span

Полая точка в первом кадре указывает на то, что целевой объект анимации движения удален. Диапазон анимации все еще содержит ключевые кадры свойств; ей можно присвоить новый целевой объект.

an motion tween span no target

Диапазон кадров с зеленым фоном указывает на использование слоя позы обратной кинематики (IK). Слои позы содержат каркасы IK и позы. Все позы отмечены на временной шкале черными ромбами. Animate интерполирует положения каркаса в кадрах между позами.

an pose layer span

Черная точка с черной стрелкой на голубом фоне на начальном кадре означает классическую анимацию движения.

an motion tween2

Пунктирная линия означает, что классическая анимация движения прервана или неполна, например пропущен последний ключевой кадр.

an 11motion timeline broken

Черная точка с черной стрелкой на светло-зеленом фоне на начальном кадре означает анимацию формы.

an 11shape timeline

Черная точка означает отдельный ключевой кадр. Содержимое кадров светло-серого цвета после отдельного ключевого кадра остается точно таким же, без изменений. Эти кадры содержат вертикальную черную линию и пустой прямоугольник в последнем кадре диапазона.

an 11keyframe timeline

Маленькая a означает, что кадру назначено действие на панели «Действия».

an 11frame action

Красный флажок означает, что кадр содержит метку.

an 11frame label2

Зеленая двойная косая черта означает, что кадр содержит комментарий.

an commented

Золотая узловая точка показывает, что кадр является именованной меткой.

an anchor tween

О слоях в анимации движения

Каждый монтажный кадр в документе Animate может состоять из любого числа слоев временной шкалы. Для упорядочивания содержимого анимационных последовательностей и разделения анимационных объектов используйте слои и папки слоев. Упорядочивание по слоям и папкам предотвращает удаление, соединение или сегментацию перекрывающихся объектов. Чтобы создать анимацию, которая включает одновременное анимированное движение более одного символа или текстового поля, размещайте объекты на отдельных слоях. Можно использовать один слой как фоновый слой для размещения статичных рисунков, а также использовать дополнительные слои для каждого отдельного анимированного объекта.

При создании анимации движения Animate преобразует слой, содержащий выбранный анимированный объект, в слой анимации. Слой анимации обозначается специальным значком, расположенным рядом с названием слоя, на временной шкале.

Если в том же слое, где находится объект анимации, присутствуют другие объекты, Animate добавляет выше или ниже исходного слоя новые слои по мере необходимости. Любые объекты, которые существовали под объектом анимации на исходном слое, переходят на новый слой, лежащий под исходным. Любые объекты, располагавшиеся над объектом анимации на исходном слое, перемещаются в новый слой, который находится над исходным. Animate вставляет эти новые слои между любыми слоями, расположенными на временной шкале. Таким образом, Animate сохраняет исходный порядок наложения всех графических объектов в рабочей области.

Слой анимации может содержать только диапазоны анимации (смежные группы кадров с анимацией движения), а также статические или пустые кадры и ключевые кадры. Каждый диапазон анимации может содержать только единичный целевой объект и необязательную траекторию движения для целевого объекта. Поскольку рисовать в слое анимации невозможно, создайте в других слоях дополнительные анимационные или статические кадры, а затем перетащите их в слой анимации. Чтобы разместить кадровый сценарий в слое анимации, создайте его в другом слое, а затем перетащите в слой анимации. Кадровый сценарий может находится в кадре за пределами самого диапазона анимации. Обычно лучше размещать все кадровые сценарии на отдельном слое, который содержит только ActionScript.

Если в документе содержится несколько слоев, то отслеживание и редактирование объектов на одном или нескольких из них может быть затруднительным. Задача упрощается, если одновременно работать только с содержимым одного слоя. Слои, с которыми вы в данный момент не работаете, можно скрывать или блокировать, нажав на значок с изображением глаза или замка, который расположен рядом с названием слоя на временной шкале. Использование папок слоев способно помочь вам упорядочить слои в виде управляемых групп.

Распределение объектов по слоям для анимации движения

Animate автоматически перемещает объект на его собственный слой анимации после того, как к объекту применено свойство анимации. Также можно самостоятельно распределить объекты по их отдельным слоям. Например, можно самостоятельно распределить объекты при упорядочивании содержимого. Распределение вручную также может пригодится для применения анимации к объектам, для которых нужно точно контролировать перемещение с одного слоя на другой.

При использовании команды «Распределить по слоям» («Модификация» > «Временная шкала» > «Распределить по слоям») Animate размещает каждый выбранный объект на новом отдельном слое. Все невыбранные объекты (в том числе объекты в других кадрах) остаются в исходных слоях.

Команду «Распределить по слоям» можно применить к любому элементу в рабочей области, в том числе к графическим объектам, экземплярам, растровым изображениям, видеороликам и разбитым блокам текста.

О новых слоях создано с помощью команды «Распределить по слоям»

Новые слои, созданные в процессе операции «Распределить по слоям» называются по имени элемента, который содержится в каждом из слоев.

Новый слой, содержащий элемент библиотеки (такой как символ, растровое изображение или видеоклип), получает имя этого элемента.

Новый слой, содержащий именованный экземпляр, получает имя экземпляра.

Новый слой, содержащий символ из разбитого блока текста, именуется, как и этот символ.

Новый слой, содержащий графический объект (который не имеет имени), именуется как Слой1 (или Слой2 и т. д.), потому что графические объекты не имеют имен.

Animate добавляет новые слои под все выбранные слои. Новые слои размещаются сверху вниз в том порядке, в котором были первоначально созданы выбранные элементы. Слои в разбитом тексте размещаются в порядке символов, слева направо, справа налево или сверху вниз. Предположим, необходимо разделить на части текст FLASH и распределить его по слоям. Новые слои, которые называются F, L, A, S и H размещены по нисходящей, и самым верхним среди них является слой F. Эти слои будут размещены сразу под слоем, в котором содержался текст.

Источник

Как создать мультик на компьютере:
уроки для начинающих

Мультфильм, созданный своими руками – отличное решение, если вы хотите создавать оригинальный контент для YouTube или Instagram, делать увлекательные промо-ролики или даже просто разнообразить домашнее видео. Существует несколько типов анимации, их создание совсем не так сложно, как кажется. В этой статье мы подобрали обучающие уроки по этой теме, а также подробно расскажем, как сделать мультик на компьютере своими руками с нулевыми познаниями в этой области.

Как снять мультик из пластилина

play

В ролике подробно показывается, как снять мультик с человеком из пластилина на камеру смартфона, какие применять настройки при фотографировании и сборке мультика.

Создание мультфильма из бумаги

play

Узнайте, как в домашних условиях создать рисованный мультфильм в стиле бумажной перекладки. Эта техника состоит в том, что вы фотографируете нарисованные картинки, вырезанные из бумаги, накладывая их основной фон.

Основы Lego анимации

play

Серия уроков для начинающих, как дома на компьютере создавать мультики из игрушек Лего. Также подойдет для поклонников игры Майнкрафт, нужны будут лишь готовые фигурки персонажей.

Анимация для профи

play

Подробная инструкция, как создать мультфильм для детей в программе Adobe Animate. Подходит только для пользователей, уже освоивших базу и профессиональные программы анимации.

Как сделать мультик на компьютере в домашних условиях: пошаговая инструкция

Если предыдущие способы показались вам сложными, не расстраивайтесь. С хорошим софтом создание мультфильмов отнимает не так много времени. Это интересное занятие, которым можно заниматься даже с детьми. Давайте рассмотрим, как вручную создать стоп-моушн анимацию абсолютно без каких-либо навыков. Вам понадобится:

Мы рассмотрим процесс в программе ВидеоМОНТАЖ. Этот редактор видео позволяет работать с видеофайлами и изображениями, добавлять музыку и проводить озвучку, а также вручную менять длительность каждого слайда. Это именно то, что нужно для проекта. В результате мы получим вот такой короткий ролик:

Шаг 1. Создайте проект

Для начала вам нужно установить на компьютер нужный софт. Скачайте ВидеоМОНТАЖ, найдите установочный файл в папке «Загрузки» и дважды кликните по нему мышкой.

После этого следуйте инструкции Мастера установки. Когда программа полностью установится на ПК, запустите ее и в стартовом окне нажмите «Новый проект».

Новый проект в ВидеоМОНТАЖ

Шаг 2. Добавьте фотографии

Во вкладке «Файлы» нажмите кнопку «Добавить видео и фото». Найдите на жестком диске папку со всеми фотографиями для мультика. Чтобы загрузить их все сразу, выделите первый снимок, зажмите Shift и отметьте последний файл. Загруженные картинки автоматически переместятся на шкалу раскадровки.

Шаг 3. Установите параметры

ВидеоМОНТАЖ автоматически встраивает между слайдами эффекты переходов. Чтобы убрать их, кликните по нему правой кнопкой мыши и выберите «Удалить переход».

Удаление переходов между кадрами

Теперь нужно установить длительность слайда. Выделите любой и кликните по нему правой кнопкой мыши. В списке выберите «Инструменты» —> «Обрезать». Укажите самое маленькое значение продолжительности. Установите галочку возле пункта «Применить ко всем фото», чтобы программа автоматически укоротила все слайды. Кликните «Применить»

Устанавливаем длительность кадра

Шаг 4. Добавьте диалоги

ВидеоМОНТАЖ позволяет добавлять на кадры текст и графику, а значит, вы можете создать полноценный мультик с диалогами. Чтобы наложить на кадр «пузырьки» с разговором, как в комиксах, в боковой колонке перейдите в раздел «Картинки» и найдите подходящую графику. Дважды кликните на нее, чтобы добавить на слайд. новый элемент появится на шкале раскадровки. Растяните его так, чтобы он покрывал все необходимые кадры.

Если вы дважды кликните на добавленную картинку на слайде, то сможете дополнительно настроить анимацию, то есть появление объекта. Например, можно сделать так, чтобы она плавно появлялась и исчезала.

Настраиваем эффекты для отдельных объектов

Теперь добавьте сам текст в соответствующем разделе. Выберите подходящий стиль, дважды кликните для добавления и введите текст. Настройте у текста такую же длительность и настройки, как у слоя с картинкой.

Шаг 5. Наложите музыку или озвучку

Давайте дополним мультфильм музыкой или голосовыми комментариями. Чтобы добавить фоновое аудио с компьютера, дважды кликните по дорожке со знаком ноты на таймлайне, и импортируйте трек. также вы можете встроить музыку из библиотеки программы. для этого перейдите в раздел «Файлы» и нажмите «Коллекция музыки». Выберите подходящие треки, выделите один или несколько дорожек и нажмите «Добавить выделенные треки».

Встроенная коллекция музыки

Для добавления озвучки подключите к компьютеру микрофон. На таймлайне найдите дорожку с надписью «Дважды кликните для добавления записи с микрофона». Щелкните два раза мышкой и в новом окне запустите запись кнопкой «Начать запись».

Записываем озвучку самостоятельно

Шаг 6. Сохраните мультик

Теперь осталось лишь объединить все слайды в один мультфильм и запустить рендеринг. Нажмите кнопку «Сохранить видео» под окном превью и выберите «Сохранить видео в других форматах». Подберите подходящий формат и качество, укажите разрешение экрана и кодек и нажмите «Сохранить видео». Дождитесь, когда программа проведет рендеринг и скомпонует все слайды в один фильм. Готово! Вы сделали свой собственный мультик!

Сохраните работу в любом формате

Посмотрите видеоурок по созданию мультфильма:

multik

play

Заключение

Итак, вы посмотрели собранные в этой статье уроки мультипликации и знаете, как самому собрать мультик из фотографий или из картинок, нарисованных на бумаге. Как видите, ВидеоМОНТАЖ отлично подойдет для начинающих пользователей с минимальными навыками или совсем без опыта в анимации. Теперь вы можете создавать короткие анимационные ролики и дарить своим родным или подписчикам в YouTube оригинальные ролики.

Источник

Adobe Animate CC простой в использовании программный продукт для рисования векторной графики и ее анимирования. В нем ограниченное количество инструментов для создания графики, но возможно импортировать контент из Photoshop, Fireworks. Будет интересна начинающим аниматорам, любителям 2D мультфильмов, дизайнерам игровых персонажей.

Все Курсы Онлайн подобрали лучшие бесплатные уроки по Adobe Animate CC, которые дадут представление об основах работы и возможностях программы.

Введение

Видео урок познакомит с интерфейсом программы и продемонстрирует три способа создания простой анимации движения. Преимущество ее в поддержке xml 5 canvas, что дает возможность отображать проекты на любом устройстве. Рабочая область представляет собой поле для разработки сцен и вкладки с наборами инструментов, которые двигают и настраивают по желанию. Снизу находится временная шкала, на которой настраивается передвижение, фиксируется положение и интервал. Вкладки открываются через меню или нажатием горячих клавиш. Копии созданных объектов хранятся в библиотеке, и их можно использовать, даже если они были удалены. 

Основы анимирования

Из лекции узнаете о базовых приемах, используемых в работе. В любом перемещении есть начальное и конечное положение. Именно они задаются на временной шкале для настройки движения. Выбирают соответствующие кадры, где будет начало и конец. Далее выбирают анимируемый элемент и строят траекторию его перемещения. Настраивают скорость выхода, замедлив или ускорив ее. Каждая часть редактируется самостоятельно, так как в программе предусмотрена работа со слоями.

Основные приемы

Видео познакомит с историей развития программы, ее функциями и научит построению небольшой анимированной картинки. По сути, вся работа строится на базе основного кадра с размещенным объектом, а затем задается момент, когда его свойства начинают меняться. На шкале он выглядит как прямоугольник с черной точкой. Прямоугольник без точек обозначает промежуток, когда свойства остаются неизменными. Прямоугольником с белой точкой отмечается пустая сцена. В программе делается два типа анимации: кадр за кадром и движение. Первый вариант подразумевает прорисовку покадровых изменений изображения, которые создают иллюзию перемещения. Второй способ строится на задании позиции предмета в начале и конце движения и промежуток времени, за который он должен пройти это расстояние. В сцене встречаются два типа изображения: векторный рисунок (делается с помощью) и символ (полностью сгруппированный и редактируемый целиком). 

Мультяшный персонаж

Урок по созданию персонажа будет полезен тем, кто хочет сделать мультфильм или игровых героев. Для начала открывают в программе Action Script и задают разрешение рабочего поля. Это необходимо для правильного отображения будущих объектов. Необходимо загрузить рисунок, эскиз. Затем фигуру обводят по контуру с помощью карандаша. Для последующего оживления героя необходимо создавать каждую часть в новом слое. На таймлайне выделяют область для будущих сцен, и делают копии их содержимого из предыдущей сцены в следующую. После этого в главном кадре можно делать любые изменения.

Покадровая анимация

В видеоуроке рассказываются способы покадровой анимации, а также показывается рисование героя. Когда части объекта не разделены на слои, применяться способ покадрового анимирования. Оживление делают пошагово, меняя вид объекта, смещая части тела и придавая им нужную форму. Это можно применять к простым изображениям, где не требуется много действий. Еще один способ, когда не достаточно только изменить пластику персонажа, а необходимо перерисовывать отдельные детали. 

Природный ландшафт

В ролике показан процесс создания ландшафта и его анимирования. Изображение создается на основе эскиза, который нарисован от руки и загружен в программу. Для начало отрисовывают детали рисунка. Каждый фрагмент делается на новом слое. Это необходимо для дальнейшей работы. После завершения рисования, приступают к анимированию классическим способом через назначение начальных и конечных точек движения каждому элементу по отдельности.

Основы рисования

В ролике рассказывается об основных принципах рисования: создание базовой формы, редактирование, трансформация, копирование. Компьютерное рисование принципиально отличается от обычного. Здесь можно создавать только векторную графику. Алгоритм следующий: сначала создается базовая форма с использованием инструментов прямоугольник, квадрат, овал, ручка и т.д. Затем ее редактируют, применяя инструменты выделения, лассо, заливка, чернильница, пипетка и т.д., изменяя положение ее границ. Если необходимо, то форма трансформируется с помощью инструментов для трансформации. Далее форму копируют, выравнивают, группируют и делают из нее символы для дальнейшего использования. 

Анимация перекладкой

В ролике представлен такой вид анимирования как перекладка, когда отдельные части тела персонажа сдвигаются в каждом или в конечном кадре, если используется анимация движения. Это довольно сложная техника, когда у персонажа очень много деталей им становится сложно управлять. При его создании сначала прорисовывают его внешний вид, затем делят на основные фрагменты и распределяют их по слоям, после чего их анимируют. Весь процесс подробно демонстрируется, поэтому легко будет его повторить даже начинающим мастерам.

Простейшие тени

Тени придают объем графическому изображению и естественность. В ролике описан способ наложения теней для различных элементов изображения. Для начала выбирают карандаш и проводят линии в местах, которые будут темнее. Затем их заливают более темным цветом, чем основной. Обратите внимание, что контур должен быть закрытым, чтобы была возможность его заполнить цветом. После заливки всех форм вспомогательные контуры удаляются. 

Рисуем персонажа

Урок рисования предназначен для новичков и тех, кто совсем не умеет рисовать. Для начала создают проект, в который загружают изображение выбранного героя. Затем его обрисовывают, следя за тем, чтобы все линии замыкались. Элементы заливаются цветом. Для дальнейшего анимирования каждый из них отделяется и преобразуется в символ. Далее с помощью инструмента для построения костей скелета, объединяют точки на теле фигуры.

Уроки Adobe Animate CC, опубликованные в этом разделе сайта, предназначены, в основном, для начинающих.

Новичкам всегда трудно! Им нужно не только быстро освоить интерфейс программы, поскольку хочется поскорее создать что-нибудь свое, интересное и креативное, но и понять основы анимации, правила и принципы, на которых она базируется. А это не всегда так просто, как кажется!

Уроки Adobe Animate CC решают эту задачу оптимальным способом:

Во-первых, они публикуются не только в видео-формате, который, на сегодняшний день, стал относительным стандартом в обучении, но и в текстовом, учитывая потребности тех, кто легче воспринимает информацию с помощью текста и иллюстраций.

Во-вторых, рассказывать об интерфейсе программы, ее инструментах и возможностях гораздо интереснее, эффективнее и поучительнее, создавая реальные проекты, близкие к тем, что мы видим каждый день на страницах в интернете или в приложениях мобильных устройств. Именно поэтому в этих уроках Animate CC будет использован такой подход.

В-третьих, каждый урок (хотя и короткий по времени) решает одну, максимум две, практические задачи. Ведь для изучающих уроки Adobe Animate CC важно не только усвоить информацию, но и выработать необходимые навыки:

  • Знать где расположены инструменты программы и их базовые свойства
  • Знать горячие клавиши основных инструментов и операций
  • Понимать разницу между различными видами анимаций (покадровая, classic, motion, shape tween) и быстро их создавать …

Этот список можно продолжать и дальше, но не буду Вас утомлять чтением, лучше используйте это время для реального обучения!

Да, и еще… надеюсь, что и для старых поклонников Adobe Flash в этих уроках найдется много полезного и интересного. Хотя Animate и является полноправным преемником Flash, но в нем много нового, отвечающего современным требованиям и трендам в создании мультимедийного интерактивного контента.

Сразу под этими строчками Вы видите проект, который мы с вами будем создавать с нуля. В процессе создания Вы познакомитесь с интерфейсом программы, основными инструментами рисования, способами анимации и настройками при публикации конечного продукта.

Понравилась статья? Поделить с друзьями:
  • Руководство по эксплуатации контроллера mcx
  • Климат инструкция по применению в ветеринарии для коров
  • Руководство по действиям в чрезвычайных ситуациях на судне
  • Руководство по эксплуатации трактора беларус скачать
  • Как разобрать перфоратор макита 2470 пошаговая инструкция