ARRANGING SHAPES in Animate

 VICTREE MEDIA 13


SUMMARY:


     In Object Drawing Mode, users have powerful tools for manipulating drawings. Key functions include combining, cutting, and merging drawings using tools like Union, Punch, and Crop. The Selection Tool is pivotal for grouping and editing drawings within defined groups, ensuring objects outside the group remain inaccessible. Grouping objects is achieved through commands like Edit -> Edit All, Modify -> Group, or Modify -> Ungroup.


     For precise alignment of panels, users can navigate to the Window menu, select Align, and utilize options such as Touch Right, Touch Bottom, Distribute Width, and Distribute Height. Within the Modify menu, alignment options such as Top, Left, and Align to Stage offer additional control over positioning.


     Arrangement tools empower users to reorder drawings at will, with options like Lock and Unlock enhancing flexibility. Align options cover vertical and horizontal centering, as well as methods tailored for alignment to the stage or adjacent drawings. Aligning drawings to the left of another drawing or the stage is particularly useful for achieving aesthetically pleasing compositions.


     Flash/Animate, renowned for its 2D vector-based capabilities, manages width and height meticulously. It offers three distinct methods for aligning objects to the top, ensuring precision in layout and design.


     If you want to know in detail about the arranging shapes, read them down below:


Introduction:

 

     If you remember Merge (Default) mode allowed you to combine the shapes of the same color and cut the shape when a shape of different color intersects. This was so amazing, and thought, what if you want to merge or minus a grouped or drawing object. You are in luck because, in today's lesson, we are going to cover Combine Object mode, grouping, alignment, and arrangement.


Combine Object:


     Combine Object is exactly what you think, it combines, cuts, and merges the drawing in Object Drawing Mode. To merge or cut a grouped or object drawing mode, you will need to utilize Combine Object, and as the name suggests, Union selects and creates an object, where the two or more shapes are intersecting. The resulting object drawing shape consists of the overlapping portions of the combined shape, and secondly, do a pair of two shapes interaction only, else the shape will be deleted; you can tell by turning a keyframe into a blank. Keep in mind, first you have to select the shapes and then only you can get other options to click, else you can only use the union option. Any part of the shape that does not overlap is instantly deleted, and the resulting shape utilizes the fill and stroke of the topmost shape in the stack.

 

     Punch is your next option provided, and it removes portions of the selected shape as defined by the overlapping portions of the top-selected shape, positioned in front of it: for example, remember punching machines when you hear the name, which is how I perceived it. Any part of the drawing object that is overlapped by the top-most object is deleted and the top-most object is deleted entirely. The resulting objects remain separate and they are not combined into a single object, unlike Union or intersect, which merge the objects together. The final option is Crop which uses the stroke of one drawing object to crop another object, and the top-most object defines the shape of the crop area. Any part of an underlying drawing object that is overlapped by the top-most object remains, while all other portions of the underlying objects are deleted, and the top-most object is deleted entirely. The resulting objects remain separate and are not combined into a single object (Unlike the Union or intersect, join the objects).

USES


1) Go to Modify -> Combine Object -> Punch to cut the shape under the overlapping one.

2) You go to Modify -> Combine Objects -> Union to merge two of the shapes that are in the Object Drawing Mode.

Grouping Objects:


    A group is to manipulate different elements as a single object; grouping them, and for instance, after creating a character, you may group different body parts, so that you can easily select and move the character as a whole. When you select a group, the property inspector displays the X and Y coordination of the group and its pixel dimension. You can edit groups without ungrouping them, and you can select an individual object in a grouping for editing without ungrouping the objects. You have to select the objects to a group, and the group is best for maintaining some level of organization. The non-grouped images stay below the grouped images, and new groups are created above everything. You can create more groups inside a group, and you can select shapes, symbols, text, other groups, and so on.

     Ungroup is used for separating the grouped element again, and there are two ways to edit a group. Everything that is not part of a group is dimmed, indicating that objects outside the group are inaccessible, and you can edit any picture within the group.
