เรอง การสรางชนงานดวยเครองมอของ Flash CS5

หนาตางของโปรแกรม Flash CS5 โปรแกรม Flash ประกอบไปดวยหนาตางท างาน (Panel) ทมเครองมอส าหรบปรบแตงชนงานชวยสรางชนงานใหไดตามตองการ เนองจาก Flash จะมหลายหนาตางมาก ในทนจะขอแนะน าเฉพาะหนาตางทจ าเปนและสงทนาสนใจ ดงรป

แสดงรายละเอยดของหนาตางโปรแกรม Flash CS5

Menu Bar

Menu Bar คอ เมนทใชแสดงชดค าสงทงหมดโปรแกรม Flash โดยคลกเลอกเมนค าสง จะ ปรากฏค าสงยอยใหเลอกตามตองการ

สเตจ (Stage)

แทบไฟลเอกสาร

ไทมไลน

พาเนลตางๆ เมนบาร ทลพาเนล

14

หนาตาง Timeline

ประกอบไปดวยเลเยอรและเฟรม (ชองเลกๆ เรยงกน) ทจะชวยในการกบชนงานสวนตางๆ ใหแยกกนไดอยางอสระ การแสดงภาพเคลอนไหวจะแสดงทละเฟรมตรงต าแหนงทหวอาน (Play Head) วงไปถง นอกจากนยงมสวนของปมแสดงเฟรมยอนหลงทเรยกวา Onion Skin อยทดานลาง ของ Timeline

รปภาพแสดงจอภาพของ Timeline Panel

Layer เลเยอรเปรยบเสมอนแผนใสทสามารถวาดภาพ หรอวางออบเจกตลงไป เพอสรางภาพเคลอนไหวตางๆ ซงเลเยอรแตละแผนจะแยกเปนอสระตอกน สามารถเปลยนต าแหนงการซอนทบกนของแตละเลเยอรได โดยจะมผลใหภาพทอยในเลเยอรบน Stage เปลยนต าแหนงการซอนทบกนดวย

Timeline เปนสวนทใชส าหรบก าหนดการเคลอนไหวของภาพวาดตางๆ โดยภายใน Timeline ยงประกอบไปดวยตารางเลก ๆ และมแถบบอกจ านวนเฟรม (Frame) ดานบน รวมทงมเสนสแดงทเรยกวา “Playhead” ทใชส าหรบบอกต าแหนงวาขณะนก าลงท างานอย ณ ทใด

เลเยอร

เพมเลเยอร

Onion Skin Framerate

คยเฟรม

เฟรม หวอาน

15

หนาตาง Controller

เมอสรางเสรจแลว หรอเมอตองการทดสอบผลงานและภาพเคลอนไหวทเกดขน จะท าการคลก ปมบนหนาตาง Controller น จะแสดงผลเหมอนกบการกด <Alt+Enter> ทแปนคยบอรด

รปแสดง Controller Toolbar

ตารางแสดงรายละเอยดของ Controller Toolbar ไอคอน ชอเรยก การใชงาน

Stop ใหหยดการแสดงมฟว

Go To first frame ใหยอนกลบไปเฟรมแรก เพอเรมตนการแสดงมฟวใหม

Step Back one frame ใหยอนกลบไปเฟรมกอนหนาทละขนตอน

Play ใหเรมตนแสดงมฟว

Step Forward one frame

ใหเดนหนาไปเฟรมตอไปทละขนตอน

Go to Last frame ใหไปยงเฟรมสดทายของมฟว

หนาตางไลบราร (Library Panel) เมอสรางชนงานขนมาแลวท าการแปลงเปนซมโบล หรอการน าภาพจากขางนอกโปรแกรมเขา

มาใน Flash ภาพเหลานนจะบรรจอยในหนาตางไลบรารน และสามารถเรยกหนาตางอยางรวดเรวดวยคยลด <Ctrl+L>

16

กลองเครองมอ (Toolbox)

Toolbox คอ กลองทใชส าหรบบรรจเครองมอวาดภาพตางๆ เชน เครองมอสรางรปสเหลยม เครองมอสรางขอความ เปนตน ซงภายใน Toolbox จะถกแบงออกเปน 4 กลมคอ Tool , View , Colors และ Option ตารางแสดงไอคอนของเครองมอใน Toolbox ไอคอน ชอเรยน หนาทของปมเครองมอ

Arrow Tool ใชส าหรบเลอกออบเจกต (Object) โดยการคลก หรอคลกแลวลากใหเปนบรเวณสเหลยมรอบออบเจกตทตองการเลอก

Subselection Tool ใชส าหรบเลอกจดการกบออบเจกตเฉพาะบางสวน

Free Transform ใชส าหรบปรบแตงรปทรงของออบเจกตในแบบตางๆ อยางอสระ

Gradient Transform ปรบแนวสเกรเดยนท

3D Rotation tool การปรบแตงรปทรงออบเจกตแบบ 3 มต

Lasso Tool ใชส าหรบเลอกออบเจกต โดยการวาดเสนแบบอสระรอบออบเจกต

ตวอยางซมโบล

ชอซมโบล

เพมซมโบลใหม

17

Pen วาดรปทรง เสนตรง เสนโคง

Add Anchor Point เพมจดแองเคอร

Delete Anchor Point ลบจดแองเคอร

Convert Anchor Point ปรบจดแองเคอร

Line Tool ใชส าหรบวาดเสนตรง

Rectangle Tool ใชส าหรบวาดรปสเหลยม

Oval Tool ใชส าหรบวาดวงกลม หรอวงร

Rectangle Primitive วาดสเหลยมทปรบแตงมมไดภายหลง

Oval Primitive วาดวงกลมหรอวงรทปรบแตงรปแบบไดภายหลง

