D1-Applying a (Adobe) Team Approach to Animation/D2-Working with Tweens

READ BEFORE EXCEPTING PROJECT!
2N1 ASSIGNMENT, SPLIT 275 INTO 2 DISCUSSION

DISCUSSION1- Learning Objectives Covered
LO 03.01 – Identify the functions of Photoshop, Illustrator and Animate to determine appropriate workflow requirements for an animation
Career Relevancy
Understanding how to work across and integrate different software is relevant to your career as a professional designer because often when working on a design project, your workflow will require you to work with multiple pieces of software for a single project. This discussion will help you think about the functionality of three main software platforms and determine how they might fit together and benefit your workflow process. In this discussion we will be looking at the functionality of three Adobe Creative Cloud programs (Photoshop, Illustrator, and Animate) to determine what part each might have in the workflow process of putting together an animation.

Background
DES246_wk3_D.jpg

The Adobe Creative Cloud application was designed to work as a stand-alone program; meaning, that application may be the only one you need to complete your creative project. However, the Adobe Creative Cloud application was also built to work in combination with one another in some way. Sometimes when working on an animation project, it is necessary to use multiple pieces of Adobe software to address different elements of the animation before compiling them all together within Animate. When working with multiple pieces of software, it is helpful to think of them as members of a team. Just as each member of a team brings different skills to the task, each application brings its own strengths and aids the overall animation workflow process. When creating an animation, in addition to Animate, the two most common software pieces (or team members) used are Adobe Illustrator and Adobe Photoshop.

Workflow between Illustrator and Animate

In week 1’s discussion, we went over the specifics on how Adobe Animate and Adobe Illustrator work together. Adobe Illustrator is professional grade vector illustration software. It allows you to create complex graphics that are easy to resize and appropriate for a wide range of applications. Animate maintains most of the editing capability of Illustrator. Essentially you can create a scene within Illustrator, import it into Animate, and then add animation while retaining the illustrations original look and feel. In this way, the functionality of Illustrator would allow you to create your background or environment within Illustrator before going to Animate. This means that you might begin your workflow first in Illustrator designing your environment and then move to Animate. This compatibility streamlines overall workflow because you do not have to recreate your scene within Animate.

Workflow between Photoshop and Animate

Adobe Photoshop and Adobe Animate can work together which allows the designer or developer to conveniently create images and graphical elements in Photoshop and move them straight to Animate. Photoshop allows you as a designer or developer to have creative control while compositing your images and graphics. Once you have created your images and graphics in Photoshop, you can simply import them straight to Animate using the Photoshop PSD file. Once imported, you will have options in the import panel on handling the visual fidelity and how you would like to handle the Photoshop layers that exist in the file. Please read the following article Working with Photoshop PSD files in Animate (Links to an external site.) by Adobe. This article will give you the details on how to import PSD files and the list of compatible attributes between Adobe Animate and Photoshop. Along with a list of import options and their uses.

Adobe Photoshop and Adobe Illustrator work seamlessly with Adobe Animate. This means you can first create images and scenes within Photoshop using advanced editing capability, using Illustrators advanced capabilities on your vector graphics and then easily import your artwork into Adobe Animate in order to add motion and movement. This compatibility allows you to streamline your workflow as you use the targeted strengths of each program rather than try to re-create elements from one program to another program.

References
Adobe (2016) Working with Photoshop PSD files in Animate. Retrieved from Adobe Website: https://helpx.adobe.com/animate/using/photoshop-psd-files.html (Links to an external site.)

Prompt
For your primary post this week, you are going to discuss how Illustrator, Photoshop, and Animate allow for a more efficient workflow. Imagine that you are preparing a presentation to give to new graphic art students about your own design process when creating animation works. The new students are particularly interested in knowing if the skills they already have from Photoshop and Illustrator will assist them in using and creating animation in Adobe Animate. For your primary post explain how you have utilized your skills in Photoshop or Illustrator to create animation in Adobe Animate. Has this affected your animation workflow and do you think having the ability to use both Photoshop and Illustrator files in Adobe Animate make creating an animation easier? You may want to consider the following:

The common functions of Photoshop, Illustrator and Animate
The team approach between the Adobe applications
Adobe Animates importing functions for Illustrator and Photoshop files
When replying to your classmates, you may want to consider how you can learn about and challenge one another on personal design workflow, thinking specifically about learning which practices might lead to optimal and efficient flow between software programs. In addition, consider questioning one another on what software skills or other parts of the design process (sketching, research, prototyping, etc.) might be a workflow requirement for animation creation.

For your citation, you might research articles that discuss Adobe Animate Workflow. You can also find articles from experts on using Adobe Animate, Adobe Photoshop, and Adobe Illustrator together.

Your initial and reply posts should work to develop a group understanding of this topic. Challenge each other by asking questions. Build on each other’s thoughts and examples. Always be respectful but discuss your thoughts on the examples and learn from one another.

—————————————————————————————————————————————————–

DISCUSSION 2-Learning Objectives Covered
LO 04.02 – Identify and differentiate between the properties of the three types of “tweens” to create animations
Career Relevancy
Understanding the difference between the three tweens in Adobe Animate is essential to creating an entertaining animation for the audience. As designers and developers, your primary goal for any design project is to communicate with your target audience. To communicate with the target audience, you must first grab their attention and then keep it long enough to relay the message of the advertisement or infographic. The three Tweens in Adobe Animate allows you to add customized moving elements that will hold the audience’s attention and convey a message; the key is knowing how and when to apply each element. The three tweens in Adobe Animate are the motion, classic, and shape tweens.