Macromedia Flash/Adobe Animate restores the group to its status as a single entity, and you can work with other elements on the stage. Remember to select your drawings before you go for grouping them together, and imagine Grouping is a container that has a bunch of art supplies in them. Just like object drawing does not cut and merge, white overlapping, the group will not either, and you can either break apart or click ungroup, but ungroup only works with the group.

USES


1) Select Edit -> Edit All

2) Go to Modify -> Group or use the shortcut.

3) Go to Modify -> Ungroup or use the shortcut.

4) Double-click a blank spot on the stage with the Selection Tool.

5) Select a grouped object, and then, select Edit -> Edit Selected.

6) Go inside the group by double-clicking with the Selection Tool.

Arrangement:


     Macromedia Flash/Adobe Animate stacks shapes in the order, in which they are created, placing the most recently created shape at the top of the stack, and the stacking order determines how shapes appear when they overlap. However, arranging allows you to change the placements of drawings in the order, you would like, and keep in mind, that this only does not work with Merge Drawing Mode, but works with Object Drawing Mode, Symbols, and even, groups. There are five options including lock and unlock. Lock is to lock/pin a drawing object in its specific location so that it does not accidentally move the image, you have to finalize the place. Unlock All is going to unlock all locked/pinned groups, symbols, or Drawing Object are locked, at once.

     Bring Forward brings the bottom shape to the top of the shape that is above it, and if there are four shapes in Object drawing Mode overlapping one another, Bring Forward is going to bring the selected bottom shape on top of the shape above it. The more you click, the more up it will come. Send Backward brings the top shape to the bottom of the shape that is below it, and if there are four shapes in Object drawing Mode overlapping one another, Bring Backward is going to bring the top-selected object to the bottom of the shapes below it. The more you click, the more down it will go.

     What if you want to send it directly to the very back or bring it to the topmost position? Flash/Adobe Animate provides an option for that too. If you have heaps of grouped objects, "Bring to front" will move it all the way to the top, and "Send to back" will move it all the way to the bottom. Keep in mind that the arranging options will only work on the same layer, and if two of the shapes are in other layers, you will not be able to arrange them. The locked object cannot break, does not allow it to be edited, and also it cannot move.


USES


1) Go to Modify -> Arrange -> Lock or use a shortcut.

2) You go to Modify -> Arrange to arrange your drawings.

3) You click on Modify -> Arrange -> Send to back or use the shortcut.

4) You click on Modify -> Arrange -> Bring to Front or use the shortcut.

5) You click on Modify -> Arrange -> Bring Forward or use the shortcut.

6) You click on Modify -> Arrange -> Bring Backward or use the shortcut.

Alignment:


     Align lets us align selected objects along the horizontal and vertical axis. You can align objects vertically along the top edge, center, or bottom edge of the object, and you can align objects horizontally along the extreme right, center, and extreme left. Flash/Animate provides some extra aligning systems in the align panel like two settings for spacing, and making both width and height the same. We can align text, as well. So, what is aligned to the stage? There are three ways to select these options, and "Align to stage" if enabled, the selected drawing object, symbol, or group will align within the stage. For example, when you align an object that is selected to the right horizontal, it will move to the right of the stage. It can work if the top shape is a drawing object, symbol, or group and the bottom shape is not; however then while aligning, it will seem as if the top shape is vanishing. So, I insist on aligning when both shapes are grouped, symbols, or Drawing Object unless you are aligning to the stage.

     Left (Align) is to align to the left of another drawing or the stage, and there are three ways to align to the left. Horizontal Center (Align) comes from the word horizon, and like a horizon is a straight line from right to left or vice versa, so is the horizontal alignment. In that case, horizontal center means aligning to the center between the left and right corners. There are three ways for aligning for the horizontal center, and Right (Align) is to align to the right of another drawing below or to the right of the stage. Right (Align) is to align to the right of another drawing or the stage, and there are three ways to align to the right. Top (Align) is to align to the top of another drawing or the stage, and there are three ways to align to the top. Vertical center (Align) is the polar opposite of horizontal, and it is a straight line from up to down or vice versa. In that case, vertical center means aligning to the center between the up and down corners. It can be on the top or bottom corner, and to make it right at the center of the stage or the center of the image, you need to click both horizontal and vertical center (Align). There are three ways to align to the vertical center, and the bottom (Align) is to align to the bottom of another drawing or the stage. There are three ways for aligning to the top, and as Flash/Adobe Animate is a 2D {Two-Dimension} Vector-based program, it deals with width and height. The width (Length) is the horizontal measurement of a shape, and height is the vertical measurement of a shape. Distribute Width, as the name says, distributes the width of three or more images equally amongst them, or along the stage, and there are three ways to access distribute width. Distribute Height distributes the height of three or more images equally amongst them, or along the stage, and there are three ways to access distribute height. Make Same Width lets us make the width of two or more photos identical to one another, and there are three ways to access the same width. Make Same Height lets us make the height of two or more photos identical to one another, and there are three ways to access the same height.


