Controlling Rotatation and Spin

Edit the Center Point

You may decide that you want your object to rotate or spin on a point that is not true center. Flash allows you to change the center/registration point of a symbol.

  1. Create a new Flash Movie and draw an arrow or some type of pointer-like object.

  2. group the lines together (ctrl-G)

  3. With the arrow selected in frame 1, click on the Free Transform tool.

    Edit Center Point
  4. You won't see anything different about your symbol at this point but your cursor now has a little beside it indicating that you can edit the center point.

    Finished Editing Center Point
  5. Click on the registration point on the symbol; it turns into a circle. Drag it down to the bottom of your arrow. When you let go of the mouse, the circle will have moved to it's new location.

  6. rotate from the end Follow the instructions for one of the exercises above to see how your symbol reacts to being rotated or spun now.

 

Info Panel

Sometimes when there is a lot going on on the stage, it may be difficult to tell what symbol was used. The Info Panel can be very helpful as it gives you "information" about your objects.

Info Panel

The Info panel uses the units specified for the Ruler Units option in the Movie's Document dialog box.

Info Panel


Notice that the ruler measurements start from the top left corner and increase as they go from left to right (x coordinate direction) and from the top left corner going downwards (the y coordinate direction).

You can use the Info panel to do the following:
  • View the object type of a selected object (shape, movie clip, and so on).

  • View and change the width and height of selected objects.

  • View and change the position of selected objects by using precise x and y coordinates.

  • Use the registration grid to specify a top-left registration point or a center registration point (top-left is the default).

    registration point in upper left corner
    Registration point in upper
    left corner
    registration point in center
    Registration point in center


  • View the position of your mouse.

Let's work with the Info Panel a bit...
  1. Open a new movie and set the stage size to 400 x 400 pixels.

  2. Draw out a square on the stage with the Rectangle tool.

  3. With the square on the stage selected, access the Info Panel (Window > Panels > Info or [Ctrl+Alt+I] keys).

  4. In the W field type in 100.

  5. In the H field type in 100.

  6. Now convert the square to a symbol (name it and give it Graphic behavior).
    • In the Info Panel, the symbol's dimension is on the left (100 x 100).
    • The registration grid is in the middle and the X and Y coordinates are on the right.


  7. Let's move the instance of the symbol to the top left corner of the stage using the X and Y coordinates. Be sure the registration point is set at the default (top-left) top-left registration point.
    • Enter 0 in the X field.
    • Enter 0 in the Y field.
    • Click on the stage one time. The instance will move to the the top left corner of the stage.
    Remember, the X and Y coordinates use the same units as the ruler. Turn on the ruler (View > Ruler) and you will see the the upper left corner of the instance is at the 0 coordinates.

  8. Now let's change the registration point. With the instance on the stage selected, click the center square of the registration grid center
    • Notice that the X and Y coordinates changed to 50.0 and 50.0. This is because the registration point is in the center. If you look at the crosshair of the instance (the instance must be selected for the crosshair to be visible), you'll see that it's lined up to the X 50 and Y 50 coordinate of the ruler.


  9. Change the X and Y coordinates back to 0.
    • Notice that the left and top half of the instance is off the stage. That's because the registration point is now in the center instead of the top-left corner of the instance. The crosshair of the symbol indicates the center point.


  10. Now move your mouse over top of the square on the stage.
    • Notice the bottom X and Y coordinates change as you move your mouse over the object. These are the coordinate values of the mouse.
    • Notice that the RGBA fields are empty...this is because we are working on an instance of a symbol on the main stage. Remember we mentioned above that you must be in Symbol Edit Mode to view those values.


  11. Let's edit this symbol in place to view the RGBA values of this symbol. Double click on the instance on the stage OR right click and choose Edit In Place from the contextual menu.
    • Notice that the stage still appears when you use "Edit In Place".


  12. Now move your mouse over the square.
    • Notice that values appear in the RGBA field (depending which colors and alpha you used when you created the symbol).


  13. The object is still at the 0 coordinates with the registration point in the center. Let's move the object to the center of the work area. Because we set our stage size to 400 x 400 pixels, we know that 200 x 200 will be the center point. So change the X and Y coordinants to 200 then click on the stage once.
    • Notice the object moves to the center of the stage.


  14. Now change the registration point to the top-left top-left.
    • Notice the values of the coordinants change to 150. If you turned off the ruler view, turn it back on so you can see the units displayed and that they correspond with the top-left corner of the object's registration point.


  15. In the previous steps we were in Symbol Edit Mode, but editing the Symbol "In Place" to the stage...the stage was still visible. This time let's work in Symbol Edit Mode by double clicking on the icon in the Library, OR by selecting the symbol in the Library and choosing Edit from the Libraries Options menu.

  16. With the object selected, change the registration point back to the center center

  17. Click on the work area one time to deselect the object.

  18. Select the Text tool and type some text to the left of the square so it's not touching it....My Square will do. Be sure the text is a different color than the square.

  19. Select the Arrow tool and be sure that just the text is selected. Access the Info Panel and set the X and Y coordinates to 0.

  20. The text is now over top of the square and both are centered in the work area.
    NOTE: The crosshair indicates the center point in the work area of Symbol Edit Mode.
  21. Now go back to the main stage by clicking on the Scene 1 link. You'll see your square in the center of the stage, along with the new text you created in Symbol Edit Mode on top of it and centered.

The Info panel can help to center an object while in Symbol Edit Mode. Tip: If the X and Y areas are grayed out, it's because the object is not selected. The more you work in Flash, the more you'll discover how useful the Info panel can be, especially when working with complex movies.