PolyStar วาดรปหลายเหลยมและรปดาว

Text ใชส าหรบสรางตวอกษร หรอขอความ

Brush Tool ใชส าหรบระบายสคลายพกน หรอแปลงทาส

Pencil Tool ใชส าหรบวาดลายเสนแบบอสระ

Ink Bottle Tool ใชส าหรบเปลยนสเสนขอบ

Eyedropper Tool ใชส าหรบคดลอกลกษณะของเสน หรอสพนภายในของสวนทถกคลกเพอน าไปใสใหเสน หรอรปทรงอน

Paint Bucket Tool ส าหรบเตมสพนภายในของออบเจกต

Eraser Tool ใชส าหรบลบเสน หรอสพนภายใน

Hand Tool ส าหรบเคลอนยายจอภาพของ Stage ไปยงต าแหนงตางๆ

Zoom Tool ใชส าหรบยอ หรอขยาย Stage

Stroke Color ใชส าหรบเลอกสเสนขอบของออบเจกต

Fill Color ใชส าหรบเลอกสพนภายในของออบเจกต

Default Color ใชส าหรบเลอกสพนผว และสเสนเปนสมาตรฐานคอ สขาว- ด า

No Color คลกเลอกเมอไมตองการก าหนดสใหกบเสน หรอสพนออบเจกต

Swap Colors Tool ใชสลบสระหวางสพนท กบสเสนขอบ ก าหนดสทเลอกไวกอนหนาของออบเจกต

การซอนเครองมอ และการแสดงชดเครองมอ (Toolbox)

18

โดยปกตชดเครองมอ Toolbox จะปรากฏอยทดานซายมอสดของจอภาพ แตผใชสามารถก าหนดใหซอนหรอแสดงชดเครองมอ Toolbox ไดตามตองการ ดงน

- การซอนชดเครองมอ คลกเลอกเมน Window > Tools เพอท าใหเครองหมาย หนาตวเลอก Tools หายไปเพอซอนชดเครองมอ

- การแสดงชดเครองมอ คลกเลอกเมน Window > Tools ซ าอกครงเพอท าใหปรากฏเครองหมาย หนาตวเลอก Tools

หนาตาง Action Script

หนาตางทบรรจชดค าสงทจะจดการกบการแสดงของรปภาพ หรอภาพเคลอนไหวทจะเกดขน กบเรองราวทงหมดหรอบางสวน นอกจากนหนาตาง Actions ยงสามารถตรวจสอบการท างานของโคดตางๆ ในไฟลงานได

การแบงหมวดหมในหนาตาง Actions ชวยใหการเขยนโปรแกรมสะดวกขน

หนาตาง Properties

ใชส าหรบปรบแตงสสน และปรบเปลยนเครองมอวาดรปตางๆ หรอตรวจสอบคณสมบตของรปภาพจะสะดวกมากหากเปดหนาตาง Properties ขนมาดวยคยลด<Ctrl+F3>

Action Script Group

Action List

ประเภทของซมโบล

ปรบเอฟเฟกตส

19

พนทท างาน ( Working Area : Stage)

Stage เปนพนทส าหรบใชในการท างาน หรอจดวางออบเจกตตางๆ ทตองการใหปรากฏใน ไฟลเอกสาร โดยรปวาดทสรางจากชดเครองมอหลกหรอสงตางๆ ทวางบน Stage จะเรยกวา ออบเจกต ซงผใชสามารถเปลยนสพนหลง ขนาด หนวยไมบรรทด หรออนๆ ไดตามตองการ โดยคลกเลอกเมน Modify > Document จะปรากฏจอภาพ

รายละเอยดบนจอภาพ Document Properties ประกอบดวย Dimension ก าหนดขนาดความกวาง และความสงของ Stage ปกตโปรแกรมจะ

ก าหนดคาเรมตองขนาด Stage เทากบ 550 x 400 Pixel สามารถก าหนด ขนาดของ Stage ไดเลกทสด 1x1 Pixel และ ใหญทสด 2880 x 2880 Pixel

Match ก าหนดขนาดของ Stage ตามตวเลอก ดงน * ปม Printer ขนาดของ Stage เทากบขนาดกระดาษปกตทเครองพมพสามารถพมพได * ปม Contents ขนาดของ Stage เทากบรายละเอยดทแสดงในไฟลเอกสาร * ปม Default ขนาดของ Stage เทากบคาเรมตน คอ 500 x 400 Pixel Background Color ก าหนดสฉากหลงของ Stage Fame Rate ก าหนดจ านวนเฟรมทตองการแสดงภายใน 1 วนาท Ruler Units ก าหนดหนวยของ Ruler ปม Make Default เปลยนคาทก าหนดใหเปนคาเรมตนของโปรแกรม

20

การยอ หรอขยาย Stage การเปลยนมมมองของจอภาพ Stage โดยการยอ หรอ ขยายจอภาพ Stage เพอความสะดวกในการสรางไฟลเอกสาร Flash สามารถท าได ดงน คลกปมเครองมอ Zoom ทอยในสวนของชดเครองมอ View จากนนคลกเลอกปมเครองมอ Enlarge เพอขยายขนาด หรอคลกปมเครองมอ Reduce เพอยอขนาดจาก ชดเครองมอ Options

จอภาพแสดงปมเครองมอ Zoom ในจอภาพ View และปมเครองมอยอยในจอภาพ Options

คลกเลอกเมน View > Zoom In / Zoom Out / Magnification > เลอกขนาดจอภาพทตองการแสดง

Zoom

ยอขยายขนาดจอภาพ

ขยายขนาดจอภาพ

แสดงจอภาพ Stage ทงหมด

แสดงออบเจกตทงหมดบน Stage

21

