บทที่ 1 ส่วนประกอบของ Flash - WordPress.com · 2013-07-29 ·...

บทท 1 สวนประกอบของ Flash

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

คาย Macromedia ตอมา Adobe ไดท าการซอ

บรษท ท าใหชอในปจจบนคอ Adobe Flash

โปรแกรม Flash เปนโปรแกรมทใชในการสรางสอ

มลตมเดยไดหลากหลาย ภาพเคลอนไหวแบบ

เวคเตอรทมความคมชด สามา รถใสไฟลเสยง

วดโอ ท าระบบการโตตอบกบผใช ท าเวบไซต

รวมทงสามารถเขยนโปรแกรมในภาษา Action

Script และเชอมโยงตดตอกบฐานขอมลอน ๆ

เทคโนโลย Flash สามารถท างานไดหลากหลาย

ระบบปฏบตการเชน Windows MacOs Linux รวมทงอปกรณแบบพกพาเชนโทรศพทมอถอ PDA และยง

สามารถท างานเชอมตอกบอปกรณอน ๆ เชนกลอง webcam, Printer

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

การสอนแบบเอนมชนทมระบบโตตอบได , สอน าเสนอสนคา, เกม, เวบไซต,การตน ฯลฯ

1

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : aj.pises@gamil.com

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

1.1 สวนตดตอกบผใช เมอเขาสโปรแกรม Flash จะพบหนาจอทมสวนประกอบดงน

Menu Bar แทบเครองมอค าสงดวยรปแบบตวอกษร ทมครอบคลมทกค าสง โดยจะรวบรวมค าสงแบงหมวดหมตาง ๆ เราไมควรใชค าสงจากเมนบารเพยงอยางเดยวเพราะจะท าใหท างานไดชา Stage พนทการท างานโดยพนททแสดงผลจะอยบนสวนสขาว โดยชนงานทวาดหรอสรางลงไปจะถกแสดงผลจากบรเวณนเทานน สวนพนททไมแสดงผลจะเปนสเทา แต stage สามารถเปลยนสได ไมไดมเพยงแคสขาวเพยงอยางเดยว Toolbox กลองเครองมอทชวยใหเรยกใชค าสงไดงายยงขนดวยการแสดงเปนรปภาพ และในสวนของ Toolbox ยงมสวนของการปรบแตงคาเพมเตมเชน การเลอกรปแบบการลงส รปแบบของค าสงเพมเตมจาก Toolbox Timeline Flash เปนโปรแกรมทใช Timeline เปนหลก ใชส าหรบก าหนดชวงเวลาการเคลอนไหวการหยด หรอการก าหนดเวลาใหค าสงตาง ๆ ท างาน โดยการท างานจะแบงเปนสวนของ Layer ทท างานเปนชน เหมอนกบการวางแผนใสซอนกน โดย Layer ทอยดานบนสดจะเปน Layer ทเหนกอน สวน Layer ดานลางสดจะเหน

Stage

Panel

Menu bar

Properties Inspector

Time Line

Tool Box

2

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : aj.pises@gamil.com

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

ทหลง และ สวนของ Frame ทแบงเปนชอง ๆ แทนชองละ 1 Frame โดย 1 วนาทเราสามารถก าหนดไดวาจะใหแสดงผลจ านวนก Frame Properties Inspector และ Panel

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

ขนาดเสน ปรบส แบบอกษร

1.2 กลองเครองมอ

Selection tool < v > เครองมอทใชท าหนาทเลอกวตถและยงสามารถเคลอนยายวตถไดดวย

Subselection tool < A > เครองมอในการเลอกสวนประกอบของวตถเชนเลอกเฉพาะจด

Free Tranform Tool < Q > เครองมอใชส าหรบการหมนภาพ บดภาพ และขยายภาพ

Gradien Tranform Tool < F > เครองมอทใชปรบแตงการไลสไปในทศทางตาง ๆ

Lasso Tool < L > เครองมอการเลอกบรเวณพนทในชนงานแบบอสระ

Pen Tool < P > เครองมอทใชการวาดเสนแบบจดตอจดโดยสามารถท าเปนเสนโคงและเสนตรง

Add Anchor Point < = > เครองมอทใชการเพมจดของเสน

Delete Anchor Point < - > ใชลบจดของเสน

Convert Anchor Point < C > ใชส าหรบเปลยนจดของเสนจากเสนตรงใหเปนเสนโคง

Text Tool < T > ใชส าหรบพมพตวอกษรขอความ

Line Tool < N > ใชส าหรบวาดเสน

Rectangle Tool < R > ใชส าหรบสรางกลองสเหลยมสามารถปรบขอบมมโคงมนได

Oval Tool < O > ใชส าหรบสรางวงร โดยถากดป ม Shift คางเอาไวจะท าใหเปนวงกลม

Rectangle Primitive Tool < R > เปนเครองมอสรางกลองสเหลยมโดยสามารถปรบมมโคงไดทงกอนและหลงสราง

Oval Primitive Tool < O > ใชส าหรบสรางวงร โดยถากดป ม Shift คางเอาไวจะท าใหเปนวงกลม สามารถปรบแตงโคงไดทงกอนและหลงสราง

PolyStar Tool ใชส าหรบสรางรปหลายเหลยมโดยสามารถก าหนดไดวาจะสรางกเหลยม

