เอกสารประกอบการอบรม หลักสูตร...

เอกสารประกอบการอบรม หลกสตร การผลตสอมลตมเดยดวยโปรแกรมส าเรจรป

ระหวางวนท 2 – 3, 9 – 10 กรกฎาคม พ.ศ. 2559 ณ โรงเรยนจฬาภรณราชวทยาลย ลพบร

วทยากร อาจารยเลกฤทย ขนทองชย

คณะวทยาการจดการ มหาวทยาลยราชภฏจนทรเกษม

Adobe Flash Professional : อาจารยเลกฤทย ขนทองชย หนา 2

ค าน า

ในปจจบนโปรแกรม Adobe Flash Professional เ ปนโปรแกรมทท าหนาทสรางภาพนง

ภาพเคลอนไหว โดยใชหลกการของ Vector Graphic และการตอบสนองตอเหตการณตางๆ ทท าให เวบเพจดมชวตชวา สวยงามและดงดดความสนใจของผเขามาเยยมชมได อกทงชนงานทไดยงม ขนาดเลก ท าใหไมสรางปญหาเมอตองน ามาเผยแพรทางอนเตอรเนต

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


สารบญ หนา

1) แนะน า Adobe Flash 4 2) ประเภทของกราฟก 5 3) การเขาสโปรแกรม 6 4) สวนประกอบของโปรแกรม Flash 6 5) การปรบการแสดงขนาดพนทท างาน 8 6) การเรยกใช ไมบรรทด 8 7) เครองมอตาง ๆ (Toolbox) 9 8) การท างานกบส 14 9) การจดการกบวตถ 17 10) การใชตวอกษร (Using Text) 21 11) การใชงานรปภาพ Graphic 23 12) การท าซ ารปภาพ 23 13) การท างานกบภาพบตแมพ 24 14) การใชสญลกษณ (Symbol & Instance) 25 15) การสราง Animation 27 16) ประเภทของการสรางภาพเคลอนไหว 30 17) การสราง Animation ดวย Motion Tween 31 18) การแสดงผลการท างานของ Animation 32 19) การแสดงหนาตาง Control 33 20) การสราง Animation โดยใช Motion Path 33 21) การสราง Animation โดยก าหนดคณสมบตของ Motion 35 22) การสราง Animation ดวย Shape Tween 38 23) การสราง Animation ดวย Frame by Frame 39 24) การใชงานเลเยอร (Layer) 41 25) การใชงาน Mask Layer 43 26) สราง Mask Layer ในภาพ 46


Adobe Flash

ในปจจบนโปรแกรม Adobe Flash Professional เ ปนโปรแกรมทท าหนาทสรางภาพนง ภาพเคลอนไหว โดยใชหลกการของ Vector Graphic และการตอบสนองตอเหตการณตางๆ ทท าให เวบเพจดมชวตชวา สวยงามและดงดดความสนใจของผเขามาเยยมชมได อกทงชนงานทไดยงม ขนาดเลก ท าใหไมสรางปญหาเมอตองน ามาเผยแพรทางอนเตอรเนต

สาเหตส าคญทท าใหไฟลมลตมเดยทสรางโดย Flash มขนาดเลกมาก เมอเทยบกบไฟลมลตมเดยประเภทอน เปนเพราะรปแบบการเกบรายละเอยดของรปเปนลายเสน ในขณะทโปรแกรมอนๆ จะบนทกรายละเอยดของรปทก Pixels

Flash ในการสรางงาน Presentation Flash ในการสรางเวบไซต

Flash ในการสราง Cartoon Animation Flash ในการสรางโปรแกรม Interactive


ประเภทของกราฟก การสรางภาพกราฟกดวยคอมพวเตอร มวธการสราง 2 แบบ คอ แบบบตแมพ (Bitmap) และ

แบบเวคเตอร (Vector) 1. Bitmap Graphic กราฟกแบบบตแมป เปนภาพทเกดจากจดสทเรยกวา Pixels ซงประกอบกนเปนรปรางบนพนท

ทมลกษณะเปนเสนตาราง (grid) ท าใหเกดปญหาเมอมการขยายภาพ เพราะตารางของภาพมขนาดทแนนอน

2. Vector Graphic กราฟกแบบเวคเตอรตางจากบตแมปตรงทบตแมปนนประกอบไปดวย จดตางๆ มากมาย แตกราฟกแบบเวคเตอรใชสมการทางคณตศาสตรเปนตวสรางภาพ เชน วงกลม หรอเสนตรง เปนตน ท าใหเมอท าการขยายภาพความคมชดของภาพยงคงเดมเนองจาก คอมพวเตอรตองท าการค านวณในการสรางภาพขนมาใหม

ภาพกอนขยาย

Vector Graphic Bitmap Graphic


การเขาสโปรแกรม 1. ไปทป ม Start Menu 2. เลอก Programs 3. เลอก Adobe 4. เลอก Adobe Flash Professional CS6

สวนประกอบของโปรแกรม

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

