34
เอกสารประกอบการสอน คอมพวเตอรกราฟกประเภทการสรางภาพเคล่อนไหว (Computer Graphics for Animation) แผนการสอนท 2 การใช งานโปรแกรมคอมพวเตอรกราฟกเพ่อการสร างภาพเคล่อนไหว จุดประสงค์การเรยนรู1. นักเรยนสามารถใชงานโปรแกรมสร างภาพเคล่อนไหวเบ องต นได 2. นักเรยนมความรู และความเขาใจสามารถจัดการมุมมองภาพงานได

เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

  • Upload
    others

  • View
    2

  • Download
    0

Embed Size (px)

Citation preview

Page 1: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

เอกสารประกอบการสอน

คอมพวเตอรกราฟกประเภทการสรางภาพเคลอนไหว

(Computer Graphics for Animation)

แผนการสอนท 2

การใชงานโปรแกรมคอมพวเตอรกราฟกเพอการสรางภาพเคลอนไหว

จดประสงคการเรยนร

1. นกเรยนสามารถใชงานโปรแกรมสรางภาพเคลอนไหวเบองตนได

2. นกเรยนมความรและความเขาใจสามารถจดการมมมองภาพงานได

Page 2: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

หองเรยนคอมพวเตอร

เครองคอมพวเตอรทใชในการจดการเรยนการสอนเปนคอมพวเตอรแบบตงโตะ ใช

ระบบปฏบตการ windows (windows XP) ความเรวในการประมวลผลแบบ 4 แกน RAM 2 GB

การดจอแยก จากเมนบอรด หองคอมพวเตอรมเครองส าหรบผเรยนจ านวน 28 เครอง เครอง

สอน 1 เครองซงตอเขากบเครองโปรเจคเตอร

ภาพท 2.1 หองเรยนคอมพวเตอร

ทมา : บนทกภาพจากหองเรยนคอมพวเตอรวทยาลยชางศลป

เมาส (Mouse)

เมาส (Mouse) คอ อปกรณทใชในการควบคมตวชบนจอคอมพวเตอร (pointing

device) เปนอปกรณน าเขาขอมลสเครองคอมพวเตอรชนดหนง

ภาพท 2.2 เมาส (Mouse)

ทมา : บนทกภาพจากหองเรยนคอมพวเตอรวทยาลยชางศลป

Page 3: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

การใชเมาส (Mouse)

คลก (Click) การกดปมเมาสดานซายจ านวนหนงครงในบรเวณทตองการเลอก

คลกขวา การกดปมเมาสดานขวาจ านวนหนงครงในบรเวณทตองการเลอก

ลาก หรอ แดรก (Drag) การกดปมเมาสดานซายคางไวแลวลากเมาสไปใน

บรเวณทตองการเลอก

ดบเบลคลก (Double click) การกดปมเมาสดานซายจ านวนสองครงตดตอกน

แลวปลอยเมาส

คยบอรด (Keyboard)

คยบอรด (Keyboard) แปนพมพหรอ แผงแปนอกขระ เปนอปกรณน าเขาขอมลอก

ชนดหนง มลกษณะเปนสเหลยมผนผา มแปนตางๆ ส าหรบพมพ ทงแปนตวอกษรไทยองกฤษ

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

สามารถใชแปนพมพเปนคยลดในการใชงานค าสงตางๆ ของโปรแกรมได

ภาพท 2.3 คยบอรด (Keyboard)

ทมา : บนทกภาพจากหองเรยนคอมพวเตอรวทยาลยชางศลป

Page 4: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

การใชงานคยบอรด (Keyboard)

ส าหรบการใชงานคยลดดวยคยบอรดนน สามารถท าไดโดยการกดปม Ctrl พรอมกบ

อกษรยอตางๆ ของค าสงนนๆ เชน การกดปม Ctrl พรอมกบตวอกษร N (Ctrl+N) จะเปนการ

สรางกระดาษงานใหม, การกดปม Ctrl พรอมกบคยเครองหมาย (+) Ctrl + (+) จะเปนการ

