IT tutorials
 
Graphics
 

Adobe Flash Professional CS5 : Manipulating Symbols in 3D Space (part 2) - Transforming symbols with the 3D Rotation tool

12/13/2011 5:57:56 PM
- Windows 10 Product Activation Keys Free 2019 (All Versions)
- How To Bypass Torrent Connection Blocking By Your ISP
- How To Install Actual Facebook App On Kindle Fire

2. Transforming symbols with the 3D Rotation tool

The 3D Rotation tool enables you to spin objects around the x, y, or z-axis and creates the illusion of depth by skewing and scaling your graphics based on the degree of rotation and the vanishing point and perspective angle settings. Figure 4 shows a simple rectangle with a drop shadow added (top) and the result of a 45-degree rotation applied along the x, y, and z-axis, respectively.

Figure 3. The location of the vanishing point determines the direction that 3-D objects travel when they move along the z-axis. The original symbol (top left) looks smaller but remains centered when a 200-pixel translation along the z-axis is applied with the vanishing point in the middle of the Stage (top right). The same translation along the z-axis has a different result when the vanishing point is located in the top-left corner of the Stage (bottom left) or in the bottom-right corner of the Stage (bottom right).

To apply the 3D Rotation tool (W), activate it in the Tools panel, then select a symbol on the Stage. When you select a symbol with the 3D Rotation tool, a target overlay (shown in Figure 4) appears, guiding you in moving the symbol in 3-D space. The red vertical crosshair enables x-axis rotation, the green horizontal crosshair enables y-axis rotation, the inner blue circle enables z-axis transformation, and the outer orange circle enables free transformation (around the x- and z-axis at the same time). To rotate an object, click and drag from the guide that represents the axis you want to use — dragging clockwise adds a positive transformation, and dragging counterclockwise adds a negative transformation. An object can be rotated around any axis from 0 degrees to 360 degrees in a positive or negative direction. When you release the mouse, you will notice that the 3D Position in the Properties panel updates, and if you have the Transform panel open (Window => Transform), you can see the exact degree of rotation in the 3D Position and View section of the panel.

NOTE

If you rotate an object more than 180 degrees, Flash automatically updates the values in the Transform panel to the smallest equivalent value. For example, applying a positive transformation to rotate an object 190 degrees around the x-axis has the same end result as applying a negative transformation to rotate it −170 degrees, so after you release the mouse and apply the transformation, Flash updates the value in the x-axis field of the Transform panel to be −170 degrees rather than 190 degrees.

Figure 4. The same degree of rotation (here 45 degrees) has different visual results when applied to the three different axes of a 3-D Movie Clip (x, y, z). You can rotate an object around just one axis or you can combine two (or even all three) to position a symbol exactly where you want it in the faux 3-D space of the Flash Stage.

The final result of 3-D rotation is affected by the location of the 3-D center point. The 3-D center point is indicated by the white dot at the center of the 3-D target overlay when the 3D Rotation tool is active and a 3-D symbol is selected. The default location for the 3-D center point is at the center of the selected symbol. Click and drag to reposition the center point (or transformation center point) to another location on your current symbol or even outside of the symbol. Moving the 3-D center point away from the center of the symbol increases the arc of any 3-D rotations — this can be helpful for specific effects but it can also make it more likely that your symbol will move dramatically and end up outside the viewable Stage area. Double-click the 3-D center point dot to reset it to the center of the symbol. If you prefer to set rotation values in the Transform panel, select the symbol you want to modify and use the hot text fields for x-, y-, and z-axis in the 3D Rotation section of the panel. You can also modify the location of the 3-D center point by using the hot text fields for x-, y-, and z-axis in the 3D Center point section of the Transform panel. Figure 5 shows the difference in result when the same rectangle is rotated around the y-axis with three different 3-D center point locations.

Figure 5. The 3-D center point determines the origin point for 3-D transformations. Here you can see how a y-axis rotation applies differently when the 3-D center point is located in the center of the symbol (A), compared to the top-left corner of the symbol (B) or the bottom-right corner (C).

The Remove Transform button at the bottom-right corner of the Transform panel returns your symbol to its unmodified state with just one click. The Duplicate Selection and Transform button beside the Remove Transform button makes an exact copy of your current selection — but be warned that you won't notice until you move the copy because it will be stacked on top of your original.