จอภาพแสดงการใชค าสง / ขยายจากเมน View คลกปม ทอยดานขวามอของแถบเครองมอ Edit Symbol จะปรากฏจอภาพยอยใหเลอกขนาดจอภาพทตองการแสดง

จอภาพแสดงการใชค าสงยอ / ขยาย จากแถบเครองมอ

Edit Symbol

หนาตาง Scene

ในหนงมฟวอาจจะประกอบไปดวยหลาย Scene กได สามารถจดการ Scene เหลานนใน หนาตางScene ได

กรณทมฟวมหลาย Scene สามารถจดการไดในหนาตาง Scene

การจดการกบไฟลเอกสาร Flash

เมอเขาสโปรแกรม Flash CS5 โปรแกรมจะใหเลอกสรางไฟลเอกสารใหม เมอสราง ไฟลเอกสาร Flash ขนมาใหมแลว ผเรยนสามารถก าหนดรปแบบของไฟลเอกสาร Flash ใหมได เชน ก าหนดขนาด อตราการแสดงตอเฟรม (Framerate) สพน และคณสมบตอนๆ ไดทจอภาพของ Document Properties นอกจากนเมอผใชตองการสรางไฟลเอกสารใหมโดยใชค าสง File > New.. โปรแกรมจะใหเลอกสรางไฟลเอกสารใหม โดยตองการใหไฟลเอกสารใหมซอนทบกบไฟลเอกสารเดม หรอสรางไฟลเอกสารใหมจาก Template

การสรางไฟลเอกสาร Flash ใหม

22

เมอผใชตองการสรางไฟลเอกสารใหมท าไดโดยคลกเมน File > New.. จะปรากฏจอภาพ New Document ใหเลอกชนดไฟลเอกสาร เมอสรางเสรจแลวไฟลเอกสารใหมจะซอนทบกบไฟลเอกสารเดม

รปจอภาพแสดงการสรางไฟลเอกสาร Flash

การสรางไฟลเอกสาร flash โดยใช Templates

Template คอ แบบส าเรจรปทโปรแกรมสรางขนมา เพอใชเปนตนแบบของการสรางไฟล เอกสาร Flash เพอใหสามารถสราง Movie Flash ไดอยางรวดเรว และงายดายมากยงขน ตวอยาง การสรางไฟลเอกสาร Flash โดยใช Template

1. เปดโปรแกรม Flash CS5 จะปรากฏจอภาพ ใหเลอกรปแบบของ Template ทตองการ

จอภาพแสดงใหเลอกสราง หรอเปดเอกสารเมอเรยนโปรแกรม Flash CS5

23

2. เมอเลอกรปแบบของ Template ทตองการแลวจะปรากฏจอภาพ New from Template ในกรณทตองการสรางเอกสาร Template ขนมาใหมให คลกเมน File > New จะปรากฏจอภาพ New from Template

3. คลกเลอกชนดของ Template ทชองรายการ “ Category” และเลอกรายการ Template ทชอง “Templates” โดยสามารถดภาพตวอยางของ Template ทเลอกไดทจอภาพ Preview และดรายละเอยดของ Template ไดใน Description

4. คลกปม OK เพอสรางไฟลเอกสารใหมตามรปของ Template ทเลอก

นอกจากนเมอผใชสรางมฟวแลวตองการบนทกเกบไวเปน Template ของตนเอง เพอ

24

น าไปใชงานตอไป สามารถท าไดโดยเลอกเมน File > Save AS Template ตวอยาง การบนทกไฟลมฟวเกบไวเปน Template

1. สรางมฟว 2. คลกเลอกเมน File > Save As Template

3. ก าหนดชอ Template ทชอง “Name” ก าหนดประเภท Category และก าหนดรายละเอยดท

ชอง “Description” ตามตองการ

4. คลกปม Save โปรแกรมจะสรางและเกบ movie ดงกลาวไวใน Library “Template” ของ Flash CS5ใหโดยอตโนมต

25

5. ผเรยนสามารถดไฟล Template ทสรางเกบไวไดโดยคลกเลอกเมน File > New From Template

การบนทกไฟล

การเขาสโปรแกรม Flash CS5 โปรแกรมจะใหสรางไฟลเอกสาร Flash ขนมาใหม โดยก าหนดชอไฟลวา Untitled-1 และเมอผใชตองการสรางไฟลเอกสารใหม โดยคลกเลอกค าสง File > New โปรแกรมจะก าหนดชอไฟลวา Untitled – 2 โดยเรยงตวเลขตามล าดบการสรางไฟลเอกสารใหมทกครง ชอไฟลเอกสารนจะเปลยนไปตามทผใชก าหนดเมอมการบนทกไฟล โดยเลอกค าสงดงน

ค าสง File > Save ส าหรบการบนทกไฟลครงแรก หรอบนทกเพอปรบปรง ไฟลทไดแกไข

ค าสง File > Save As ส าหรบการบนทกไฟลเอกสารในชอใหม หรอบนทก ไฟลเอกสารในรปแบบของ Flash MX เวอรชนเกา

เมอเลอกค าสงใดค าสงหนงจะปรากฏจอภาพ Save หรอ Save As ซงทงสองจอภาพม ลกษณะคลายดงรป

26

เลอกโฟลเดอรทตองการเกบบนทกไฟล ก าหนดชอไฟลในชอง “File Name” และเลอกเวอรชนไฟลเอกสาร Flash ทตองการบนทกทชอง Save as type โดยปกตโปรแกรมจะบนทกในไฟลในรปแบบ flash CS5 Document (*.Fla) แตผเรยนสามารถเลอกบนทกไฟลเอกสาร flash หรอ flash MX Document (Flash MX เวอรชนเกา) ไดอกดวยจากนนคลกปม Save เพอบนทกไฟลเอกสาร