เปนกลองส าหรบเกบอปกรณตางๆ ทใชในการท างาน เชน วาดรป ปรบเปลยนรปราง และแตงเตมสสนใหกบชนงาน

ไทมไลน (Timeline) ท าหนาทเปนตวจดเกบขอมลของ Animation โดยจะแบงออกเปนชองๆ เรยกวา เฟรม (Frame)

ท าหนาทเหมอนกนแผนเฟรมในมวนฟลมภาพยนตร

Stage

Timeline

Panels

Properties Inspector Toolbox


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

ทงหมด เปรยบเสมอนเวทแสดง เมอเราสรางงานหรอวางวตถบน Stage เราจะเรยกภาพรวมนวา Scene

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

แถบคณสมบต (Properties) เปนหนาตางทใชแสดงคณสมบตตางๆ ของวตถ และเราสามารถเปลยนแปลงคณสมบตเหลานนได เชน ขนาดของพนทการท างาน สพนหลง เมอมการคลกเลอกวตถ คณสมบตจะมการเปลยนแปลงไปตามคณลกษณะของวตถนนๆ Tips & Tricks : วตถ (Object)

วตถ (Object) ในทน หมายถง รปทรง รปภาพ ภาพกราฟกทวาด หรอน าเขามาใชงานใน Adobe Flash นนเอง

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

เมอตองการสราง Movie File ใหมสามารถกระท าไดดงน 1. เมน File 2. เลอก New

การก าหนดคณสมบตของเอกสาร

กอนทจะท าการสราง Movie File ใน Flash ควรจะก าหนดขนาดชนงาน Dimension Frame Rate และสพนหลงของ Movie กอน 1. เมน Modify 2. เลอก Document Settings 3. ก าหนดคาตามตองการ

- Dimensions: ก าหนดขนาดของ Stage โดยก าหนดทสวนของ Width และ Height

Ctrl + N

หรอกดป ม Ctrl + J


- Match: Printer : ก าหนดใหพนท Stage มขนาดเทากบทต งไวบนเครองพมพ Contents : ก าหนดใหพนท Stage พอดกบรปทงหมดทสรางไวใน Movie Default : ก าหนดรปแบบมาตรฐานใหกบ Stage - Background Color : ก าหนดสพนของ Stage - Frame Rate : ก าหนดจ านวนเฟรมทแสดงตอวนาท (fps) - Ruler Units : ก าหนดหนวยของไมบรรทด - Make Default : ก าหนดใหรปแบบทไดก าหนดไวเปนรปแบบมาตรฐาน

4. คลกป ม OK

การปรบการแสดงขนาดพนทท างาน เลอกขนาดทตองการ Show Frame : แสดงขนาดชนงานใหพอดกบพนทวาง

การเรยกใช ไมบรรทด เมน View > Rulers หรอกดป ม Ctrl+Alt+Shift+R ลากเสนไมบรรทดมาไวใช ถาไมตองการใชกลากเกบไวทเดม หากไมตองการเสนไมบรรทดใหกดเพอยกเลกเชนเดม


เครองมอตางๆ (Toolbox)

Tips & Tricks : คยลดคยดวน (Shortcut Keys) หมายถง เครองมอทชวยในการเรยกใชโปรแกรมไดอยางรวดเรวและสามารถเขาถงโปรแกรมหรอแฟมขอมลทตองการไดทนท ในการเรยกใชค าสงตางๆ ของชดโปรแกรม Adobe Flash ซงปกตแลว เราจะอาศยการเลอนเมาสไปคลกท Menu bar หรอ Tools bar แตยงมวธหนงซงงายกวานนอก แตตองอาศยความจ านดหนอย สงนนเรยกวา คยลด (Shortcut Keys) เปนการเรยกใชค าสงโดยการกดจากแปนคยบอรด คยลด คยดวนเหลาน จะชวยประหยดเวลาการท างานใหเราไดมาก ชวยใหท างานรวดเรวยงขน เปนวธทจะใชโปรแกรมใหสะดวกทสด นอกจากนแลวในชดโปรแกรม Adobe Professional กจะใชคยลดสวนใหญเหมอนกน

Selection Tool หรอกดป ม V SubSelection Tool หรอกดป ม A Free Transform Tool หรอกดป ม Q 3D Rotation Tool หรอกดป ม W Lasso Tool หรอกดป ม L Pen Tool หรอกดป ม P Text Tool หรอกดป ม T Line Tool หรอกดป ม N Rectangle Tool (R) Oval Tool (O) Rectangle Primitive (R) Oval Primitive (O) PolyStar Tool Pencil Tool หรอกดป ม Y Brush Tool หรอกดป ม B Deco Tool หรอกดป ม D Bone Tool หรอกดป ม M Paint Bucket Tool หรอกดป ม K Eyedropper Tool หรอกดป ม I Eraser Tool หรอกดป ม E Hand Tool หรอกดป ม H Zoom Tool หรอกดป ม Z Stroke Color Fill Color Black and White และ Swap Colors Tool