Background
DES246_wk4_D.jpg

Motion and Classic Tween

Motion tween and classic tween are the most similar of the three tweens. The motion tween is used to create movement in elements on the stage. The motion tween is the easiest of the three to create. To create a motion tween, start by setting the properties of the elements such as size, color, position, rotation, effects, and filters in frame 1. Then you move your play head down the timeline to the desired location where you want a change/movement to occur and set the properties to the desired results. When you play the animation back, you will see the element change from its starting state to its ending state. When you change a property, a keyframe is automatically created based on where the play head is on the timeline. Adobe Animate will automatically create a motion path between the keyframes that will guide your element through the movement. For example, if you are animating an element that is on the left side of the stage in frame 1 and you changed its position in frame 20 to the right side of the stage. On playback, you will see the element move from the left side of the stage to the right side as if it were sliding or flying across the stage. Please read the following article Creating a motion tween animation (Links to an external site.) for step by step instructions on creating a motion tween in Adobe animate. This article will also give you some tips for working with the timeline on a motion tween.

Classic tweens are an older way of creating movement. The motion tween and classic tween are similar, but the classic tween is a little more complicated. With classic tweens, you must create the keyframes. In the first keyframe, you set your element to the starting state. Then you manually create your second keyframe and change the state of your element. Adobe Animate will create a motion path just like in a motion tween. As stated, the motion and classic tween are similar, but there are some fundamental differences. A classic tween consists of groups of individually selectable frames much like a frame by frame animation. Whereas as motion tween stretches and resizes treating the frames as one single frame versus multiple individual frames. Classic tween also makes your file size bigger than a motion tween because it uses frame scripts and motion tweens do not use frame scripts. On the other hand, classic tweens will allow you to set or change more color properties than a motion tween. For example, if you needed to fade (change the transparency) of an element from 100% transparent to 0% (invisible) while also changing the color of the element, you would need to use a classic tween in order to change the two properties at the same time. In this example, you would have a total of four keyframes. You would have your starting state, then set a keyframe where you wanted the element to fade out at on the timeline, then a third keyframe where the element would fade back in on the timeline, and the last keyframe where the element changes color. With a motion tween, you would either be able to change the alpha (transparency) or the tint (color) but not be able to change both of them. The classic tween, however, allows you to change both properties at the same time when needed. Please read the following article How to work with classic tween animation in Animate CC (Links to an external site.) for step by step instruction on creating a classic tween and how to edit keyframes to customize a classic tween.

The most significant difference between a motion tween and classic tween is that with a motion tween you can also change the 3D properties; with a classic tween, you can only work with the 2D properties. While each of these two tweens can help you as a designer or developer create unique animation both have their limitations to the types of properties that can be changed to the type of element it can be applied to. As a designer or developer, you plan your movement out to determine which of these tweens will best suit the movement you want to create.

Shape Tweens

Shape tweens are unique and create unique effects. Shape tween otherwise known as morphing can take a vector shape or broken apart text and images, and morph it into another element. You start by creating a keyframe and placing your starting shape into that keyframe. Then create a new keyframe where you want the element. Adobe Animate will automatically create a motion path between the keyframes. The shape tween creates a fluid type of animation that morphs one element into another. For example, if you wanted to create a unique animation like an icon morphing into text, you could use the shape tween. When played, the icon would melt apart and for the words from your text. This tween can be used in several ways and creates some entertaining and unique animations. Please read the following article Shape tween (Links to an external site.) by Adobe for step by step instruction on creating a shape tween and the different properties that can be edited during the tween. With the shape tween, you can change the element, position, and color giving the designer or developer a lot of possibilities and creative ability. The shape tween is very different from motion or classic tween because you can only use a shape tween on vector graphics that are not grouped and have not been turned into a symbol. Both the motion tween and classic tween require that the element be first converted to a symbol before being used in a classic or motion tween and animation.

All of the tweens in Adobe Animate will help you as the designer or developer, create and customize an animation that will be unique and grab the attention of your target audience. Planning the movement of each of the elements in the animation is the key to applying the correct tween to each element. While each of these tweens has their similarities, they are all very different and unique. Knowing how they work and what properties can be altered within each one is necessary to apply the tweens correctly to the moving object in an animation.

References
Adobe (2015) Creating a Motion Tween. Retrieved from Adobe Website: https://helpx.adobe.com/animate/using/creating_a_motion_tween_animation.html#main-pars_header (Links to an external site.)

Adobe (2017) How to work with classic tween animation in Animate CC. Retrieved from Adobe Website: https://helpx.adobe.com/animate/using/classic-tween-animation.html (Links to an external site.)

Adobe (2017) Shape Tweening. Retrieved from Adobe Website: (Links to an external site.)

Prompt
For your primary post this week, discuss and differentiate between each of the three tweens in Adobe Animate. How can each of these tweens be used to create movement within an animation? Things you may want to consider are the properties that can be changed for each tween and the effect on the over animation file of each tween. When replying to your classmate’s post, you may want to consider a scenario in which you could use each of the tweens based on your classmate’s post and share that scenario for better understanding and discussion.

For your citation, you might research articles that discuss Adobe Animate tween. You can also find articles from experts on using Adobe Animate tweens on different elements.

Your initial and reply posts should work to develop a group understanding of this topic. Challenge each other by asking questions. Build on each other’s thoughts and examples. Always be respectful but discuss your thoughts on the examples and learn from one another.