3

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : aj.pises@gamil.com

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

Pencil Tool < Y > ใชส าหรบวาดเสนแบบอสระ

Brush Tool < B > ใชส าหรบวาดเสนแบบพกน โดยเสนมคณสมบตเดยวกบรปทรง

Ink Bottle Tool < S > เครองมอใชส าหรบการเปลยนสเสน

Paint Bucket Tool < K > เครองมอทใชส าหรบลงสพนผว

Eye dropper < I > เครองมอทใชส าหรบดงส ใชส าหรบตรวจสอบส หรอน าสไปใชกบสวนอน

Eraser < E > ใชส าหรบลบวตถ

Hand< H > ใชส าหรบเคลอนยายมมมองหนาจอ

Zoom < M,Z > ใชส าหรบยอขยายมมมองหนาจอ

Stroke color ใชส าหรบก าหนดสของเสน

Fill Color ใชส าหรบก าหนดสของพนผว

1.3 การเรมตนชนงาน

2. คลกทค าสงmenu bar File -> New จะปรากฏหนาตาง New Document

3. เลอกรปแบบชนงานทตองการซงโปรแกรมจะมคาเรมตนส าหรบผลงานหลาย ๆ แบบแต โดยปกต

จะเลอกท flash file ActionScript

4. ตงคาชนงานไดท menu bar Modify -> Document

ชอเรอง

รายละเอยด

ขนาดของชนงาน

รายละเอยด รปแบบการใช

หนวย จ านวนเฟรมตอวนาท

4

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : aj.pises@gamil.com

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

1.4 การควบคมมมมองของโปรแกรม

การควบคมมอมองมสวนส าคญในการท างานทรวดเรว เพอใชงานบอย ๆ ควรหดใชค าสง hotkey รวมดวย

โดยการควบคมมมมองม 2 ค าสงหลก ๆ คอ

1. การ pan ภาพทชวยการเคลอนมมมองของกลองไปตามจดตาง ๆ คลกท Toolbox Hand tool

จากนนคลกทหนาจอของชนงาน มมมองของหนาจอจะเลอนไปมาเหมอนกบวาเราใชมอเลอน

ชนงานบนโตะ

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

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

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

1.5 การบนทกไฟล

การบนทกไฟลเบองตนใน Flash ม 2 รปแบบหลก ๆ คอ แบบไฟลทตองการแกไขได จะบนทกเปน

ไฟล .FLA มขนตอนการบนทกไฟลดงน

1. คลกท Menu Bar ท File - > save ในกรณทตองการบนทกเปนไฟลเดม หรอครงแรก และ

Save As ส าหรบกรณทตองการบนทกไฟลเปนชออน

2. เลอกต าแหนงทจดเกบไฟล พรอมพมพชอไฟล 3. ท Save As Type เลอก เวอรชนทตองการ ซงถาน าไปเปดในเครองทเวอรชนต าวาจะไม

สามารถเปดได ควรบนทกเปนเวอรชนทถกตอง ในกรณทไมไดไปเปดเครองอนกไมตองสนใจ

สวนนสามารถบนทกไดเลย จากนนกด Save

และส าหรบไฟลทใชส าหรบเผยแพรบทหนาเวบหรอสออน ๆ ซงไฟลประเภทนจะสามารถดและใชงานได

เทานนไมสามารถแกไขหรอปรบแตได จะตองบนทกเปนไฟล .SWFมขนตอนดงน

1. คลกท Menu Bar ท File - > Export -> Export Movie

2. เลอกต าแหนงทจดเกบไฟล พรอมพมพชอไฟล 3. ท Save As Type เลอก รปแบบไฟลทตองการ ใหเลอก swf ถาตองการน าชนงานไปเผยแพรแบบ

Flash แตในสวนนยงสามารถเลอก export เปนภาพเคลอนไหวแบบอน ๆ ไดดวย

5

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : aj.pises@gamil.com

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

1.6 การเลอกวตถ

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

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

Selection tool ใชส าหรบการเลอกทงวตถ ถาคลกเพยง 1 ครง จะเปนการเลอก 1 วตถ แตถาดบเบล

คลกจะเปนการเลอกวตถและเสนพรอมกน แตถาในกรณทคลกทเสน 1 ครงจะเปนการเลอกสวนของเสน

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

และเปลยนรปรางของวตถดวย

Subselection tool ใชส าหรบเลอกสวนของวตถ โดยใหคลกทวตถ 1 ครง จากนนจะปรากฏจดตอ

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

Lasso Tool ใชส าหรบเลอกสวนของวตถโดยก าหนดอณาเขตแบบอสระ โดยวาดขอบเขตทตองการ

6

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : aj.pises@gamil.com

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ

1.7 การจดวตถ

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

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

การจดการต าแหนงวตถดงน

1. จากภาพวตถกลองจดวางไมเปนระเบยบ

2. ไปทmenu bar เลอก Windows->Align เพอเรยกหนาตาง Align

3. คลกครอบวตถทงหมด แลวคลกเลอกการจดระยะ การเวนระยะหาง การเรยงใหตรงกนตามรป

7

โครงการฝกอบรมเชงปฏบตการผลตสอการเรยนการสอน

by Pises Tantimala : aj.pises@gamil.com

ไมสงวนลขสทธ แตอยากใหครเอาไปใชเยอะ ๆ ครบ