Line Tool

Line Tool ใชในการวาดเสน โดยการคลกท แลวคลกเมาสซายคาง แลวลากท Stage โดยถาตองการเสนตรง ใหกดป ม Shift คางขณะวาด

การก าหนดคณสมบตของเสน

ก าหนดสเสน

ก าหนดความหนาของเสน

ก าหนดลกษณะเสน

การท าเสนตรงใหกลายเปนเสนโคง ใช Selection Tool หรอปรบแตงรปทรงวตถ

- ใชเลอกวตถ - ยายวตถ - คดลอกวตถ (กด Alt ขณะยาย)

ใชปรบโคง ใชยายจด


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

Shift คางขณะวาด การคณสมบตของวงกลม

ก าหนดสเสน

ก าหนดความหนาของเสน

ก าหนดลกษณะเสน

Rectangle Tool ใชในการวาดรปสเหลยม โดยถาตองการใหวาดแลวเปนสเหลยมจตรส ใหกดป ม Shift คางขณะวาด Option เพมเตม

เมอคลกจะใหก าหนดความโคงของมม

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


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

Options เพมเตม

- Straighten : จะท าการปรบแตงเสนทวาดใหมลกษณะเปนเสนตรง - Smooth : จะท าการปรบแตงเสนทวาดใหมลกษณะเปนเสนโคง - Ink : ใชวาดในลกษณะ Freehand

Pen Tool ใชวาดเสนตรง หรอเสนโคงโดยสามารถปรบโคงขณะวาดได

สญลกษณของเมาสกบการท างานกบ Pen Tool

เลอก Pen Tool >> คลกทจดเรมตน >> คลกทจดถดไป กดป มเมาสคาง แลวลากเมาสเพอปรบโคง >> Double Click เพอหยดการวาด

แสดงวาการใชงาน Pen Tool กบวตถชนนนๆยงไมจบการท างาน

แสดงวาการใชงาน Pen Tool กบวตถชนนนๆ สนสดการท างานแลว

ใชในการเพม Node ณ ต าแหนงทตองการดงรป

ใชในการปรบสวนโคงใหเปนเสนตรง

ใชในการลบ Node ณ ต าแหนงทตองการดงรป


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

Fill Color แลวระบายโดยการคลกเมาสคางตามตองการ

การเลอกลกษณะของแปรงระบายสทใช ขนาดและหนาตดของแปรงระบายส เราสามารถเลอกใชงานไดจาก Option ของแปรงระบายส (Brush Tool) โดยก าหนดขนาดของแปรงระบายทชอง Brush Size และก าหนดลกษณะหนาตดของแปรงระบายไดทชอง Bruch Shape


การก าหนดคณลกษณะของการระบายส

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

ก าหนดใหระบายสทบทกสวนของภาพ

ก าหนดใหระบายสทบในพนทเวนเสนกรอบรปไว

ก าหนดใหระบายสในสวนพนหลง

ก าหนดใหระบายสทบในสวนทไดท าการ Selection ไว

ก าหนดใหระบายสทบพนทดานใน

ภาพปกต การระบายสแบบปกต การระบายสพนทท งหมดยกเวนกรอบ

การระบายสพนหลงภาพ การระบายสพนททเลอก การระบายสพนภายในกรอบ

การลบสวนทไมตองการออกโดย Eraser Tool เราสามารถลบสวนทไมตองการของภาพออกได โดยการคลก drag mouse ลบบรเวณท ไมตองการของภาพออก

การก าหนดคณลกษณะของการลบ

ก าหนดใหลบทกสวนของภาพ

ก าหนดใหลบสวนทเปนพนทยกเวนเสนกรอบ

ก าหนดใหลบเฉพาะเสนกรอบ

ก าหนดใหลบเฉพาะพนททถกเลอก

ก าหนดใหลบเฉพาะพนทภายในเสนกรอบ


ก าหนดใหลบทกสวนของภาพ ก าหนดใหลบสวนทเปนพนทยกเวน

เสนกรอบ ก าหนดใหลบเฉพาะเสนกรอบ

ก าหนดใหลบเฉพาะพนททถกเลอก ก าหนดใหลบเฉพาะพนทภายใน เสนกรอบ

การท างานกบส

Stroke และ Fill เสนและพนทภายใน Stroke : เปนเสนกรอบรปหรอเสนโครงรางของวตถ หรอเปนเสนทถกสรางขนมา เชน เสนตรง เสนโคงหรอเสนทเปนลวดลาย Fill : เปนพนทภายในของเสนรอบรป หรอพนททไมมเสนรอบรปกไดเปนรปทรง 2 มต ซงเราสามารถทจะแยกระหวาง Stroke กบ Fill ไดดงน

Stroke

Fill

Stroke

Fill


ในกลมของ Colors จะใชในการปรบสพนและสเสนของวตถ

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