Symbols can be rotated in global space (relative to the main Stage drawing area), or if they are nested Movie Clips, they can be rotated in local space (relative to the container Movie Clip's drawing area). The toggle for global or local rotation is at the bottom of the Tools panel when the 3D Rotation tool is selected — the default setting is for global rotation.

You can temporarily toggle the 3D Rotation tool from global mode to local mode while dragging to move a symbol along any axis by pressing the D key.


To rotate multiple objects simultaneously, activate the 3D Rotation tool (W) in the Tools panel, and then select multiple symbols on the Stage (Shift+click or drag a selection field around multiple items). The Rotation guides/target will be centered on the most recently selected item. All the selected symbols rotate around the 3-D center point, which appears in the center of the guide. To change the position of the 3-D center point, you can do any of the following while you have a selection active on the Stage:

  • Drag the center point to a new location.

  • Shift+double-click any of the current symbols to move the center point to that symbol.

  • Double-click the 3-D center point to auto-position it at the center of the current group of selected symbols.

  • Change the values for the x, y, z location of the 3-D center point in the Transform panel.

3. Moving symbols with the 3D Translation tool

The 3D Translation tool enables you to move objects forward and backward in space along the z-axis, left and right in space along the x-axis, and/or up and down in space along the y-axis. For nested Movie Clips, 3D Translations can be global (relative to the main Stage) or local (relative to the parent Movie Clip's drawing area). To apply the 3D Translation tool (G), activate it in the Tools panel, then select a Movie Clip on the Stage. As shown in Figure 6, the 3D Translation tool consists of two arrow guides for moving along the x- and y-axis and a center blue dot for moving along the z-axis. Click the head of the red horizontal arrow and drag your object left or right along the x-axis. Click the head of the green vertical arrow and drag your object up or down along the y-axis. Click the blue dot and drag your object forward or back along the z-axis. To reposition the guides for the 3D Translation tool, press and hold Alt/Option and then click and drag the blue dot to a new location. Double-clicking the center blue dot auto-positions the guides back at the center of your symbol.

Changes to the location of your 3-D symbol updates the x, y, and z values in the Position and View section of the Properties panel. These values are also hot text fields, so you can position your 3-D symbol by changing the values directly in the Properties panel. Moving an object along the z-axis changes its apparent size relative to the Stage. The apparent width and height also appear in the 3D Position and View section of the Properties panel, but these are read-only values, unlike the original width and height values in the Position and Size section of the Properties panel, which are editable hot text fields. You can also move multiple items simultaneously with the 3D Translation tool; Refer to the instructions for the 3D Rotation tool in the previous section.

Figure 6. The 3D Translation tool provides controls for moving symbols along the x-, y-, and z-axis.
 
Others
 
- Adobe Flash Professional CS5 : Manipulating Symbols in 3D Space (part 1) - Controlling the camera view: Perspective and vanishing point
- Adobe InDesign CS5 : Working with Clipping Paths
- Adobe InDesign CS5 : Creating a Compound Path
- Adobe Flash Catalyst CS5 : Merging Changes from Catalyst into Flash Builder
- Adobe Flash Catalyst CS5 : Running a Project in Flash Builder
- Adobe Illustrator CS5 : Selecting Layers & Deleting Layers
- Adobe Illustrator CS5 : Creating Layers - Create a New Top Level Layer or Sublayer with Options
- Dreamweaver CS5 : Establishing Optional Regions (part 3) - Template expression examples
- Dreamweaver CS5 : Establishing Optional Regions (part 2) - Evaluating template expressions
- Dreamweaver CS5 : Establishing Optional Regions (part 1)
 
 
Top 10
 
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 2) - Wireframes,Legends
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Finding containers and lists in Visio (part 1) - Swimlanes
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Formatting and sizing lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Adding shapes to lists
- Microsoft Visio 2013 : Adding Structure to Your Diagrams - Sizing containers
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 3) - The Other Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 2) - The Data Properties of a Control
- Microsoft Access 2010 : Control Properties and Why to Use Them (part 1) - The Format Properties of a Control
- Microsoft Access 2010 : Form Properties and Why Should You Use Them - Working with the Properties Window
- Microsoft Visio 2013 : Using the Organization Chart Wizard with new data
programming4us programming4us
 
Popular tags
 
Video Tutorail Microsoft Access Microsoft Excel Microsoft OneNote Microsoft PowerPoint Microsoft Project Microsoft Visio Microsoft Word Active Directory Biztalk Exchange Server Microsoft LynC Server Microsoft Dynamic Sharepoint Sql Server Windows Server 2008 Windows Server 2012 Windows 7 Windows 8 Adobe Indesign Adobe Flash Professional Dreamweaver Adobe Illustrator Adobe After Effects Adobe Photoshop Adobe Fireworks Adobe Flash Catalyst Corel Painter X CorelDRAW X5 CorelDraw 10 QuarkXPress 8 windows Phone 7 windows Phone 8 BlackBerry Android Ipad Iphone iOS