Saturday, November 14, 2009

Shape Tween Vortex

This is a lesson in shape tweening gradients, and frame manipulation. Practice the frame manipulations and you will become very fast and proficient at flash.


1. Open a new movie. Open the properties inspector and set the movie properties to a square,

  • 500 wide by
  • 500 high.
  • 12 fps,
  • background = Black.

Save your file.


2. Double click your hand tool on your tool box so your stage fits to screen.

3. Select your oval tool. Set the stoke color to black, stroke thickness = 5, solid. Set your fill to a radial rainbow gradient fromt he gradient presets.

4. Hold your shift key down and draw a circle that is larger then the stage so all of the stage is covered.


5. Use your line tool set at 5 pixel thickness and black color to draw a line through the center to split the circle in two. Use the line tool to split those sections so you end up with 4. Split those sections again to end up with 8. Split one more time so you end up with 16.

6. Select your arrow tool. Double click the lines in the middle being careful to only get the lines. hold your shift key down and double click the outline of the circle. This should select all the black lines without any fill. Click Modify=> Shape=> convert lines to fill. Deselect all by clicking somewhere else on the work area.

7. Click one on the black area. This should select all the black fill. Hit your backspace key to delete the black fill. This should leave a sliced pie.

8. We need to separate the sliced pie to their own dishes so to speak. Click right on frame one of layer 1 so highlight all the contents on the stage and work area. Click Modify=> distribute to layers. Ea slice should now have it's own layer and the original layer should be empty.

9. We need to identify the layers and place them in order so our vortex will go smoothly. We will need to click on them in order and change the name of the layer. Click on the top left slice. Find the highlighted layer in the layers palette and rename it 1. Click on the Number 2 slice, going counter clockwise on the circle. Find it's layer and call it 2. Continue around the circle locating each layer for each slice in order until all the slices are labeled but layer 1. Highlight the unused layer 1 and Click the trash can on the bottom of the layers palette.

10. Open your layers palette up long so you can see most all of the layers if possible. reorder the layers so that 1 is on top and 16 is on bottom. Just click and drag each layer to the new position.


11. Use your arrow tool to Click-drag over all the frame 1 frames on the layers. This will highlight all the layers. Be careful to click-drag from the get go. If you click then clickdrag you will drag the contents of the frame. Open the properties inspector and select Tween = Shape.

12. Click and drag the frame 17 column on the timeline. There is nothing there but there will be in a second. When all the frame 17's are highlighted, hit your F6 key once to insert keyframes in each of the layers on frame 17.

13. With frame 17 highlighted, and keyframes present there, go to the color mixer. The fill color is Radial rainbow. On the gradient editor, click the first color carrot and then set alpha to 0%.

Click on the second color carot and set alpha to 0%. Do the same for each of the color carrots below the gradient editor.

14. Click back on frame 1 on any layer. Use the arrow tool to Marquee select all of the pie slices on the stage. Select the transform tool. Select the scale option for transform. Hold your shift key down and scale your shapes to a smallish circle in the center.


15. Click-drag in a single motion on Layer 2 from frames 1 to 17 to highlight them all. Then mouse over the layer so you can see the rectangle form beneath the cursor. When you see this, you can drag the selected frames to a new location. Drag the frames to the right 1 frame over.

16. Do the same on layer 3 but drag the content over 2 frames. On layer 4 drag 3 frames. Layer 5 drag 4 frames. Keep going until you have completed the bottom, layer 16. The only layer that has not been moved is the top or first layer.

17. Click-Drag in one motion from layer1 frame 17 straight down to layer 16, frame 17. Hit F6 to insert keyframes on the highlighted frames. The frame on layer 1 will not change. (If your having trouble highlighting the column together, just click on each frame separately in frame 17 and hit F6.)

Click-Drag The frame 18 Column starting at layer2 and drag down to layer 16. Hit F6 to insert keyframes on that column.

Concept:: Our Movie is going to be 17 frames long, with the frames to the right of frame 17 being transported or moved to the blank keyframe prior to the start of the tween on the layer. This will allow us to make a flowing animation for our vortex with no pauses.

18. Click on the frame on layer 2, frame 18. Since it is a keyframe, and the previous frame is a keyframe we can simply clickdrag the frame over to frame 1 an drop it there. For now ignore the incomplete shape tween leftr on frame 18.

19. Click-drag to select the layer 3 frames 18-19. Click drag the frames to over frames 1-2 and drop. These frames will fill 1 and two. For now, ignore the incomplete shape tween left on frame 18-19.

20. Click-drag to select the layer 4 frames 18-20. Click drag the frames to over frames 1-3 and drop. These frames will fill 1 and two. For now, ignore the incomplete shape tween left on frame 18-20.

21. Click-drag to select the layer 5 frames 18-21. Click drag the frames to over frames 1-4 and drop. These frames will fill 1 and two. For now, ignore the incomplete shape tween left on frame 18-21.

Continue working down the layers, moving the frames from 18 up to the beginning of the animation. Leave the residual incomplete shape tween frames at the end of these layers for the next step.

22. Click drag in the single motion to highlight all the incomplete shape tweens from frame 18 to 32 or higher.
23. Right click and select Remove Frames from the menu.

24. Your project file is ready to publish.

  • Click File=> save
  • Click File Publish. Your movie and html files should be in the same folder as the .fla you saved.
Source : http://www.developingwebs.net/flash/vortex.php

Related Post | Artikel Terkait



Get this widget [ Here ]

No comments:

Post a Comment