รปแบบไฟลเอกสาร Flash

รปแบบของไฟลเอกสาร Flash แบงออกเปน 2 แบบคอ Flash Movie (*.fla) เปนการบนทกขอมลในเอกสารเพอเกบไวในรปแบบไฟล

ธรรมดาของโปรแกรม Flash ซงผใชสามารถเปดไฟลเพอแกไข เพมเตม หรอทดสอบการแสดงไดตามตองการไฟลลกษณะนจะมขนาดใหญ และไมสามารถน าไปแสดงไดจรง เปนเหมอนไฟลตนฉบบ

Flash Player หรอ Shockwave Flash (*.swf) เปนการบนทกไฟลเพอน าไปใชงานจรงบน Web Browser ซงไฟลจะมขนาดเลก แตผใชจะไมสามารถแกไขไฟลในลกษณะนได

การสรางชนงานดวยโปรแกรม Flash

การสรางชนงานเปนพนทส าคญส าหรบการสรางภาพนงภาพเคลอนไหว (Animation) การสรางเวบไซต รวมถงการประยกตใชงานอยางอนดวย เพราะเครองมอตางๆ ของโปรแกรม Flash ม

เลอกเวอรชนทตองการบนทก

ก าหนดชอไฟลเอกสาร Flash

เลอกโฟลเดอรทตอง การเกบบนทกไฟล

บนทกไฟล

ยกเลกการบนทกไฟล

27

ประสทธภาพไมนอยไปกวาเครองมอตกแตงทรจกกนด เชน Photoshop, Illustrator และยงมรปแบบเฉพาะตวทไมเหมอนใครใหตดตามดไดจากขอถดไป หลงจากสรางชนงานแลวเราจะท าการเปลยนใหเปนซมโบลซงจะจ าเปนส าหรบการสรางภาพเคลอนไหวและสามารถใชลกเลนของเครองมอใน Flash ไดอยางเตมทตอไปไดอยางสะดวกขน มาดกนวาเครองมอส าหรบการสรางงานดวย Flash มอะไรกนบาง ดงน รปแบบการวาด การวดภาพกราฟกใน Flash แบงออกเปน 2 รปแบบดงน

วาดแบบ Object Drawing

รปทรงทไดจาการวาดแตละครงจะเปนอสระจากกน และเมอมการวางซอนทบกนกไมมผลท าใหออบเจคอนหรอตวเองเปลยนแปลงรปรางในการวาดแบบนใหคณคลกเลอก Object drawing ทออปชนของเครองมอไวกอนลงมอวาด

รปทรงทวาดหรอน ามาวางซอนกน จะเปนอสระจากกน

วาดแบบ Merge Drawing

รปทรงนไดจากการวาดจะมผลตอรปทรงอน โดยเมอมการวาดหรอน าไปวางซอนทบกนจะท าใหคณสมบตของพนภาพหรอเสนแปรเปลยนไป ในการวาดแบบนใหคณยกเลกการเลอก Object Drawing ทออปชนของเครองมอ กอนลงมอวาด การซอนทบของรปทรงในแบบ Merge Drawing ในการวาดแบบ Merge Drawing เมอวาดรปทรงใดๆ ทบรปทรงอนทอยดานลาง (หรอยายรปทรงทวาดดวยวนมาซอนทกน) จะมผลกบรปทรงทงสอง โดยแยกไดเปนกรณตางๆ ดงน

รปทรงทงสองไมมเสนและมสพนเปนสเดยวกน จะท าใหรปทรงทงหมดถกรวมเปนชนเดยวกน

รปทรงทงสองไมมเสนและมสพนทไมใชส

28

เดยวกน จะท าใหรปทรงทงสองแยกออกจากกน โดยทรปดานบนยงเหมอนเดมแตรปดานลางจะถกตดและสวนทถกทบจะหายไป

รปทรงทงสองหรอชนใดชนหนงมเสน (ไมวาพนและเสนจะเปนสเดยวกนหรอคนละส) จะท าใหรปทรงทงสองแยกออกจากกน โดยทรปทรงดานบนยงเหมอนเดมแตรปดานลางจะถกตด และหากดบเบลคลกเลอกทรปทรงใดกจะไดเสนกรอบตามรปทรงนน ดงภาพ

วาดรปทรงซอนกน

ดบเบลคลกบนรปสเขยว ดบเบลคลกบนรปสฟา แลวคลกลากออกมา แลวคลกลากออกมา

รปทรงทม เฉพาะ เ สน ไม วาจะ เ ปนสเดยวกนหรอไมกตาม เสนจะสามารถแยกสวนออกตามมมหรอตรงจดทเสนตดกนได

ลากเสนตรง (Line Tool)

เสนตรงเปนพนฐานของรปทรงตางๆ การลากเสนตรงดวยเครองมอของโปรแกรม Flash จะ คลายกบเครองมอในโปรแกรมตกแตงภาพทวไป แตจะมความสามารถบางอยางทแตกตางกนไป ดงตวอยางตอไปน

1. คลกปม Line Tool ททลบอกซ 2. คลกเลอกสของเสนจากชอง Stroke Color 3. คลกเมาสทจดเรมตนบนสเตจ (พนทวาง) คลกคางไวแลวลากเมาสก าหนดความยาวและ

ทศทางของเสนตรง แลวปลอยเมาสกจะไดเสนตรงตามทตองการ หรอจะลองลากเมาสสรางเสนตรงอนๆ ไดอกตามตองการ รวมถงการเปลยนสสนทหลากหลายใหเกดความคลองตวมากขน

29

4. หากตองการวาดใหเปนรปตางๆ ใหดรากสเมาสลากจนกลายเปนรปทตองการ ซง Snap to Objects (เปนรปวงกลมทปรากฏพรอมเสนทวาด) จะชวยท าใหขณะทวาดอยนน มมมองเสนจะสามารถชนกนและกลายเปนเสนทตอเนองกนโดยอตโนมต

