Flash Software Workshop Day Two

- Conducted by: Lawrence Zhuang

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/buying-guide.html

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?????

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

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

First Exercise Begins!!!

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.

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.

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.

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.

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.

- 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.

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.

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.

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.

- Draw the tree trunk. Make sure the starting point and the ending point connect.

- 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.

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.

- 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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

- 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.

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.

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.

21. Import an Image- The Working Files are at \Desktop\Saints_Hua\Workshop- 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.

- Choose the Selection tool .- Create a rectangle around the driver to select the driver.- Choose Modify > Group from the menu. Flash groups the driver.

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.

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.

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.

25. Add Color to the Buildings

Just Do It!

26. Rename a Layer

- Change the layer name by double-clicking the current layer name and then typing the new layer

name, Buildings

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.

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.

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.

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.

- 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.

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.

32. Beautify the road

Just Do It!

32. Beautify the road

Just Do It!

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.

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.

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.

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.

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.

Choose Control > Play from the menu or press Enter to play the movie. The car moves across the

Stage.

38. Adding SoundA) 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.

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.

Take a break or breather....

Up next.....

Actionscript, buttons, publishing and MORE!

http://www.baycongroup.com/flashCS4/09_flashCS4.html

Additonal Exercise Materials

http://www.flashvault.net/tutorial.asp?ID=147http://www.video-animation.com/flash_05.shtmlhttp://www.toxiclab.org/tutorial.asp?ID=190http://www.flashfridge.com/tutorial.asp?ID=31http://www.flashpotential.com/2012/09/making-flash-buttons-introduction-to.html