การใชหนาตาง Color Mixer Color Mixer เปนหนาตางแสดงคาหรอผสมเพอน าไปใชกบวตถ โดยสทไดจะน าไปใชกบ Stroke Color และ Fill Color โดยการคลกเมาสเลอกสทแถบสในหนาตาง Color Mixer นอกจากนนยงมรปแบบใหเลอกผสมสดงน แบบ Solid : เปนการก าหนดสพน แบบ Linear : เปนการก าหนดใหมการไลสแบบเสนตรง แบบ Redial : เปนการก าหนดใหมการไลสจากจด ศนยกลางวงกลมไปตามแนวรศม แบบ Bitmap : เปนการก าหนดใหสพนเปนภาพ

ใชก าหนดสเสน ใชก าหนดสพน สลบระหวางสเสนกบสพน

ไมก าหนดส สทเปน Default


Gradient Transform Tool

Gradient Transform ใชปรบแตงสแบบเฉด โดยคลก Gradient Transform Tool แลวคลกทวตถจะไดผลดงรป

Eyedropper Tool

ใชดดสเพอน าไปใชงาน

- ถาชทเสนสญลกษณของเมาสเปนรป ซงเปนการดดสของเสนเกบใน Stroke Color Tool

- ถาชทพ นวตถสญลกษณของเมาสเปนรป ซงเปนการดดสพนเกบใน Fill Color Tool

Zoom Tool ใชในการยอขยายวตถ Options เพมเตม

- การขยายวตถสามารถกดป มไดโดยใช Ctrl + = (Ctrl รวมกบเครองหมาย =) - การยอวตถสามารถกดป มไดโดยใช Ctrl + - (Ctrl รวมกบเครองหมาย –)

Hand Tool

ใชในการเลอนดขอมล ในกรณททานใช Tool ใดๆ แลวตองการใช Hand Tool ใหกด Space bar คาง

ปรบทศทางการไลเฉดส

ปรบความกวางของเฉดส

ยอวตถ ขยายวตถ

ถากด Alt คางขณะคลก จะได Zoom Tool ในลกษณะตรงกนขาม ถา Double Click ท Zoom Tool จะไดการขยายแบบ 100% ถา Double Click ท Hand Tool จะขยายเทาขนาดของ Stage


การจดการกบวตถ

การปรบขนาดวตถ (Scale) 1. เลอกวตถ 2. เมน Modify 3. ค าสง Transform 4. เลอก Scale การหมนวตถ (Rotate) 1. เลอกวตถ 2. เมน Modify 3. ค าสง Transform 4. เลอก Rotate

Rotate 90_CW : หมนตามเขมนาฬกา Rotate90_CCW : หมนทวนเขมนาฬกา

การบดภาพ (Transform) 1. เลอกวตถ 2. เมน Modify 3. ค าสง Transform 4. เลอก Flip Vertical หรอ Flip Horizontal

Free Transform Tool ใชในการปรบขนาด เปลยนแปลงรปทรงวตถ

1. เลอกวตถ 2. คลก Free Transform Tool


Option เพมเตม

- Rotate and Skew : ใชในการหมนและบดวตถ

- Scale : ใชปรบขนาดวตถ

- Distort : ใชปรบมมมองของวตถ

- Envelope : ใชปรบสภาพแวดลอมของวตถ

การจดล าดบวตถ

วธการจดล าดบวตถดงน Bring to Front : ใหวตถทถกเลอกอยหนาสด Bring Forward : ใหวตถทถกเลอกขนมาอก 1 ล าดบ Send Backward : ใหวตถทถกเลอกถอยหลงลงไปอก 1 ล าดบ Send to Back : ใหวตถทถกเลอกถอยลงไปหลงสด

Rotate and Skew

Distort

Scale

Envelope

แสดงการหมนวตถ

แสดงการบดวตถ

แสดงการปรบขนาดวตถ

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

แสดงการปรบสภาพแวดลอมวตถ


การจดเรยงวตถ Align เปนค าสงในการจดเรยงวตถ เพอใหวตถเปนระเบยบ เชน เราตองการใหวตถอยในแนวเดยวกน เชน ชดซาย ชดขวา เรยงหนากระดาน หรอใหมระยะหางเทากน เปนตน

1. เลอกเมน Window > Align 2. ท าการ Select วตถ 3. เลอกวธจดเรยงตามตองการ

Align : จดวตถใหเรยงชดซาย กลาง ชดขวา Distribute : จดวตถใหอยในระยะทเสมอกน โดยค านวณจากวตถทงหมด Match Size : จดวตถใหมขนาดเทากบวตถทมขนาดใหญทสด ในแนวนอนหรอแนวตง Space : จดระยะหางใหเทากน To Stage : จดวตถโดยค านวณจาก Stage ทงหมด

การจดกลมวตถ (Group)

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

เลอกวตถ เลอกเมนค าสง Modify, Group หรอกดป ม Ctrl + G วตถทผานการจดกลมแลว จะมกรอบสฟาๆ ลอมรอบ

