Flash Kid Logo  
Home - Tutorials - Applications - Games - Community - Site Map - Contact Us  
 
 
 
 
 
Edit MovieClip Symbol with Transform Tool
Author: Salman Awan
Difficulty Level: Basic
Flash Version: Flash MX 2004
Sources to Download: none
 
Bookmark This Page

Prerequisites: Flash Interface, Tools Panel, Create MovieClip

Introduction:
Once we have created a movie clip, whether it contains only a symbol or a complete set of complex animations, we might need to change its width, height or direction to blend it with rest of the application.


In this tutorial we will learn how to resize, rotate and skew movieclip using Free Transform Tool (Q), from tools menu. We will also learn effect of reference point and Shift key on all of the above three.

Resize Movie clip:
Create a movie clip with a simple shape inside, say a circle. Click on movie clip symbol and select Free Transform Tool (Q) from tools panel. The blue rectangle around the movie clip will change to a black rectangle, having eight handles around it. Movieclip will look something like figure below.

selecting free transform tool for a movie clip
Fig. 1 - Selecting free transform tool for a movie clip

In order to resize movieclip bring your mouse pointer over any of the eight handles. The mouse pointer will change into a two sided arrow, indicating you can resize your movie clip in both directions i.e. either inwards or outwards.

Using middle handles on all four sides, we can only change movieclip width or movieclip height, however using corner handles we can change only width, only height or both at the same time.

While resizing using corner handles, if we keep Shift key pressed, it will restrict the resizing to be proportionate i.e. width and height will resize together and in proportion.

resize movie clip in proportion using corner handle
Fig. 2 - Resize movie clip in proportion using corner handle

Another very helpful feature in resizing is, movieclip reference point. If you notice in figure above we have a white circle in middle of the movie clip. By default it is placed in middle.

Click on this white circle, drag and drop it to a new position anywhere on the stage. Now resize movie clip just like we did before. Movie clip will resize with reference to that white circle, which is now placed outside the movie clip.

Resize Movie clip:
Movieclip rotation is similar to resizing, with only difference that it can be done using only four corner handles. For rotating a movie clip bring your mouse pointer close to any of corner handles. Make sure it is not over the handle, but just close from outer side. Mouse pointer will change to a round arrow, indicating that we can now rotate movieclip.

arrow changed for rotation
Fig. 3 - Arrow changed for rotation

Dragging left or right while keeping left mouse button pressed, with circular arrow, will rotate movie clip.

If we keep Shift key pressed while rotating, it will allow us to rotate only in quarters i.e. four equal jumps. It is very helpful feature, for example in rotating straight lines we don’t need to worry if line is rotated to an exact vertical position or not and vice versa.

Reference point is another very helpful feature in rotation. Click on this white circle, drag and drop it to a new position anywhere on the stage. Now rotate the movie clip just like we did before.

rotating with respect to movieclip reference point
Fig. 4 - Rotating with respect to movieclip reference point

You will notice that movie clip is now rotated around the reference point. It did before as well, but earlier it was already in middle so movie clip rotated on its center. This feature is helpful in situations like when we need to position a set of movie clips in a circular arrangement.

Skew Movie clip:
Using same Free Transform Tool (Q) we can also skew a movie clip. Skewing is equivalent to tilting our movie clip to either side, horizontally or vertically at an angle.

To use this feature we need to bring mouse pointer closer to the edge of selection rectangle, not over handle boxes. The mouse pointer will change to half arrows pointing in either direction. Click and drag movie clip’s edge to right or left, release mouse left button when you are satisfied with the tilting angle.

skewing a movie clip instance
Fig. 5 - Skewing a movie clip instance


Reference circle also changes the behavior of skewing. It will restrict the movement of closer edge, in proportion to distance of that edge from reference point.


Exercises:

  1. Try resizing only width of a movie clip using any of four corner handles. Try resizing only width while Shift key is pressed, using any of four corner handles. Can you do that, why?

  2. Drag the reference point circle closer but outside one of the edge of the movie clip, resize the movie. Move reference point further away from the movie clip, resize the clip again, was there any difference between the two attempts?

  3. Create a circle with straight lines all around it, in a hair like arrangement using reference point for lines.

  4. Does Shift key has an effect on Skewing?

  5. Drag the reference point circle closer but outside one of the edge of the movie clip, skew the movie clip using opposite edge. Move reference point further away from the movie clip, skew the clip again using opposite edge, was there any difference between the two attempts?

 
 
 
 
Related Links
Discussion Forum for Basic Flash ActionScript Tutorial
 
 

 
 
 
© 2008 flashkid.org! All Rights Reserved.