ปรบเปลยนแกไขเสนระดบพนฐาน

เสนทไดสรางขนมาใหมรปรางตางๆ นนสามารถปรบเปลยนแกไขในภายหลงได ไมวาจะเปน ส ขนาด รปรางของเสน ซงเมอตองการปรบเปลยนคาตางๆ ใหท าการเปด Properties Panel ขนมาเทานน กสามารถก าหนดคาตางๆ ไดตามตองการ

1. คลกปม Arrow Tool ททลบอกซ และดรากสเมาสคลมเลอกออบเจกต 2. คลกเมน Window เลอกค าสง Properties ใหปรากฏเครองหมายถก 3. คลกเลอกสของเสนจากชอง Stroke Color 4. คลกเลอกความหมายของเสนจากชอง Thickness

ดรากสเมาสจนกลายเปนรปทตองการ 4 ดรากสเมาสลาก 3

คลกเลอกสของเสน

1

2

30

5. คลกเลอกรปแบบของเสนจากชอง Type 6. คลกเมาสทพนงาน 1 ครง จากน นเสนทเลอกไวจะมส ความหนา และรปแบบ

เปลยนไปตามคาทก าหนด

ปรบเปลยนแกไขระดบสง ส าหรบวธการเปลยนแปลงแกไขเสนนน ยงสามารถก าหนดรปแบบตางๆ เพมเตมขนไดอก

เชน หากเปนเสนประกสามารถก าหนดวาตองการใหความถของระยะหางระหวางเสนประแตละเสนนน มระยะความหางมากนอยเทาไรมความเขมจางเทาไร เปนตน ซงคาตางๆ ทมใหก าหนดนนจะขนอยกบรปรางลกษณะของเสนแตละรปแบบทไดเลอกไว

1. คลกปม ท Properties Panel จะปรากฏไดอะลอกบอกซ Stoke Style ขนมา

1.คลกป ม Arrow Tool 3.คลกเลอกสของเสน

4. คลกเลอกความหนาของเสน

5. คลกเลอกรปแบบของเสน

6.คลกเมาสทพนงาน 1 ครง

31

2. ก าหนดคาระยะหางของเสนประจากชอง Dot Spacing เมอก าหนดเรยบรอยแลวใหคลกทปม OK

3. จะไดรปภาพเสนประทมระยะความหางมากขนตามคาทก าหนดไว

สรางเสนปากกาดวยเครองมอ Pen Tool

หนาทการท างานของเครองมอ Pen Tool คอ ใชส าหรบวาดเสนตรงและเสนโคงไปในทศทาง ตางๆ เสนทสรางจากเครองมอ Pen Tool จะมความยดหยนตอการท างานมากกวาเสนทสรางจากเครองมอ Line Tool เนองจากปรากฏแฮนเดลขนมาในระหวางท างาน ท าใหสามารถดดเสนใหเปนรปรางตามตองการไดอยางสะดวกขน นอกจากการก าหนดสเสนแลว ออบเจกตทสรางจากเครองมอ Pen Tool ยงสามารถก าหนดใสสใหกบพนได ซงหลงจากการวาดเปนทเรยบรอยแลว

32

1. คลกปม Pen Tool ททลบอกซ 2. คลกเลอกสเสนจากชอง Stroke Color 3. คลกเลอกพนจากชอง Fill Color 4. คลกเมาสทพนทงานจะปรากฏจดแฮนเดลขนมา 5. ดรากสเมาสลากพรอมทงดงแฮนเดลไปในทศทางและต าแหนงทตองการ จากนนจะ

ปรากฏเสนขนมา 6. ใหดรากสเมาสลากจนกลายเปนรปทตองการ เมอต าแหนงเรมตน จดแฮนเดลจะ

เชอมตอเขาหากนเพอเปนการสนสดการสรางออบเจกตและจะปรากฏสพนทก าหนดขนมาใหโดยอตโนมต

ปรบเปลยนแกไขสพน

1. คลกป ม Pen Tool

2.คลกเลอกสเสน 3. คลกเลอกสพน

4. คลกเมาสทพนงาน

5. ดรากสเมาสลากพรอมดง 6.ดรากสเมาสจนกลายเปนรปทตองการ

33

การสรางออบเจกตโดยใชเครองมอ Pen Tool แตกตางจากการสรางโดยใชเครองมอ Line Tool กคอ ออบเจกตทสรางขนมานนสามารถก าหนดใสสพนเตมไดตามตองการ และส าหรบคาอนๆ ไมวาจะเปนการปรบเปลยน สเสน ขนาด รวมถงรปรางลกษณะของเสนทสรางขนจะสามารถก าหนดไดเชนเดม

1. คลกปม Arrow Tool ททลบอกซ และดรากสเมาสคลมเลอกออบเจกต 2. คลกเมน Window > Properties ใหปรากฏเครองหมายถก 3. คลกเลอกพนจากชอง Fill Color 4. คลกเมาสทพนงาน 1 ครง จากนนพนของออบกเจกตทเลอกไวจะมเปลยนแปลงไป

ตามคาทก าหนด

สรางเสนดนสอดวยเครองมอ Pencil Tool

หนาทการท างานของเครองมอ Pencil Tool คอ ใชส าหรบวาดเสนตรงและเสนโคงในรปแบบ

1.คลกป ม Arrow Tool

2.คลกเมน Window > Properties

3.คลกเลอกสพน

4. คลกเมาสทพนงาน 1 ครง

34