ภาพกอนจดกลม ภาพหลงจดกลม


การแยกกลมวตถ (Un-Group)

ในงานบางงาน เชน การท า Tweening Motion วตถนนๆ จะตองไมอยในลกษณะกลม ดงนนจะตองท าการแยกชนสวนกอน โดย

เลอกวตถ เลอกเมนค าสง Modify, Ungroup หรอกดป ม Ctrl + Shift + G

หรอเลอกเมนค าสง Modify, Break apart หรอกดป ม Ctrl + B วตถนนจะปรากฏเปนจดเลกๆ

ภาพลกษณะทเปนกลม ภาพทผานการ Ungroup หรอ Break apart

การแยกกลมวตถโดยใช Break Apart Break Apart เปนการแยกวตถทถก Group ไว นอกจากนนยงสามารถแยกองคประกอบของวตถประเภท Symbol, Text Block และภาพ Bitmap เพอท าการตกแตงและปรบเปลยนวตถ ซงการ Ungroup ไมสามารถท าได

1. ท าการ Select วตถทเราตองการ Break Apart 2. เลอกเมน Modify > Break Apart หรอกดป ม Ctrl + B เพอท าการแยกองคประกอบ

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

Tips & Tricks : ในกรณทเปนภาพ Bitmap เราจะไมสามารถแกไขภาพได เราจงตองท าการ Break Apart กอน เพอแยกองคประกอบของภาพ จากนนเราจะสามารถท าการแกไขภาพไดดวยเครองมอตางๆ ท Adobe Flash เตรยมไวให


การใชตวอกษร (Using Text)

การใสขอความโดยใช Text Tool

1. คลกเมาสท ตวชเมาสจะเปลยนเปนรป 2. ลากเมาสบรเวณทตองการสรางกลองขอความ โดยการก าหนดขนาดตามความยาวทเรา

ลาก 3. ก าหนดรปแบบของ Font และขนาดของ Font ไดจากหนาตาง Properties ตามตองการ

4. เมอก าหนดลกษณะตวอกษรเสรจแลว ใหพมพขอความทตองการลงไป 5. จากนนท าการทดสอบผลลพธโดยกดป ม Ctrl + Enter

การปรบแตงตวอกษรใหเขากบงานทออกแบบ

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

1. คลกเมาสเลอกขอความทตองการปรบแตงตวอกษรในขอความนน 2. เลอกค าสง Modify > Break Apart เพอแยกองคประกอบจากตวอกษรใหกลายเปนภาพ

3. คลกเมาสท Arrow Tool เพอปรบแตงตวอกษรใหไดรปแบบตวอกษรตามตองการ โดยสงเกตทเมาสจะเปลยนเปนรปแบบตางๆ ดงน

ก าหนดสตวอกษร ก าหนดการจดเรยงตวอกษร ก าหนดขนาดตวอกษร

เปนการเลอกทงตวอกษรนนเพอจะกระท าการใดๆ

เปนการปรบแตงสวนโคง


กดป ม Ctrl + B 2 ครง เพอแยกองคประกอบทงหมด หากขอความมมากกวา 1 ตวอกษร การ Break Apart ครงแรก จะท าใหขอความทอย

บรรทดเดยวกนถกแยกออกเปนแตละตวอกษร สวนการ Break Apart ครงท 2 จะเปนการแยกองคประกอบของขอความท าใหปรบแตงขอความได

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

1. คลกเมาสทป ม Text tool พมพขอความทตองการสรางลงค 2. จากนนไปทหนาตาง properties ใหเลอกเปน Static Text 3. พมพ URL หรอทอยของเวบไซตหรอหนาเวบเพจทเราตองการจะเชอมโยงในชอง URL ใน

หนาตาง properties เชน Hhttp://www.trainingdd.com 4. เลอก Target ทเราตองการ โดยเลอกวาตองการเปดหนาเวบขนมาในรปแบบใด จาก

ตวอยาง เราจะเปดหนาตางใหมขนมาโดยเลอก _blank

5. ทดสอบผลลพธกด Ctrl + Enter สงเกตเมอวางเมาสทขอความจะกลายเปนรป 6. ใหคลกเมาสทขอความ จะปรากฏหนาตาง Internet Explorer ขนมา

การ Break Apart ครงแรก จะถกแยกออกทละตวอกษร

การ Break Apart ครงท 2 จะท าใหปรบแตงขอความได

http://www.trainingdd.com/


การใชงานรปภาพ Graphic

ในกรณทตองการน าไฟลภาพเขามาใชงาน ท าไดดงน 1. เมน File 2. เลอก Import > Import to stage หรอกดป ม Ctrl + R

3. เลอกไฟลภาพ 4. คลกป ม Open

การท าซ ารปภาพ เมอท าการสรางกราฟกแลว และตองการไดรปภาพนนซ าๆ หลายภาพ สามารถปฎบตไดดงน

1. เลอกกราฟกทตองการท าซ า 2. เมน Edit 3. เลอก Duplicate

Ctrl + D