ขยายมมมองภาพ เปนตน

อปกรณบนทกขอมล

อปกรณบนทกขอมล มไวส าหรบจดเกบไฟลขอมลหรอส ารองไฟลขอมลชนงานออก

จากเครองคอมพวเตอร อปกรณบนทกขอมลมหลายชนด เชน CD-R , DVD, Flash drive ,

External harddisk เปนตน

ภาพท 2.4 อปกรณบนทกขอมล

ทมา : บนทกภาพจากหองเรยนคอมพวเตอรวทยาลยชางศลป

Page 5: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

เครองพมพ (Printer)

เครองพมพ (Printer) เปนอปกรณสงออกขอมลชนดหนง ส าหรบพมพภาพชนงานหรอ

เอกสารประกอบตางๆ ส าหรบเครองพมพในหองเรยนคอมพวเตอร เปนเครองพมพแบบ

เลเซอรภาพทไดจากการพมพจะคมชด

ภาพท 2.5 เครองพมพ (Printer)

ทมา : บนทกภาพจากหองเรยนคอมพวเตอรวทยาลยชางศลป

Page 6: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

โปรแกรม Adobe Flash CS4

Flash เปนโปรแกรมส าหรบสรางงานกราฟก ภาพเคลอนไหวและงานมลตมเดย หรอท

เรยกวา มฟว (Movie) โปรแกรม Flash เปนผลตภณฑของบรษท Adobe สามารถใชสรางงาน

ไดหลากหลาย เชน

- สรางภาพเคลอนไหว ตวอกษร ภาพและโลโกกราฟกพรอมเสยงและเอฟเฟกต

ประกอบ เชน ภาพหลกของหนาเวบ แบนเนอรโฆษณา เปนตน

ภาพท 2.6 ตวอยางงาน Animation บนเวบไซต www.vithita.com

Page 7: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

- เกมและโปรแกรมทโตตอบกบผใช รวมถงฟอรมทใหผใชกรอกขอมลและสงขอมลท

กรอกไปทเครองเซรฟเวอรเพอน าไปประมวลผลและบนทกไว

ภาพท 2.7 ตวอยางเกม Animation ทมา http://game.siamha.com/name/yentafo/

Flash มเครองมอทอ านวยความสะดวกในการสรางภาพเคลอนไหวและงาน

มลตมเดย มภาษาโปรแกรมส าหรบใชควบคมการท างานของชนงาน ซงงานทสรางโดย

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

เพราะโหลดมาแสดงผลไดอยางรวดเรว

สาเหตทไฟลมลตมเดยทสรางโดย Flash มขนาดเลกเมอเทยบกบไฟลมลตมเดย

ประเภทอน เพราะ Flash มการเกบรายละเอยดของรปภาพเปนลายเสน เรยกวา ภาพแบบ

เวกเตอร (Vector) ในขณะทโปรแกรมอนๆ จะเกบรายละเอยดของรปภาพเปนจดส เรยกวา

ภาพบตแมพ (Bitmap)

Page 8: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

การใชงานโปรแกรม Adobe Flash CS4

การเปดโปรแกรม Adobe Flash CS4 มขนตอน ดงน

1. คลกทปม Start ของ windows เลอก Program เลอก Adobe Master Collection CS4 >

Adobe Flash CS4 Professional

ภาพท 2.8 การเปดโปรแกรม Adobe Flash CS4

1

1

Page 9: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

2. เลอกการสรางไฟลงานใหม Create New เลอกรปแบบไฟลงานทเราตองการสราง โดย

เลอก Flash File (ActionScript 2.0)

ภาพท 2.9 การสรางไฟลงานใหม

จากนนจะปรากฏหนาตางโปรแกรม Flash ขนมา

สวนประกอบของหนาจอโปรแกรม Adobe Flash CS4

ภาพท 2.10 แสดงหนาจอโปรแกรม Adobe Flash CS4

1 2 3