USES


1) Go to Window -> Align -> Vertical.

2) Go to Window -> Align -> Horizontal.

3) Go to Window -> Align -> Touch Top.

4) Go to Window -> Align -> Touch Left

5) Go to Window -> Align -> Touch Right.

6) Go to Window -> Align -> Touch Bottom.

7) Window -> Align -> Touch Distribute Width.

8) Window -> Align -> Touch Distribute Height.

9) Window -> Align -> Touch Make same Width.

10) Window -> Align -> Touch Make same Height.

11) Go to Modify -> Align -> Top or use the shortcut.

12) Go to Modify -> Align -> Left or use the shortcut.

13) Go to Modify -> Align -> Right or use the shortcut.

14) Go to Modify -> Align -> Bottom or use the shortcut.

15) Go to Modify -> Align -> Vertical Center or use the shortcut.

16) Go to Modify -> Align -> Distribute Width or use the shortcut.

17) Go to Modify -> Align -> Distribute Height or use the shortcut.

18) Go to Modify -> Align -> Horizontal Center or use the shortcut.

19) Go to Modify -> Align -> Make Same Width or use the shortcut.

20) Go to Modify -> Align -> Make Same Height or use the shortcut.

21) You should go to Modify -> Align -> Align to stage or use the shortcut.

22) You can go to Window -> Align [This will open the align Panel in the properties corner that you should extract out] -> You just tick mark the "Align to stage" option.


Please kindly like and comment below

if you like that and for more blogs like this

 © Copyright 2022 Takzicution™. All rights reserved.

Comments



  1. Hi bro,

    I just wanted to take a moment to commend you all on your exceptional use of the alignment tools in our latest project. The way you've distributed the width and height of the images so evenly creates a clean and professional look that really stands out.

    I particularly appreciate how the "Make Same Width" and "Make Same Height" functions have been used to ensure consistency across our visual elements. This attention to detail greatly enhances the overall aesthetic of our work.

    Your mastery of the alignment options, whether it's aligning to the stage or using shortcuts for quick adjustments, shows a high level of skill and dedication. The final product is not only visually appealing but also highly polished and cohesive.

    Great job! Keep up the fantastic work!

    ReplyDelete
    Replies
    1. Hi Impeccable! Thank you so much for your thoughtful words!

      It is amazing to hear that you noticed and appreciated the effort I put into using the align tools effectively. I really wanted to ensure everything looked polished and tacky, so your reply means a lot.

      I shall keep up the momentum and continue delivering outstanding results like this one weekly.

      King of Story Time animation,
      Takzicution Studios

      Delete

Post a Comment

Popular posts from this blog

Adobe ANIMATE SHORTCUT Keys

TIMELINE l in Animate

DRAWING Tools ll in Animate