3

4


การท างานกบภาพบตแมพ

ภาพบตแมพท Import เขามาใชงาน กอนทจะน าไปตกแตง จะตองท าการแปลงภาพใหอยในลกษณะของภาพ Vector กอน โดย

1. คลกเลอกภาพบตแมพ 2. เลอกค าสง Modify, Trace Bitmap ปรากฏหนาตาง ดงน

3. ปรบคาตางๆ ดงน

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

Minimum Area จ านวน Pixel โดยรอบทน ามาใชก าหนดส Curve Fit & Corner Thershold ความเรยบของเสนขอบ และการคงสภาพของมมแหลม

ของภาพ


การใชสญลกษณ (Symbol & Instance)

รจก Symbol & Instance

Symbol เปนวตถท Flash สามารถน ามาใชเปนสวนประกอบของงาน Animation หรอใชในการสรางงาน

อนๆ ได เชน วตถทท าการ import เขามาใหเปน Symbol โดย Symbol นจะถกแบงออกเปน 3 ประเภท ซงมหนาทแตกตางกนออกไป ไดแก Symbol

ประเภท Movie Clip, Button และ Graphic Instance เปน Symbol ทถกใชงานอยบน Stage วตถทอยใน stage โดยทยงไมมการแปลงใหเปน

Symbol ถอวาเปนเพยงวตถทน ามาใชประกอบใน Stage เทานน ซง Instance กมลกษณะเหมอนกนกบ Symbol

Symbol เปรยบเสมอนคลงภาพส าเรจรป ท Flash เตรยมไวใหใชงาน ประกอบดวย ภาพนง เรยกวา Graphics และภาพเคลอนไหว เรยกวา Movie Clip

การเรยกใชงาน

เลอกเมนค าสง Window, Common Libraries แลวเลอกรายการยอยทตองการ


ประเภทของ Symbol

Movie clip : เปน Symbol ทมลกษณะเปนภาพเคลอนไหว ซงเราอาจเรยกไดวาเปน Animation ขนาดเลกกได หากเราสราง Movie Clip นเกบไวใน Library และเมอน ามาใชบน Stage เรากจะได Movie Clip ทสามารถแสดงภาพเคลอนไหวไดอยางอสระ โดยไมจ าเปนทจะตองขนอยกบ Timeline บน Stage นน นอกจากนนเรายงสามารถใสเสยงใหกบ Movie Clip ไดดวย จงท าให Movie Clip เปนตวหลกในการท า Animation

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

Graphic เปน Symbol ทมลกษณะเปนภาพนง ซงเปนสวนประกอบหนงใน Animation และสามารถทจะก าหนดใหมการตอบโตกบผใชได แตไมสามารถใสเสยงได

การเปลยนวตถเปน Symbol 1. ใช Selection tool คลกเลอกวตถทตองการ 2. เลอกเมน Insert > Convert to Symbol หรอกดป ม F8


การสราง Animation

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

1. การเคลอนทแบบยายสถานท (Motion) เชน วตถเคลอนทจากจด A ไปจด B

2. การเคลอนทโดยการเปลยนแปลงลกษณะ (Transform) เชน ตวอกษรถกเปลยนแปลงรปราง

การท างานกบ Timeline

Timeline คอสวนทเปนตารางเวลา ใชก าหนดการสราง Animation ในแตละชวงเวลา

การก าหนด Keyframe

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

A B


1. คลกเลอกต าแหนงเฟรม

2. เมน Insert > timeline 3. เลอก Keyframe

** หมายเหต ในกรณทเราแทรก Keyframe ณ. ต าแหนง Keyframe นนจะมวตถเดมปรากฏอย

การก าหนด Blank Keyframe

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

1. คลกเลอกต าแหนงเฟรม

2. เมน Insert > timeline 3. เลอก Blank Keyframe

** หมายเหต ในกรณทเราแทรก Blank Keyframe เมอมการสรางวตถ จะปรากฏเปน Keyframe

การลบ Keyframe

หรออกดป ม F6

Keyframe

หรอกดป ม F7

Blank Keyframe


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

1. เลอก Keyframe

2. เมน Insert > timeline 3. เลอก Clear Keyframe

การแทรกเฟรม

เฟรมคอสวนทมเนอหาเดยวกบ Keyframe ทอยดานซาย โดยทานสามารถแทรกเฟรมไดดงน 1. สรางวตถทเฟรมแรก จะปรากฏ Keyframe ดงรป

2. เลอกต าแหนงเฟรมทตองการจะแทรกเฟรม

3. เมน Insert > timeline 4. เลอก Frame

หรอกดป ม Shift + F6

หรอกดป ม F5

Frame


การลบเฟรม

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

1. เลอกเฟรมทตองการจะลบ

2. เมน Insert 3. เลอก Remove Frames

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

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

1. Tweened Animation เปนการสรางภาพเคลอนไหวททานตองมภาพทเฟรมเรมตน และภาพทเฟรมสดทายเทานน