4

5

Page 10: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

1 แถบเมน (Menu Bar)

ภาพท 2.11 แถบเมน (Menu BarX

แถบเมนเปนแถบทรวบรวมค าสงในการใชงานทงหมดเกยวกบการสรางชนงาน รวมทงการตง

คาเกยวกบการใชงานในโปรแกรมทงหมด

เมน ลกษณะการท างาน

File เปนชดค าสงส าหรบจดการกบไฟลภาพในลกษณะตางๆ เชน การสราง

ไฟลใหม การเปดไฟล การปดไฟล การบนทกไฟลภาพ เปนตน

Edit เปนชดส าหรบแกไขและปรบแตงภาพ เชน การตด การคดลอก การวาง

การคนหาและแทนท รวมถงการปรบแตงคาเบองตนของโปรแกรม

View เปนชดค าสงทใชเลอกรปแบบการแสดงผล เชน ยอ-ขยายภาพ แสดงไม

บรรทด หรอ เสนกรด เปนตน

Insert ใชจดการกบการเคลอนไหวและการสรางซมโบลแบบตางๆ

Modify เปนชดค าสงใชปรบแตงไฟล ภาพบตแมพ รปทรง ซมโบล รวมทงการจด

วางและการหมนออบเจกต

Text ใชจดการกบขอความตวอกษร เชน รปแบบ ขนาด ระยะหาง เปนตน

Commands เปนค าสงเกยวกบการแปลงซมโบล กอปปฟอนต การน าเขาหรอการ

สงออกการเคลอนไหว (Motion) ในรปแบบตางๆ เชน XML , ActionScript

,Flex Component

Control เปนค าสงเกยวกบการแสดงผลงาน

Debug เปนค าสงทเกยวกบการตรวจสอบความผดพลาดในการแสดงผลของ

ชนงาน

Window เปนชดค าสงเกยวกบการแสดงหรอซอนเครองมอและพาเนลตางๆ

Help ใชเรยกดค าอธบายในการท างานตางๆ ของเครองมอหรอค าสงภายใน

โปรแกรม

Page 11: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

2 พาเนล (Panel)

ภาพท 2.12 พาเนลตางๆ

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

อนๆ ทไมมในหนาจอ ไดจากเมน Window หากพาเนลใดทเปดใชงานอย จะมเครองหมาย

ขางหนา และหากเราเลอกรายการนนซ าจะเปนการปดพาเนล

ภาพท 2.13 พาเนล Window

Page 12: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

การจดการพาเนล

สวนประกอบของพาเนล

ภาพท 2.14 สวนประกอบของพาเนล SWATCHES

1. Tab (แทบ) ชอของพาเนล

2. Title bar

3. ปมเปลยนสภาพของพาเนลเปนแบบไอคอนหรอขยายเปนแบบพาเนล

4. ปมปดพาเนล

5. ปมเมนของพาเนล

2 3

1

Page 13: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

การรวมพาเนล

เราสามารถรวมหนาตางพาเนลใหเปนกลมตามทเราตองการได ดงน

1. คลกเลอกแทบชอของพาเนล (ในตวอยางนเลอกพาเนล SWATCHES)

2. ลากแทบพาเนลไปยงกลมพาเนลทเราตองการรวมกลม (COLOR) โดยใหเสนขอบ

สฟาปรากฏขนกอนแลวจงปลอยเมาส

3. จะไดกลมพาเนลซงประกอบดวยพาเนล COLOR และ SWATCHES

ภาพท 2.15 แสดงการรวมพาเนลตางๆ

1 2

3

Page 14: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

การแยกพาเนล

เราสามารถแยกหนาตางพาเนลออกจากกลมตามทเราตองการได ดงน

1. คลกเลอกแทบชอของพาเนล (ในตวอยางนเลอกพาเนล SWATCHES)

2. ลากแทบพาเนลออกจากกลม มาวางยงต าแหนงทเราตองการ

ภาพท 2.16 แสดงการแยกพาเนลตางๆ

การใชงานพาเนลแบบไอคอน

ในการท างานของโปรแกรม Flash เราสามารถเพมพนทท างานดวยการเปลยนสภาพ

พาเนลตางๆ ใหเปนแบบไอคอนเลกๆ ไดโดย

1. คลกเลอกปมเปลยนสภาพพาเนล ทอยบนไตเตลบารของพาเนล

2. จะไดพาเนลทอยในรปของไอคอน

ภาพท 2.17 แสดงการใชงานพาเนลแบบไอคอน

1 2

1

2

Page 15: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

การเรยกคนคาเรมตนของพนทท างาน

หากเราตองการรเซตหรอเรยกคนคาต าแหนงการจดเรยงพาเนล ใหเหมอนคาดงเดม

(Default) ของโปรแกรม สามารถท าไดดงน

1. คลกทปมเปลยนรปแบบหนาจอ

2. เลอกค าสง Reset ‘Essentials’

ภาพท 2.18 แสดงการจดเรยงพาเนลใหเหมอนคาเดมของโปรแกรม

1

2

Page 16: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

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

ภาพท 2.19 กลองเครองมอ Toolbox

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

เปนแถบทรวบรวมเครองมอตางๆ ทใชในการสรางและปรบแตง

วตถ ซงเครองมอแตละตวจะมลกษณะเปนไอคอนรปภาพ ทเรา

สามารถคลกเพอเรยกใชงานได

Selection เลอกวตถ

Subselection ปรบแตงรปทรงวตถ

Free Transform ปรบเปลยนรปทรงวตถ

Gradient Transform ปรบเปลยนรปทรงวตถโดยการไลระดบส

3D Rotation หมนวตถแบบ 2 มตและ 3 มต

3D Translation เคลอนทวตถแบบ 2 มตและ 3 มต

Page 17: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

Lasso เลอกวตถหรอเลอกพนทบางสวนของวตถ

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

Add Anchor Point เพมจด Anchor Point

Delete Anchor Point ลบจด Anchor Point

Convert Anchor Point ปรบจด Anchor Point

Text พมพตวอกษร ขอความ

Line วาดเสนตรง

Rectangle วาดรปสเหลยม

Oval วาดรปวงกลมหรอวงร

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

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

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

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

Brush ระบายส

Spray Brush พนสภาพสเปรย

Deco เตมลวดลายใหกบวตถ

Bone สรางขอกระดกใหวตถเคลอนไหว

Bind ปรบแตงการเคลอนไหววตถทสรางดวย Bone Tool

Paint Bucket เตมสพนใหกบวตถ

Ink Bottle เตมสเสนใหกบวตถ

Eyedropper Copy สเสนใหกบวตถ

Eraser ลบเสนหรอสพนของวตถ

Hand เลอนภาพดสวนตางๆ

Zoom ยอหรอขยายมมมองภาพบนสเตจ

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

Page 18: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

Fill Color

สวนทใชส าหรบเลอกสพนของวตถ

กลม option ของ

เครองมอ

(จะเปลยนไปตาม

เครองมอทเราเลอก)

เปนสวนค าสงเพมเตมของเครองมอตางๆ ทเลอกใชงาน

4 สเตจ (Stage)

ภาพท 2.20 สเตจ (Stage)

สเตจ (Stage) เปนพนทสขาว ทใชในการแสดงผลงานทเราสรางขน เปรยบเสมอนเวทการ

แสดงหรอหนาจอ พนทรอบๆ สเตจทเปนสเทา เรยกวา Work Area เปนพนทใชส าหรบวาง

วตถตางๆ ทยงไมตองการแสดงใน สเตจ

Page 19: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

5 ไทมไลน (Timeline)

ภาพท 2.21 ไทมไลน (Timeline)

ไทมไลน (Timeline) หรอ เสนเวลา ใชส าหรบสรางและก าหนดรายละเอยดของการเคลอนไหว

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

ซงเราเรยกภาพในแตละชวงเวลาวา เฟรม (Frame)

Page 20: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

การสรางชนงานใหมใน Flash

การสรางชนงานใหมในโปรแกรม Flash จะเหมอนกบการสรางไฟลใหมในโปรแกรม

ทวไป ซงเราจะเปนผก าหนดวาจะเลอกสรางไฟลรปแบบใด สามารถท าได 2 วธ ดงน

1. เลอกจากหนาตาง Welcome Screen

สรางไฟลงานใหมโดยเลอกรปแบบไฟล

2. เลอกจากเมน File

1 คลกเมน File > New

2 จะปรากฏหนาตาง New Document ขนมา ใหเลอกแทบ General เพอเลอกสราง

ไฟลใหมตามรปแบบไฟลทตองการ

3 เลอกรปแบบไฟลทตองการสราง

4 คลกปมตกลง

Page 21: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

ภาพท 2.22 แสดงการสรางชนงานใหม

รปแบบของไฟลใหมมใหเลอกดงน

รปแบบ ความหมาย

ActionScript 3.0 สรางไฟลเอกสารโดยเลอกใชการเขยน ActionScript เปนเวอรชน 3.0

ActionScript 2.0 สรางไฟลเอกสารโดยเลอกใชการเขยน ActionScript เปนเวอรชน 2.0

Adobe AIR เปนการสรางแอพพลเคชนใหท างานบนอปกรณอน

Mobile เปนการสรางแอพพลเคชนใหท างานบนอปกรณมอถอ

Slide Presentation เปนการสรางแอพพลเคชนเพอการน าเสนอ

Form Application เปนการสรางไฟลจากแอพพลเคชนส าเรจรป

ActionScript File เปนหนาตางส าหรบเขยนสครปตเทานน

ActionScript

Communication File

เหมาะส าหรบงานเขยนสครปตทตองตดตอกบเซรฟเวอร

1

2

3

4

Page 22: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

รปแบบ ความหมาย

Flash JavaScript File เหมาะส าหรบงานเขยนสครปตทท างานรวมกบ JavaScript

Flash Project เปนการรวมกลมงานทสรางทงหมดใหออกมาเปน Project ไฟล

*** ส าหรบชนงานในชนเรยนนใหนกเรยนก าหนดไฟลงานเปน ActionScript 2.0***

การเปดไฟลงาน (Open)

ในโปรแกรม Flash สามารถเปดไฟลงานทมอยแลวเพอน ามาใชงานตอ เราสามารถท า

ได 2 วธ ไดแก

1. จากหนาจอ Welcome Screen ท าไดโดย

1. คลกเลอก Open จากหนาจอ Welcome Screen

2. คลกเลอก Folder และไฟลงานทตองการ

3. คลกปม Open

ภาพท 2.23 การเปดไฟลงาน

1

2

3

Page 23: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

2. เปดไฟลงานจากเมน File ท าไดโดย

1. คลกเมน File > Open

2. คลกเลอก Folder และไฟลงานทตองการ

3. คลกปม Open

ภาพท 2.24 การเปดไฟลงานจากปมเมน

ภาพท 2.25 การเปดไฟลงาน

เราสามารถใหคยลดในการใชค าสงตางๆ ไดโดยสงเกตจากหลงค าสง

ทเราตองการ เชน ค าสง Open สามารถใชคยลดไดโดยการกดปม Ctrl+O

1

3

2

Page 24: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

การบนทกไฟลงาน (Save)

เมอเราสรางชนงานขนมาแลว เราควรเกบหรอบนทกชนงานนนไว เพอกลบมาท างาน

ตอหรอแกไขชนงานเพมเตมไดในภายหลง การ Save งานม 2 แบบคอ Save และ Save As…

1. Save เปนการบนทกไฟลงานทเราสรางขน โดยการบนทกครงแรกเราตองตงชอ

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

2. Save As… เปนการบนทกไฟลทเรามอยเพมขนมาในชอของไฟลใหม เพอเปนการ

ส ารองไฟลนนไว นอกจากนในการ Save งานในครงแรกของไฟลงานจะเปน การ Save As…

เพอเปนการตงชอไฟล เลอกทอยส าหรบการเกบงานนนๆ ดวย โดยการ Save และ Save As..

มขนตอนการท า ดงน

ภาพท 2.26 การบนทกงาน

1. คลกเมน File > Save หรอ Save As….

2. เลอก Folder ทตองการเกบไฟลงาน

3. ตงชองานทชอง File name

4. กดปม Save

ภาพท 2.27 การบนทกงาน

1

2

3

4

Page 25: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

การควบคมมมมองในการท างาน (View)

เราสามารถควบคมมมมองตางๆ ของพนทท างาน (Stage) เชน เขาไปดชนงานใกลๆ

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

การยอขยายมมมองพนทสเตจเทานน ไมใชการยอหรอขยายชนงาน

เครองมอ Zoom Tool

1. คลกเครองมอ Zoom Tool

2. แดรกเมาสลอมรอบสวนทเราตองการซม (หรอคลกเครองมอ zoom บรเวณท

ตองการขยาย)

3. ภาพจะถกซมเขามา

ภาพท 2.28 แสดงขนตอนการใชงาน

เครองมอ Zoom Tool

4. ท Option คลกปม Reduce แลวคลกบรเวณทตองการลดขนาด

5. มมมองภาพจะถกยอลง

1 2

3

Page 26: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

ภาพท 2.29 แสดงการยอมมมองภาพ

***คยลดในการขยายมมมอง คอ การกดปม Ctrl + (+)

***คยลดในการยอมมมอง คอ การกดปม Ctrl + (-)

ยอขยายโดยใชค าสงจากแถบเครองมอแกไข (Edit Bar) ท าไดโดย

1. เลอกค าสง Window > Toolbars > Edit Bar

2. คลกทเมน ทอยดานขวาบนสเตจ แลวเลอกอตราการยอขยายท

ตองการ

ภาพท 2.30 แสดงการยอขยายจากแถบเครองมอ

4 5

2

1

Page 27: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

Fit in window แสดงสเตจใหพอดกบหนาตาง

Show Frame แสดงสเตจใหพอดกบหนาตาง และสามารถเลอนไปดพนทนอกสเตจท

อยไกลออกไปได

Show All แสดงใหเหนวตถทงหมด รวมถงวตถทอยนอกสเตจดวย

25-800% แสดงตามอตรายอขยายทเลอก

การเลอนดสวนทตองการในภาพ

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

สามารถเลอนมมมองทเราตองการดวยการแดรกเมาสหรอลากเมาส

1. คลกเครองมอ Hand Tool

2. แดรกสเมาสเลอนมมมองไปในทศทางทเราตองการ ภาพจะเลอนไปตามทศทาง

ทเราแดรกเมาส

ภาพท 2.31 การใชเครองมอ Hand Tool

*** การใชคยลดในการเลอนมมมองเราสามารถ กดปม Spacebar บนคยบอรด แทนการ

เลอกเครองมอ Hand Tool กได

1

2

Page 28: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

การใชงาน Grid , Guide และ Ruler

เสนกรด (Grid), เสนไกด (Guide) และไมบรรทด (Ruler) เปนเครองมอทชวยในการ

กะระยะและจดวางต าแหนงของวตถทเราสรางขน

ภาพท 2.32 การใชงาน Guide, Grid, Ruler

การใชงานเสนกรด

เสนกรด คอ ตารางสเหลยมทมระยะหางของแตละชองเทากน ปรากฏทวทงภาพท

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

หรอปดเสนกรดไดโดยคลกเมน View > Grid > Show Grid

ภาพท 2.33 การเรยกใชงานเสนกรด

Grid Guide

Ruler

Page 29: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

การปรบแตงเสนกรด

เราสามารถปรบแตงคารายละเอยดของเสนกรดได เชน ก าหนดสของ

เสนกรด ระยะหางของเสนกรด โดยคลกเมน View > Grid > Edit Grid

ภาพท 2.34 แสดงการปรบแตงเสนกรด

เปลยนสของเสนกรด

แสดงเสนกรดบนสเตจ

แสดงเสนกรดบนวตถ

ยดวตถทถกลากเขามาใกลเสนกรดโดยอตโนมต

ระยะหางของเสนกรดแนวนอน

ระยะหางของเสนกรดแนวตง

ลกษณะการยดเสนกรด

- Must be dose ยดวตถทอยใกลกบเสนกรดมากๆ

- Normal ยดวตถตามระยะทตงไว

- Can be distant ยดวตถทอยไกลกบเสนกรดมาก

- Always Snap ใหวตถถกยดตดกบเสนกรดเสมอ

การใชงานเสนไกด

เสนไกด (Guides) เปนเสนทน ามาใชเมอตองการก าหนดต าแหนงเพอวางวตถ หรอ

วาดภาพ สามารถเรยกใชงานไดโดยการคลก เมน View > Guides > Show Guides

Page 30: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

ภาพท 2.35 การเรยกใชงาน Guides

ภาพท 2.36 แสดงเสนไกดบนหนาจอ

วธการสรางเสนไกด

การสรางเสนไกดสามารถท าไดโดยใชเครองมอ Selection Tool คลกเมาสซาย

บนไมบรรทดตามแนวนอนแลวลากลงเพอสรางเสนไกดตามแนวนอน และ คลกเมาสซายตาม

ไมบรรทดแนวตงแลวลากไปทางขวาเพอสรางเสนไกดแนวตง

ภาพท 2.37 การสรางเสนไกด

สรางเสนไกดแนวนอน

สรางเสนไกดแนวตง

Page 31: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

การลบเสนไกด

หากเราตองการลบเสนไกดบางเสน ออกจากพนทท างาน สามารถท าได ดงน

1. คลกเลอกเครองมอ Selection Tool

2. เลอกเสนไกดทตองการลบ

3. ลากเสนไกดไปปลอยภานนอกรปหรอปลอยบรเวณไมบรรทด

ภาพท 2.38 การลบเสนไกด

หากตองการลบเสนไกดทงหมด สามารถท าไดโดย คลกเมน View > Guides > Clear

Guides

ภาพท 2.39 การลบเสนไกดดวยเมน View

1

3 2

Page 32: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

การใชงานไมบรรทด (Rulers)

ไมบรรทดจะถกน ามาใชเมอเราตองการก าหนดขนาดหรอระยะในการวาดภาพหรอ

วตถ สามารถเรยกใชงานหรอยกเลกใชงานไดจากเมน View > Rulers

ภาพท 2.40 แสดงการเรยกใชงานไมบรรทด

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

1. คลกปม Edit ทแถบ Properties

2. เลอกหนวยวดทตองการในชอง Ruler units

ภาพท 2.41 การเปลยนหนวยวดของ

ไมบรรทด

ไมบรรทดแนวนอน

ไมบรรทดแนวตง

2

1

Page 33: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

Inches นว

Inches (decimal) นว แบงสเกลยอยเปนทศนยม

Points พอยต เทากบ 1/72 นว

Centimeters เซนตเมตร

Millimeters มลลเมตร

Pixels พกเซล

Page 34: เอกสารประกอบการสอนcfa.bpi.ac.th/news/pairin-pdf/Unit2.pdf · 2019-11-06 · 2 พาเนล (Panel) ภาพที่ 2.12 พาเนลต่างๆ

แบบฝกหด

ค าสง บอกสวนประกอบของหนาจอโปรแกรม Adobe Flash CS4

1. ………………………………………………………………………………………………………………………………………………

2. ………………………………………………………………………………………………………………………………………………

3. ………………………………………………………………………………………………………………………………………………

4. ………………………………………………………………………………………………………………………………………………

5. ………………………………………………………………………………………………………………………………………………

1 2 3

4

5