อสระ ซงการสรางออบเจกตจากเครองมอ Pencil Tool น จะสามารถก าหนดรปแบบลกษณะของดนสอทใชในการวาด เชน ตองการใหลายเสนทไดเปนเสนตรง เสนโคง หรอเสนอสระยงสามารถก าหนดเปลยนแปลงสเสน สพน ขนาด และรปรางของเสนในภายหลงไดเชนเดยวกนอบเจกตทสรางขนมาจากเครองมออนๆ

1. คลกปม Pencil Tool ททลบอกซ และดรากสเมาสคลมเลอกออบเจกต 2. คลกเลอกลกษณะของดนสอทใชในการวาดท Options จากสวนของ Pencil Mode

เลอก Straighten เสนทไดจะเปนเสนตรง เลอก Smooth เสนทไดจะเปนเสนโคง เลอก Ink เสนทไดจะเปนเสนอสระ

3. ดรากสเมาสวาดเปนรปตางๆ ตามตองการ

การสรางวงกลมดวยเครองมอ Oval Tool

หนาทของเครองมอ Oval Tool คอ ใชส าหรบวาดรปวงกลม และวงร ซงหาก ตองการเปลยนแปลงส เสน สพน ขนาด และรปรางของเสน ในภายหลงกสามารถท าไดเชนเดยวกนออบเจกตทสรางขนมาจากเครองมออนๆ

1. คลกปม Rectangle Tool ททลบอกซคางไว จะปรากฏเครองขนมา ใหเลอกมาท Oval Tool

1. คลกป ม Pencil Tool

2. คลกเลอกลกษณะของดนสอท ใชในการวาด

Straighten Smooth Ink

3. ดรากสเมาสวาดเปนรปตางๆ

35

2. คลกเลอกสเสนของรปวงกลมจากชอง Stroke Color 3. คลกเลอกพนของรปวงกลมจากชอง Fill Color 4. กดปม Shift ทคยบอรดคางไว พรอมทงดรากสเมาสลากทพนงาน จากมมหนงทแยงไปยง

มมหนง จะเกดรปวงกลมขนมา 5. คลกเลอกเปลยนสพนของวงกลมจากชอง Fill Color 6. ดรากสเมาสไปในทศทางและต าแหนงทตองการ โดยไมตองกดปม Shift คางไว จากนนจะ

เกดรปวงรขนมา

1. คลกป ม Oval Tool

2. คลกเลอกสเสนของรปวงกลม

3. คลกเลอกสพนของรปวงกลม

4.กดป ม Shift ทคยบอรดพรอมทงดรากสเมาสลาก

6.คลกดรากสเมาสลาก

5.คลกเลอกเปลยนสพนของวงกลม

36

การดดแปลงรปทรง

เราสามารถดดแปลงรปวงกลมหรอวงร ใหมลกษณะเปนเสยวหรอเจาะเปนรปโดนท โดยก าหนดคาตางๆ บน Property inspector ซงมสวนประกอบดงน

Start angle (คามมเรมตน) และ End angle (มมสดทาย) ใชเพอนการดดแปลงรปทรงใหมลกษณะเปนเสยว ซงมทศทางดงน

คามมเรมตนและมม สดทายเสยววงกลม

เลอกเพอวาดรปทรงแบบปด

รศมของวงกลมวงใน

คามมเรมตนและมม สดทายเสยววงกลม

270

225

180

135

90

45

0,360

315 Start : 90 End : 225

Start : 90 End : 315

Start : 225 End : 90

ตวอยางผลลพธจากคามมตางๆ

37

Inner radius รศมของวงกลมในซงจะเจาะทะลรปวงกลมวงนอกจนกลายเปนรปโดนท โดยมคาเปนเปอรเซนตเมอเทยบกบรศมของวงกลมวงนอก

Close path เลอกออปชนนเพอใหรปทรงเปนแบบปด ซงจะสามารถเตมสพนได แตหากยกเลกออปชนนกจะไดรปทรงแบบเปด ซงจะสามารถเตมสพนได แตหากยกเลกออปชนนกจะไดรปทรงแบบเปดซงมเฉพาะเสนเทานน

Note : นอกจากการคลกลากปรบจดควบคมแลว เราอาจปรบแตงโดยใชวการแกไขคาตางๆ บน Property inspector ได

การสรางสเหลยมดวยเครองมอ Rectangle Tool

หนาทการท างานของเครองมอ Rectangle Tool คอ ใชส าหรบวาดรปสเหลยมผนผา และ สเหลยมจตรส แตคณสมบตทเพมเตมส าหรบการท างานของเครองมอ Rectangle Tool น คอ สามารถก าหนดมมของสเหลยมกอนทจะท าการวาดไดดวย ซงหากก าหนดคาตวเลขมากขนเทาไรสเหลยมทไดกจะมมมทมนมากขนเทานน

1. คลกปม Rectangle Tool ททลบอกซ 2. คลกเลอกสเสนของรปสเหลยมจากชอง Stroke Color 3. คลกเลอกสพนของรปสเหลยมจากชอง Fill Color

ตวอยางผลลพธจากคาเปอรเซนตตางๆ

Inner radius : 50 Inner radius : 25 Start : 90 End : 225

Start : 90 End : 225

แกไขคารศมวงกลมวงใน

38

4. คลกลากในแนวทแยงใหไดขนาดและรปทรงตามตองการ

Note : การวาดรปทรงสเหลยมมมฉากใหก าหนด Conner radius เปนคา 0 pixels เทานนโดยคลกปม

ถาวาดรปดวยวธ Object Drawing หลงจากวาดแลวรปทรงนนจะถกเลอกอยซงถาจะวาดรปท 2 ตอไป กจะไมสามารถก าหนดคณสมบตบน Property inspector ได เพราะจะเปนการไปเปลยนคณสมบตของรปทรงเดม ดงนนกอนวาดรปท 2 จะตองยกเลกการเลอกรปทรงแรก โดยกดคย Esc