สวนภาพในเฟรมอนๆ โปรแกรมจะท าการสรางขนมาใหเอง โดยแยกเปน 2 แบบ 1.1. Motion Tween เปน animation ทท าการเปลยนขนาด ส หรอหมนวตถ 1.2. Shape Tween เปน animation ทท าการเปลยนรปทรงของวตถ

2. Frame by Frame เปนการสรางภาพเคลอนไหว โดยทานตองสรางภาพขนมาเองในทกๆ เฟรม

ภาพแสดง Timeline ของ animation

หรอกดป ม Shift + F5

Frame ทถกลบ

Motion Tween

Shape Tween

Frame by Frame

พนสมวง พนสเขยว


การสราง Animation ดวย Motion Tween

ตวอยางการสรางวตถวงกลม ใหเคลอนทไปทางดานขวา 1. สรางวตถท Frame ท 1

2. คลกเลอกต าแหนง Frame ท 15 (หรอต าแหนงทตองการ) 3. เมน Insert > timeline > Frame (หรอกดป ม F5) โดย Timeline จะมลกษณะดงน

4. เมน Insert > timeline > Create Motion Tween โดย Timeline จะมลกษณะดงน

5. เลอนต าแหนงวงกลมไปดานขวา (หรอเลอนไปตามทศทางททานตองการ)


6. พอเสรจจะไดผลดงรป

การแสดงผลการท างานของ Animation

เมอไดท าการสราง Animation Graphic แลวสามารถทดสอบการแสดงผลของ Animation ไดดงน

1. เมน Control 2. เลอก Play

การแสดงหนาตาง Control

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

1. เมน Window 2. ค าสง Toolbars 3. เลอก Controller

Enter


การก าหนดการแสดงผลแบบวนรอบ (Loop)

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

1. เมน Control 2. เลอก Loop Playback

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

การสราง Animation โดยใช Motion Path

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

1. สราง Movie ใหม (เมน Insert > New) 2. วาดวตถทเฟรมท 1

3. คลกเลอกต าแหนง Frame ท 15 (หรอต าแหนงทตองการ) 4. เมน Insert > timeline > Frame (หรอกดป ม F5) 5. เมน Insert > timeline > Create Motion Tween 6. เลอนต าแหนงวงกลมไปดานขวา (หรอเลอนไปตามทศทางททานตองการ) จะไดผลดงรป

2


7. เมน Insert > Motion Guide (จะม Guide Layer เพมดงรป)

8. คลกเลอก Guide Layer

9. สรางเสน path เพอเปลยนรปแบบการเคลอนท (ใช Pen Tool ลากเสนและปรบโคงดงรป)

Guide Layer

เลอก Guide Layer


10. เมน Control > Play (หรอกดป ม Enter) จะเหนวาวตถเคลอนทตาม Path ทก าหนด

การสราง Animation โดยก าหนดคณสมบตของ Motion

Uตวอยาง U ก าหนดใหโลโกคอยๆ แสดง แลวคอยๆ หายไป ดงตวอยาง

1. สรางสเหลยมมมโคง

2. คดลอกสเหลยม โดยเปลยนมมเปน 45 องศา, 90 องศา และน ามาประกอบกนดงรป


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

4. คดลอกวตถเปน 4 ชน แลวปรบแตงวตถใหไดดงรป

5. ใสวงกลมตรงกลางวตถทงหมด และลบสวนของวงกลมออก เพอตดชนสวนทไมตองการ

6. สรางตว C เพอน าไปไวตรงกลางดงรป

Modify >> Transform >> Flip Horizontal

Modify > Transform > Flip Vertical

- Modify > Transform > Flip Vertical - Modify > Transform > Flip Horizontal

สรางวงกลม 2 วง ลบวงกลมกลางออก

สรางสเหลยม ลบสเหลยมออก


7. น าตว C ทสรางขนไปรวมกบสวนแรก ดงรป

8. คลกเลอกต าแหนง Frame ท 10 9. เมน Insert > Frame (หรอกดป ม F5) 10. เมน Insert > Create Motion Tween 11. เมน Insert > Keyframe (หรอกดป ม F6)

12. คลกเลอกต าแหนง Frame ท 20 13. เมน Insert > Keyframe (หรอกดป ม F6) 14. คลกเลอก Frame ท 1 ซงเปน Keyframe 15. คลกทวตถ 16. ปรบคณสมบตทหนาตาง Properties เลอก Color เปน Alpha ก าหนด 0%


17. คลกเลอก Frame ท 20 ซงเปน Keyframe (ท าซ าเหมอนขนตอนท 15) 18. เมน Control > Play (หรอกดป ม Enter) เพอดผล

การสราง Animation ดวย Shape Tween

เปนการเปลยนรปทรงของวงกลมใหเปนสเหลยม 1. วาดวงกลมท Frame ท 1

15

16


2. คลกเลอก Frame ท 10 3. เมน Insert > Blank Keyframe (หรอกดป ม F7) 4. วาดสเหลยมดงรป

