2. Adobe Creative Cloud
- US$49.99/US$19.99 vs US$19.99 per month
- For the teams: US$69.99 per month
***************************************************
http://www.adobe.com/products/creativecloud/bu
ying-guide.html
3. Cheap alternative
- Buy existing retail adobe products(Up to CS5 or
6) outside
- Or use free online editor
- http://pixlr.com/ (Photoshop)
- http://htmleditor.in/index.html (Dreamweaver)
- Flash?????
4. Recap
- Viewing other windows panel
- Shortcut keys (Q for Free Transformation)
- Pivot Point
- Subselection Tool
- Handler and line
- Creating additional Handler
- Stroke and Fill
- Flash as a Vector Art
- Window Select
- Duplicating (Hold Alt and select)
- Zooming in and out(Z, Alt + Z)
- Panning (Hold Space)
- Paint Bucket
5. Today's Workshop Overview
- More Hands-on Exercise, less talk
- "On-Job-Training"
- Any difficulties, feel free to stop and ask me
- In other words, we will be going thru the
exercises together
- I will be explaining some of the concepts along
the way as we progress
7. 1. Set Document Properties
- Choose Modify > Document from the menu or
press Ctrl+J.
- Type 400 px in the Width field to set the width of
the Stage to 400 pixels.
- Type 400 px in the Height field to set the height
of the Stage to 400 pixels.
- Click the Background Color box and then
choose white as the background color.
- Type 12 in the Frame Rate field.
- Choose Pixels from the drop-down menu in the
Ruler Units field.
- Click OK. Flash sets the document properties.
8. 2. Display a Grid
- Choose View > Grid > Edit Grid from the menu or press
Ctrl+Alt+G. The Grid dialog box appears.
- Click the Color box and then choose gray to make the grid
lines gray.
- Choose Show Grid to cause the grid to appear.
- Choose Snap to Grid to cause the edges of your drawing
to align with the grid lines.
- Set the Horizontal field to 20 px to separate horizontal
lines by 20 pixels.
- Set the Vertical field to 20 px to separate vertical lines by
20 pixels.
- Set the Snap Accuracy to Normal to tell Flash how close
your drawing has to be to the gridline for Flash to use the
gridline to determine where to place the drawing.
- Click OK. Flash creates a grid on the Stage.
9. 3. Draw a Rectangle
- Choose the Rectangle tool
- Activate the Property inspector (click the Properties tab).
- Click the Stroke Color box and then click the color white to
choose white as your stroke color.
- Click the Fill Color box and then click the color blue to
choose blue as your fill color.
- Type 3.00 in the Stroke Height field to set the line
thickness.
- Choose Solid from the drop-down menu in the Style field to
select the Stroke line style.
- Under Rectangle Options, type 10.00 in the first Rectangle
Corners Radius field to set the corner radius. Flash sets the
values for the other Rectangle Corners Radius fields to the
same value.
- Click on the Stage and drag diagonally to draw the
rectangle. Make the rectangle two grid boxes high and five
grid boxes wide.
10.
11. 4. Create a Symbol
- Choose the Selection tool .
- Click and drag around the rectangle you drew
to select it.
- Choose Modify > Convert to Symbol from the
menu or press F8. The Convert to Symbol dialog
box appears.
- Type Start Button in the Name field.
- Choose Button as the type.
- Click OK.
- Activate the Library, which is located to the right
of the Properties tab. The Library panel opens.
You should see the Start Button in the Library
panel.
12. 5. Create a Gradient
- Choose Window > Color from the menu or
press Shift+F9. The Color panel appears.
- Choose Linear in the Type field.
- Near the bottom of the panel, double-click on
the first Edit Gradient Range icon . Color boxes
appear.
13. - Click the color blue to select blue.
- Double-click the second Edit Gradient Range
icon and then click the color white to select white.
- Click and drag the second Fill Gradient Range icon to the
three-quarter point on the Gradient Range slider to increase the
amount of white in your gradient.
- Click the Menu Options button to open the menu.
- Click Add Swatch.
- Close the Color panel. Flash adds the gradient you created to the
color box.
14. 6. Use a Gradient
- Choose the Rectangle tool .
- Activate the Property inspector.
- Click the Stroke color box and then click No Color so
the stroke will not have a color.
- Click the Fill color box and then click the gradient you
created.
- Type 0 in the Rectangle Corners Radius field .
- Click the Stage and drag diagonally to create a
rectangle.
15.
16. 7. Create a Graphic Symbol
- Choose the Selection tool.
- Click and drag to create a rectangle around the
drawing to select it.
- Choose Modify > Convert to Symbol from the
menu. The Convert to Symbol dialog box
appears.
- Type Sky in the Name field.
- Choose Graphic as the Type.
- Click OK.
17. 8. Create the Tree Trunk
- Choose View > Grid > Edit Grid from the menu.
- Deselect Snap to Grid. This will enable you to draw freely.
- Click OK.
- Choose the Pencil tool .
- Activate the Property inspector.
- Click the Stroke color box and then choose brown as the
stroke color.
- On the Modifier panel, if Object Drawing is selected,
deselect it.
- On the Modifier panel, choose the Smooth option. This
option rounds the corners of your drawing.
18. - Draw the tree trunk. Make sure the starting point
and the ending point connect.
19. - Choose the Paint Bucket tool.
- Click the Fill color box in the Property inspector
- and then choose brown as the fill color.
- Click inside the trunk to fill the trunk with color.
20. 9. Create the Treetop
- Choose the Pencil tool .
- Click the Stroke color box and then choose
green as the stroke color.
- Draw a treetop like the one shown here.
21. - Choose the Paint Bucket tool .
- Click the Fill color box in the Property inspector
and then choose green as the fill color.
- Click inside the treetop to fill the treetop with
color.
22. 10. Create the Tree
- Choose the Selection tool.
- Double-click the treetop fill. Double-clicking the
treetop fill selects both the treetop stroke and the
treetop fill.
- Drag the treetop over the tree trunk.
23. 11. Group Objects
- Choose the Selection tool.
- Click and drag to create a rectangle around the tree.
This selects the tree.
- Choose Modify > Group from the menu or press Ctrl+
G to make the treetop and the tree trunk a single object.
- Choose Modify > Convert to Symbol from the menu.
The Convert to Symbol dialog box appears.
- Type Tree in the Name field.
- Choose Graphic as the type.
- Click OK. Flash places a copy of the tree in the
Library.
- Press the Delete key to remove the tree from the
Stage.
24. 12. Create a Hubcap
- Choose View > Snapping > Snap to Grid from the
menu.
- Choose the Oval tool.
- Activate the Property inspector.
- Click the Stroke color box and then choose gray as
the stroke color.
- Click the Fill color box and then choose gray as the fill
color.
- Click in the upper corner of a square on the grid, hold
down the Shift key, and drag diagonally to draw a circle.
Holding down the Shift key as you drag creates a
perfect circle when you are using the Oval tool.
25. 13. Convert the Hubcap to a Symbol
- Double-click the circle's fill. Double-clicking the
circle's fill selects the fill and the stroke.
- Choose Modify > Convert to Symbol from the
menu. The Convert to Symbol dialog box
appears.
- Type Cap in the Name field.
- Choose Graphic as the type.
- Click OK. Flash places a copy of the hubcap in
the Library.
- Press the Delete key to remove the hubcap
from the Stage.
26. 14. Draw the Tires
- Choose the Oval tool.
- Activate the Property inspector.
- Click the Stroke color box and then choose black as
the stroke color.
- Click the Fill color box and then choose black as the
fill color.
- If selected, deselect Object Drawing mode .
- Click and drag while holding down the Shift key to
draw the two tires as shown in the graphic.
27. 15. Draw the Chassis
- Choose the Line tool.
- Activate the Property inspector.
- Choose Solid from the Style drop-down menu.
- Type 3.00 in the Stroke height field to set the
line thickness.
- Draw the chassis as shown in this graphic. To
draw a perfectly straight line, hold down the Shift
key as you draw with the Line tool.
28. 16. Fill the Car with the Color Red
- Choose the Paint Bucket tool .
- Click the Fill color box and then choose red as
the fill color.
- Click inside the lines that outline the car to
apply the fill color.
29. 17. Fill the Headlights with the Color
White
- Choose the Paint Bucket tool.
- Click the Fill color box and then choose white
as the fill color.
- Click inside the headlight area.
30. 18. Add the Hubcaps
- Choose the Selection tool .
- Activate the Library panel.
- Click the icon next to Cap and drag an instance
of the Cap to the center of a tire. When you drag
a copy of an object from the Library onto the
Stage, each copy of the object is called an
instance.
31. - Click the icon next to Cap again and drag an
instance to the center of the other tire.
- Use the arrow keys on the keyboard to adjust
the location of the hubcaps. Your car should look
like the one shown here.
32. 19. Group the Car
- Choose the Selection tool .
- Create a rectangle around the car to select the
car.
- Choose Modify > Group from the menu. Flash
groups the car.
33. 20. Convert the Car to a Symbol
- Choose Modify > Convert to Symbol from the
menu. The Convert to Symbol dialog box
appears.
- Type Car in the Name field.
- Choose Graphic as the type.
- Click OK. Flash stores the graphic in the
Library.
- Press Delete to remove the car from the Stage.
34. 21. Import an Image
- The Working Files are at
DesktopSaints_HuaWorkshop
- Place the driver.wmf file and the shorthrn.wav file in a
folder. You will use the shorthrn.wav file later.
- Choose File > Import > Import to Stage from the menu.
The Import dialog box appears.
- Find and select driver.wmf and then click Open. -
Flash places driver.wmf on the Stage. The image is
ungrouped.
35. - Choose the Selection tool .
- Create a rectangle around the driver to select
the driver.
- Choose Modify > Group from the menu. Flash
groups the driver.
36. 22. Convert the Driver to a Symbol
- Choose Modify > Convert to Symbol from the
menu. The Convert to Symbol dialog box
appears.
- Type Driver in the Name field.
- Choose Graphic as the type.
- Click OK. Flash stores the graphic in the
Library.
37. 23. Put the Driver in the Car
- Drag an instance of the car from the Library onto the Stage.
- Place the car over the driver.
- Choose the Selection tool.
- Draw a rectangle around the car and driver to select them both.
- Choose Modify > Convert to Symbol from the menu. The
Convert to Symbol dialog box appears.
- Type Car and Driver in the Name field.
- Choose Graphic as the type.
- Click OK. Flash stores the graphic in the Library.
- Press the Delete key to remove the car and driver from the
Stage.
38. 24. Draw the Buildings
- Choose the Line tool.
- Activate the Property inspector.
- Choose Solid from the Style drop-down menu.
- Type 3.00 in the Stroke height field to set the line thickness.
- Move to the Stage and draw buildings as shown in the
illustration. Remember: To draw a perfectly straight line, hold
down the Shift key as you draw with the Line tool.
40. 26. Rename a Layer
- Change the layer name by double-clicking the
current layer name and then typing the new layer
name, Buildings
41. 27. Create a new Layer for the Sky
- Choose Insert > Timeline > Layer from the
menu to create a new layer above the active
layer.
- Choose Modify > Timeline > Layer Properties
from the menu. The Layer Properties dialog box
appears.
- Type Sky in the Name field.
- Click OK. Flash renames the layer Sky.
42. 28. Create the Sky
- Make sure Sky is the active layer. When a layer
is active, it is highlighted and designated by a
pencil icon . You click on the layer name to make
a layer active.
- Choose the Selection tool .
- Activate the Library panel.
- Click the icon next to Sky and drag an instance
of Sky onto the Stage.
43. 29. Rotate an Object
- Click the Sky instance to select it.
- Choose Modify > Transform > Rotate 90 CW
from the menu. Flash rotates the Sky instance 90
degrees clockwise.
44. 30. Resize an Object
- Activate the Property inspector.
- Choose the Selection tool.
- Click the Sky instance to select it.
- Click the Lock Width and Height icon in the Property
inspector to deselect it. When the Lock Width and Height
option is selected , adjusting the width changes the height
proportionally, and vice versa.
45. - Set the W field to 400. That is the width of the
stage.
- Set the H field to 240.
- Click and drag until the sky is over the buildings.
46. 31. Change the Order of Layers
- Click the Sky layer on the Timeline.
- Drag the Sky layer downward to place it below the Buildings
layer. The sky appears behind the buildings.
49. 33. Take an Object out of the Library
- Activate the Library panel.
- Click the icon next to Tree and drag a tree onto
the Stage.
50. 34. Use the Free Transform Tool(Q)
- Choose the Free Transform tool . Handles
appear around the tree.
- Choose the Scale Modifier .
- Drag a corner handle until the tree is the
appropriate size.
- Use the Selection tool to place the tree in front
of a building.
- Drag another tree onto the Stage and repeat
the process.
51. 35. Working with frames
A) Extend the Sky Layer
- Click in Frame 60 of the Sky layer.
- Choose Insert > Timeline > Frame from the menu.
B) Extend the Buildings Layer
- Click in Frame 60 of the Buildings layer.
- Choose Insert > Timeline > Frame from the menu.
C) Extend the Trees Layer
- Click in Frame 60 of the Trees layer.
- Choose Insert > Timeline > Frame from the menu.
52. 36. Add the Car and Driver to the
Stage
- Create a new layer, Car, above the tree layer
- Click in the first frame of the Car layer.
- Activate the Library panel.
- Click the icon next to Car and Driver and drag a
copy of Car and Driver onto the Stage.
- Choose the Free Transform tool .
- Choose the Scale modifier .
- Click and drag a corner handle until the car is
the appropriate size. Corner handles resize the
selected object proportionally.
53. 37. Create a Tween
- Choose the Selection tool.
- Click and drag the car to the right side of the Stage as shown
here.
- Choose Insert > Motion Tween from the menu.
- Click in Frame 60 of the Car layer to select it.
- Hold down the Shift key and drag the car to the other side of the
Stage. Flash creates a motion tween. Holding down the Shift key
ensures that the car moves in a straight line.
54. Choose Control > Play from the menu or press
Enter to play the movie. The car moves across the
Stage.
55. 38. Adding Sound
A) Import the Sound
- Choose File > Import > Import to Library from the menu.
- Find and select shorthrn.wav and then click Open. The file
shorthrm.wav appears in the Library.
B) Create and Name a New Layer
- Click the Car layer name to make the Car layer the active
layer.
- Choose Insert > Timeline> Layer from the menu to create a
new layer. The - new layer appears above the Car layer.
- Choose Modify > Timeline > Layer Properties from the
menu and type Horn in the Name field.
- Click OK. Flash names the layer Horn.
56. C) Add Sound
- Click in Frame 30 on the Horn layer.
- Choose Insert > Timeline > Keyframe from the menu to
make Frame 30 a keyframe. You use a keyframe when a new
symbol or instance appears on the Timeline.
- Activate the Library.
- Drag shorthrn.wav from the Library onto the Stage. You will
not be able to see it on the Stage.
- Click in Frame 30.
- Activate the Property inspector.
- Choose Event from the drop-down menu in the Sync field.
This causes your sound to begin playing in Frame 30 and
continue playing until it is finished.
- Choose Control > Play from the menu to play the movie.
You hear the horn.
57. Take a break or breather....
Up next.....
Actionscript, buttons, publishing and MORE!