1.คลกปม Rectangle Tool

2. เลอกสเสนของรป

3. เลอกสพนของรป

4. คลกลากในแนวทแยงใหไดขนาดรปตามตองการ

ก าหนดคณสมบตของเสนและพน

ก าหนดความโคงของมมตางๆ

39

ก าหนดความโคงของมมตางๆ ในขนตอนการวาด เราสามารถปรบความโคงของแตละมมได โดยก าหนดคารศมมมมโคงบน Property inspector ซงคาบวกจะใหผลเปนมมโคงออก สวนคาลบจะใหผลเปนมมเวาเขา ตวอยางผลลพธจากการก าหนดคารศมมมโคงแบบตางๆ

ปรบแตงรปทรงหลงการวาด

เฉพาะกรณทวาดดวยเครองมอ Rectangle Primitive จะสามารถดดแปลงรปทรงภายหลงได

โดยใชเครองมอ Selection คลกเลอกออบเจค แลวคลกลากปรบจดควบคมแตละมมได ดงน

ตวอยางการปรบแตงรปทรงเพมเตม

ก าหนดรศมมมโคง

คลกเพอลอค หรอยกเลกลอค ในการก าหนดใหทกมมมคาทากน

คลกเพอตงคารศม ทงหมดกลบเปน 0

ปรบความโคงของมมบนขวา

ปรบความโคงของมมลางซาย

ปรบความโคงของมมบนซาย

ปรบความโคงของมมลางขวา

เลอนแถบ เพอปรบคามมโคง

40

สรางตวอกษรดวยเครองมอ Text Tool

หนาทการท างานของเครองมอ Text Tool คอ ใชส าหรบพมพขอความตวอกษร ในลกษณะให ขยายไปตามแนวระยะบรรทดและใหขยายไปในลกษณะเปนพารากราฟ โดยเมอท าการพมพขอความทตองการเรยบรอยแลว ยงสามารถก าหนดรปแบบ ขนาด ส ตวหนา ตวเอยง ลกษณะการจดวาง การจดยอหนา ระยะหางระหวางตวอกษร ระยะหางระหวางขอความแตละแถว ในภายหลงไดอกตามตองการ

1. คลกปม Text Tool ททลบอกซ 2. คลกเลอกสของตวอกษรจากชอง Fill Color 3. คลกเมาสทพนงาน 1 ครง จากนนพมพขอความตามตองการ จะเหนวากลองขอความ

จะมวงกลมเลกๆ อยดานบนขวามอ พรอมกบถกขยายขนาดออกมาในแนวนอนตามจ านวนขอความทก าลงพมพอย

1. คลกป ม Text Tool

2. คลกเลอกสของตวอกษร

3. คลกเมาสทพนงาน 1 ครง จากนนพมพขอความ

41

4. คลกเลอกสของตวอกษรจากชอง Fill Color 5. ดรากสเมาสลากก าหนดขนาดของพารากราฟเปนทรปสเหลยม สามารถสงเกตเหนได

วา กลองขอความจะมสเหลยมเลกๆ อยดานบนขวามอ จากนนใหท าการพมพขอความตามตองการ แตหากพมพขอความจนเกนบรรทดแลว ขอความตอไปจะถกตดขนเปนบรรทดใหมใหโดยอตโนมต

สวนประกอบ Properties ของเครองมอ Text Tool ขอความตวอกษรทไดท าการพมพขนมา สามารถท าการแกไขในภายหลงใหมความแตกตางกนไปตามตองการไดไมวาจะเปนการก าหนดรปแบบ ขนาด ส ตวหนา ตวเอยง ลกษณะการจดวาง การจดยอหนา ระยะหางตวอกษร ระยะหางระหวางขอความแตละแถว ฯลฯ ส าหรบการปรบเปลยนแกไขคาตางๆ นน ใหท าการคลกเมน Window > Properties ใหปรากฏเครองหมายถก และตอไปนเปนสวนประกอบค าสงๆ ทมอยใน Properties ใหปรากฏเครองหมายถก และตอไปนเปนสวนประกอบค าสงตางๆ ทมอยใน Properties ของเครองมอ Text Tool

42

ปรบแตงออปชนตวอกษร โดยปกตแลวขอความทพมพจะมคณสมบตตามรปแบบเดมทเคยใชครงลาสด แตคณสามารถเปลยนออปชนเหลานไดใหมกอนทจะพมพขอความ หรอถาจะปรบแตงขอความทพมพไปแลวจะตองเลอกขอความทตองการเสยกอนแลวจงเปลยนออปชน

เลอกประเภทขอความ

ขนาดของกรอบขอความและต าแหนงของของความ

คลกเลอกแนวขอความ

ก าหนดออปชนตวอกษรและยอหนา

ฟอนตตวอกษร

ระยะหางตวอกษรโดยรวม

รปแบบการแสดงตวอกษร

เปลยนเปนตวยก / หอย ระยะหางระหวางคอกษร

สตวอกษร

ขนาดตวอกษร

43

ปรบแตงออปชนยอหนา เปนการก าหนดลกษณะการจดยอหนา เชน การจดชดขวา, ชดซาย, กงกลาง, จดระยะหางระหวางบรรทด หรอ ตงยอหนาใหมการเยอง เปนตน

ปรบเปลยนแกไขตวอกษรระดบพนฐาน

หลงจากทไดท าความรจกกบสวนประกอบหนาทการท างานของปมเครองมอตางๆ ทอยใน Properties ของเครองมอ Text Tool ไปแลว ตอไปนจะไดเรยนรขนตอนวธการใชเครองมอตาง ๆ พรอมทงผลลพธทไดจากการใชงานปมค าสงเหลานน