5. คลกเลอก Frame

6. ก าหนด Properties ของเฟรมในสวน Tween เปน Shape

จะไดผลดงน

5

6


7. เมน Control >> Play (หรอกดป ม Enter) เพอดผล

การสราง Animation ดวย Frame by Frame

เปนการสรางภาพโดยทานจะตองสรางภาพขนมาเองในทกๆ เฟรม 1. วาดภาพท Frame ท 1 ดงรป


2. คลกเลอกต าแหนง Frame ท 2 3. เมน Insert > Keyframe (หรอกดป ม F6)

4. คลกเลอก Frame ถดๆ ไป > กดป ม F6 > ปรบแตงภาพเพมเตม

5. เมน Control >> Play (หรอกดป ม Enter) เพอดผล

เฟรมท 3 เฟรมท 4 เฟรมท 5 เฟรมท 6 เฟรมท 7

ปรบแตงภาพ


การใชงานเลเยอร (Layer)

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

การแทรกเลเยอรใหม 1. เมน Insert 2. เลอก Layer

การลบเลเยอร

1. คลกเมาสขวาทเลเยอรทตองการจะลบ 2. เลอก Delete Layer

เลเยอรทแทรกมาใหม

คลกเพอแทรกเลเยอรใหมได

1

2

1. เลอก Layer

2. คลก Delete Layer


การควบคมเลเยอร

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

- Show / Hide All Layers: ใชแสดงหรอซอนเลเยอร เชน

- Lock / Unlock All Layers: ใชก าหนดวาจะใหมการแกไขขอมลในเลเยอรไดหรอไม โดยถาลอกเลเยอรใดไว เลเยอรนนจะแกไขไมได แตถายกเลกการลอก กสามารถแกไขขอมลได เชน

- Show All Layers As Outlines: ใชก าหนดใหขอมลของเลเยอรแสดงแบบโครงราง คอแสดงเปนลายเสน หรอไม เชน

Lock / Unlock All Layers Show All Layers As Outlines Show / Hide All Layers

เลเยอรใดมรปดนสอ แสดงวาขณะน เราก าลงท างานกบเลเยอรนนอย

ขอมลใน Layer 1 จะถกซอน โดยถาเราท าการซอนเลเยอรใดแลว เลเยอรนนกไมสามารถแกไขได

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

ขอมลใน Layer 1 จะแสดงเปนแบบโครงราง


การใชงาน Mask Layer

Mask Layer เปนเลเยอรทเหมอนเปนหนากากของเลเยอรทอยดานหลง Mask Layer น น ตวอยางทจะแสดงตอไปนเปนการสราง Mask Layer ใหกบขอความ 1. พมพขอความท Frame ท 1

2. คลกต าแหนง Frame ท 20 3. เมน Insert > Frame (หรอกดป ม F5) 4. เมน Insert > Layer (แทรกเลเยอรใหมเพอท า Mask Layer) 5. วาดวงกลมทตนขอความ

1


คลกเลอกเฟรมของเลเยอรท 2

6. เมน Insert > Create Motion Tween

7. คลกต าแหนง Frame ท 10 8. Insert > Keyframe (หรอกดป ม F6) 9. เคลอนวงกลมมาทางดานขวา

10. คลกต าแหนง Frame ท 20 11. Insert > Keyframe (หรอกดป ม F6)

6

8

10


12. เคลอนวงกลมกลบมาทางดานซาย

13. คลกเมาสขวาท Layer 2 > Mask

14. เมน Control > Play (หรอกดป ม Enter) เพอดผล


สราง Mask Layer ในภาพ

1. File > Import > Import to Stage 2. เลอกภาพทตองการ 3. ปรบขนาดภาพใหพอดกบ Stage 4. คลกเลอกภาพ 5. Modify > Convert to Symbol 6. ตงชอ Symbol 7. เลอก Graphic > OK 8. Window > Panels > Effect 9. เลอก Brightness ก าหนดใหภาพดมดๆ 10. คลกเลอกเฟรม 30 > กดป ม F5 11. คลกขวาท Layer > Insert Layer > เฟรม 1 12. วาดวงกลม 13. คลกเฟรม 10 > กดป ม F6 14. Insert > Motion Tween 15. เลอนวงกลมไปดานขวา 16. คลกเฟรม 10 > กดป ม F6 17. Insert > Motion Tween 18. เลอนวงกลมไปดานขวา 19. คลกเฟรม 20 >> กดป ม F6 20. เลอนวงกลมไปดานลาง 21. คลกเฟรม 30 >> กดป ม F6 22. เลอนวงกลมไปมมบนขวา 23. คลกขวาท Layer 3 > Mask 24. ทดสอบผลลพธ


Note : …………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… ……………………………………………………………………………………………………………………………………………………………………………………………………………………………………………… ………………………………………………………………………………………………………………………………………………………………………………………………………………………………………………

เอกสารประกอบการอบรม หลักสูตร...

Education