1. ดรากสเมาสเลอกหวขอความทตองการจะท าการปรบแกไข 2. คลกเลอกรปแบบตวอกษรทตองการจากชอง Font 3. คลกก าหนดขนาดตวอกษรจากชอง Font size โดยยงก าหนดคามากขนเทาไร ตวอกษร

กจะมขนาดใหญมากขนเทานน 4. คลกเลอกสทตองการจากชอง Text Fill Color

จดใหซายขวาตรงกนทกบรรทด(ยกเวนบรรทดสดทายของยอหนา)

รปแบบการเยองและระยะบรรทด

จดยอหนาชดซาย จดยอหนากงกลาง

จดยอหนาชดขวา

44

1. ดรากสเมาสเลอกขอความ

2.คลกเลอกรปแบบตวอกษร

ขอความทเลอกไวจะมรปแบบตวอกษรเปลยนแปลงไป

ขอความทเลอกไวจะมขนาดตวอกษรเปลยนไป

3.คลกก าหนดขนาดตวอกษร

4.คลกเลอกส

ขอความทเลอกไวจะมสเปลยนแปลงไป

45

5. คลกปม Change direction เพอก าหนดเปลยนทศทางใหตวอกษรวางอยในแนวนอนหรอแนวตง

6. คลกปม Center Justify ขอความตวอกษรทงหมดจะถกวางไวตรงกลางของกลองขอความ

ขอความทเลอกไวจะถกวางในแนวตงทางดานขวา

6.คลกป ม Change direction

46

7. คลกปม Right / Bottom Justify ขอความตวอกษรทงหมดจะถกวางไวชดดานขวาของกลองขอความ

8. คลกปม Full Justify ขอความตวอกษรบรรทดทยาวทสดจะถกขยายขนาดออกจนกระทงเตมกลอง

9. คลกก าหนดระยะหางระหวางตวอกษรจากชอง Letter spacingโดยหากก าหนดตวเลขเปนคาบวกระยะหางระหวางตวอกษรกจะถกเพมมากขน

10. คลกก าหนดต าแหนงตวอกษรจากปม * Normal ตวอกษรจะอยในลกษณะปกตไมคลกเลอกทปมใด * Toggle the Superscript ตวอกษรทเลอกจะถกยกขนเมอคลกทปม * Toggle the Subscript ตวอกษรจะกลายเปนตวหอยเมอคลกทปม

คลกก าหนดระยะหางระหวางตวอกษร

ขอความทงหมดจะมระยะหางระหวางตวอกษรเพมมากขน

47

Font Rendering Method

การเลอกแสดงผลของ Font ตางๆ ใน Flash นน เราสามารถก าหนดใชใหเหมาะสมกบการใชงานแตละประเภททแตกตางกนได

- Use Device Fonts เปนการเลอก Font จากเครองคอมพวเตอรทแสดงผล เพอการประหยดไฟลซงโดยปกตแลว Static Text ทใชใน flash เมอมการแสงผลโปรแกรมจะท าการ Create Outline ใหกลายเปน shape เพอไปแสดงผลทใดกได แตทงนกท าใหขนาดไฟลใหญโตตามไปดวยในกรณทการใช Text มากๆ ดงนนหากวาทานมเนอหาของ Text คอนขางมาก อาจใช Device Fonts ในการลดขนาดไฟลลงได แตทงนขอจ ากดกอยตรงทใช Device Fonts ในการลดขนาดไฟลลงได แตทงนขอจ ากดกอยตรงท Font ทเลอกใช ตองเปน Font มาตรฐาน โดย Flash ไดก าหนด Font ทใชส าหรบ Device ไว 3 รปแบบ คอ

ขอความทเลอกจะถกยกขน

11.คลกก าหนดต าแหนงตวอกษร

48

1. _sans ส าหรบผใช Font ใกลเคยงกบตระกล Helvetica หรอ Arial

2. _serif ส าหรบผทใช Font ใกลเคยงกบตระกล Time Roman

3. _typewriter ส าหรบผทใช Font ใกลเคยงกบตระกล Courier

- Bitmap text (no anti-alias) ใชในกรณทตองการพมพ Text ขนาดเลก เนองจาก Text ทเปนคาเรมตนของ Flash นนจะเปนลกษณะ Anti-Alias ซงหมายถง Text ทมการท าขอบใหฟงเพอไมใหแสดงผลเปนเหลยมแบบ Pixel โดยใหผลสวยงามกบ Text ทคอนขางใหญ แตกลบกนเมอใชกบ Text ทเลก กจะท าใหเบลอ และอานไมรเรอง ดงนนกรณท Text ในงาน Flash คอนขางเลก (12 px ลงไปแลวแตรปแบบของ Font) ควรเลอกใชเปน Bitmap Text

- Anti-Alias for animation จากทกลาวมาขางตน Text ประเภทนใชกบตวหนงสอขนาดทวๆ ไปถงขนาดใหญ แตกรณของ Anti-Alias for animation นนถกออกแบบมาใหใชกบ Text ทจะมการเคลอนท

- Anti-Alias for readability ใชกบ Font ขนาดทวไปถงขนาดใหญเชนเดยวกน แตแสดงผลไดคมชดสวยงามกวาแบบ for animation แตขณะเดยวกนถาน ามาเคลอนไหว กจะไม Smooth เทาแบบ for animation

- Custom anti-alias ส าหรบการตงคา Anti-Alias ดวยตนเอง

URL Link

การพมพ Text ใน flash ทกค านน มคณสมบตพเศษวา สามารถท า Link ไดทนท โดยท า ไฮไลทบรเวณทตองการท า Link จากนนใหใส URL ของเวบไซตใดกได หรอหากเปนเวบไซตของเราเองกสามารถใสชอไฟล html ไดเชนกน

49