adobe flash cs6 -...

119
ADOBE FLASH CS6 วิทยากรผู้สอน : อรณีย์ รอดสวัสดิ์ (แหม่ม) วิทยากรผู้ช่วย : อรอนงค์ จันทร (น้า) วิทยากรผู้ช่วย : ธาริณี นิรันดร (อ๊อบ) วิทยากรผู้ช่วย : กรวีร์ ลีก้าเนิดไทย (แพรว)

Upload: ngokiet

Post on 12-Apr-2018

237 views

Category:

Documents


10 download

TRANSCRIPT

Page 1: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

ADOBE FLASH CS6

วทยากรผสอน : อรณย รอดสวสด (แหมม)

วทยากรผชวย : อรอนงค จนทร (น า)

วทยากรผชวย : ธารณ นรนดร (ออบ)

วทยากรผชวย : กรวร ลกาเนดไทย (แพรว)

Page 2: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

เน อหาหลกสตร

เรมตนรจกกบ Adobe Flash

การใชงานโปรแกรมเบองตน

การวาดรปและการลงส

ซมโบล (Symbol) และอนสแตนซ (Instance)

การน าเขารปภาพและวดโอ

การสรางภาพเคลอนไหว (Animation)

อรณย รอดสวสด

Page 3: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

เน อหาหลกสตร

การท างานกบเลเยอร

การสรางมฟวคลป (Movie Clip)

การสรางปม (Button)

การเลนเสยงในมฟว

การเสนอผลงานบนเวบเพจ (Publishing)

รจกกบภาษาโปรแกรม Action Script และการประยกตในโปรแกรมทพฒนาขน

อรณย รอดสวสด

Page 4: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

ADOBE FLASH CS6

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

อรณย รอดสวสด

Page 5: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

ลกษณะเดนของ ADOBE FLASH CS6

สามารถสรางภาพเคลอนไหว

สรางงานในรปแบบ Multimedia

ใสลกเลนตางๆ

สรางการโตตอบ

อรณย รอดสวสด

Page 6: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

ลกษณะเดนของ ADOBE FLASH CS6

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

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

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

เราอาจใช Flash สรางเวบไซตทงเวบเลยกได

อรณย รอดสวสด

Page 7: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

ลกษณะเดนของ ADOBE FLASH CS6

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

อรณย รอดสวสด

Page 8: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

งานทได ADOBE FLASH CS6

File มขนาดเลก

ภาพทไดไมแตก

อรณย รอดสวสด

Page 9: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

ความแตกตางระหวาง FILE .FLA และ .SWF

File .Fla (Flash document) File .swf (Flash movie)

สามารถแกไขขอมลหรอวตถภายหลงได ไมสามารถแกไขขอมลหรอวตถภายหลงได

แสดงผลบน Browser ชา แสดงผลบน Browser เรว

ผลงานทไดมขนาดใหญ ผลงานทไดมขนาดเลก

Icon ทไดมสแดง Icon ทไดมสขาว

อรณย รอดสวสด

Page 10: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

ชนดของภาพกราฟก

ภาพกราฟกออกเปน 2 ชนด คอ

1. ภาพกราฟกชนดบตแมป (Bitmap )

ภาพกราฟกชนดบตแมปเปนภาพทเกดจากเมดสหรอจดสทเราเรยกกนวาพกเซล(pixel) มาเรยงกนจนเปนภาพ เพราะฉะนนความสวยงามของภาพจงขนอยกบความละเอยดของเมดส

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

ขอเสย ภาพชนดนจะมขนาดใหญตามความละเอยดภาพ เพราะตองใชจ านวนพกเซลเพมขนตาม นอกจากนนการน าภาพมาขยายใหใหญกวาขนาดปกตจะท าใหภาพทไดไมชด

อรณย รอดสวสด

Page 11: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

ภาพกราฟกชนดบตแมป (BITMAP )

อรณย รอดสวสด

Page 12: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

ชนดของภาพกราฟก

ภาพกราฟกออกเปน 2 ชนด คอ2. ภาพกราฟกชนดเวกเตอร (Vector )

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

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

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

อรณย รอดสวสด

Page 13: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

ภาพกราฟกชนดเวกเตอร (VECTOR )

อรณย รอดสวสด

Page 14: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

WELCOME SCREENสรางไฟลใหมแบบตางๆ

สรางไฟลจาก Template

เปดไฟลเกามาใชงาน

อรณย รอดสวสด

Page 15: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

สวนประกอบของ ADOBE FLASH CS61

6

4

3

5

2

Menu Bar

Toolbox

Stage

Timeline

Panel

Properties

อรณย รอดสวสด

Page 16: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

สวนประกอบของ ADOBE FLASH CS6

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

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

อรณย รอดสวสด

Page 17: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

เครองมอทใชในการสรางงานSelection : เลอกออบเจค

Subselection : ปรบแตงรปทรงออบเจค

Free Transform :ปรบรปทรงออบเจค

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

3D Rotation : ปรบแตงรปทรงออบเจคแบบ 3 มต

3D Translation : เคลอนยายออบเจคแบบ 3 มต อรณย รอดสวสด

Page 18: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

เครองมอทใชในการสรางงาน

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

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

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

Lasso : เลอกออบเจคหรอพนทบางสวนจองออบเจค

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

อรณย รอดสวสด

Page 19: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

เครองมอทใชในการสรางงานText : พมพขอความ

Line : วาดเสนตรง

Rectangle : วาดสเหลยม

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

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

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

PolyStar : วาดรปหลายเหลยมและรปดาวอรณย รอดสวสด

Page 20: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

เครองมอทใชในการสรางงานPencil : วาดรปทรง เสนตรง เสนโคง

Brush : ระบายสภาพ

Spray Brush : พนสภาพแบบสเปรย

Deco : เตมลวดลายใหกบออบเจค

อรณย รอดสวสด

Page 21: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

เครองมอทใชในการสรางงานBone : สรางขอตอการเคลอนไหวใหกบออบเจค

Bind : ปรบแตงการเคลอนไหวใหกบออบเจค

Paint Bucket : เตมสพนใหกบออบเจค

Ink Bottle : เตมสเสนใหกบออบเจค

อรณย รอดสวสด

Page 22: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

เครองมอทใชในการสรางงานEyedropper : กอปปสจากออบเจคอน

Eraser : ลบเสนหรอสพนของออบเจค

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

Zoom : ยอ / ขยายมมมองภาพบนสเตจ

อรณย รอดสวสด

Page 23: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

เครองมอทใชในการสรางงาน

Stroke Color : เลอกสเสน

Fill Color : เลอกสพน

Black and White : เลอกเสนเปนสด า และพนสขาว

Swap colors : สลบสเสนกบสพน

อรณย รอดสวสด

Page 24: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

เครองมอเสรม

เครองมอ Selection

อรณย รอดสวสด

Page 25: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

เครองมอเสรม

เครองมอ Free Transform

อรณย รอดสวสด

Page 26: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

เครองมอเสรม

เครองมอ Brush

อรณย รอดสวสด

Page 27: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การจดการกบ TOOLBOX

Click เมน Window

Click Tools

หรอ

กดปม Ctrl+F2

อรณย รอดสวสด

Page 28: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

สวนประกอบของ ADOBE FLASH CS6

Stage พนทสขาวตรงกลางหนาจอทใชจดวางออบเจกตตาง ๆทตองการแสดงใหเหนในชนงาน เปนพนททใชในการวาดภาพ สรางงานตางๆ

อรณย รอดสวสด

Page 29: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การจดการกบ STAGE

Click ทปม Hand Tool สามารถยาย Stage ได

Click Zoom ยอ-ขยาย Stage ได

Show Frameแสดง Stage ใหพอดกบหนาจอ

Show Allแสดงงานทงหมดทท าในหนาจอถงแมงานจะเกน Stage

อรณย รอดสวสด

Page 30: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การกาหนดคาของ STAGE

Click ท Stage

Click ท Panel ดานขวา บรรทด Properties

ก าหนด Size และ สพนตามตองการ

อรณย รอดสวสด

Page 31: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

สวนประกอบของ ADOBE FLASH CS6

Timeline เปนเครองมอส าคญทใชในการสรางภาพเคลอนไหว โดยประกอบดวย 2 สวนหลก คอ เลเยอร (Layer) และเฟรม (Frame)

Layer นนเปรยบเสมอนแผนใสทใชจดวาง Object หลายๆชนใหเรยงซอนกนได

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

อรณย รอดสวสด

Page 32: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

TIMELINE

อรณย รอดสวสด

Page 33: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

STATUS BAR ของ TIMELINE

Current Frameบอกใหรวาขณะน Play Head แสดงอยทชองใด

Frame Rateบอกใหรวาขณะน Play Head วงดวยความเรวก Frame ตอวนาท

Elapsed Timeบอกใหรวาขณะน Play Head วงมาถง Frame น ใชเวลากวนาท

อรณย รอดสวสด

Page 34: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การจดการกบ TIMELINE

Click Menu Window

Click Timeline

หรอ

กดปม Ctrl+Alt+T

อรณย รอดสวสด

Page 35: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

สวนประกอบของ ADOBE FLASH CS6

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

อรณย รอดสวสด

Page 36: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การจดการกบ PANEL ตางๆ

Click Menu Window

Click เลอก Panel ตามตองการ

กด F4 ซอน/แสดงเครองมอ

อรณย รอดสวสด

Page 37: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

สวนประกอบของ ADOBE FLASH CS6

Properties เปนพาเนลทใชแสดงคณสมบตตาง ๆ ของออบเจกตทเราคลกเลอกและแสดงคณสมบตของสเตจขณะทเราท างานอย

อรณย รอดสวสด

Page 38: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การจดการกบ PROPERTIES

Click Menu Window

Click Properties

หรอ

กดปม Ctrl+F3

อรณย รอดสวสด

Page 39: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การจดการกบ RULER

Click Menu View / Rulers

หรอ Ctrl + Alt + Shift + R

อรณย รอดสวสด

Page 40: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การจดการกบเสน GUIDE

Click Menu View

Click Guide, Show Guide

หรอ

กด Mouse คางทบนไมบรรทดลากลงมาบรเวณ State

อรณย รอดสวสด

Page 41: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การวาดภาพแบบปกตในแฟลช นน เมอเราวาดรปดวยเครองมอตางๆเรากจะไดรปทรง ( SHAPE ) ซงรปทรงของภาพประกอบดวย

อรณย รอดสวสด

• เสนขอบ( Stroke ) หรอลายเสน (Outline) เปนโครงรางของรป

• สวนทเปนพนรป (Fill) พนทภายในเสนขอบ

เสนขอบ( Stroke )

Page 42: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การก าหนดรายละเอยดของรปทรงทวาด

อรณย รอดสวสด

เมอเราคลกเลอกเครองมอใดเพอวาดรปทรง ใหสงเกตใน Property Inspector ของเครองมอนน จะปรากฏคณสมบตของเสนและสพนใหเราก าหนดเพมเตมได ดงน

Page 43: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

ใน PROPERTIES INSPECTOR มรายละเอยดทเราก าหนดไดกอนวาดภาพดงน

อรณย รอดสวสด

Page 44: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

ใน PROPERTIES INSPECTOR มรายละเอยดทเราก าหนดไดกอนวาดภาพดงน

จากจานสทเราเลอกใชงานขางตนเปนสมาตรฐานทโปรแกรมก าหนดมา แตหากเราตองการผสมสดวยตวเองกท าไดเชนกนโดยวธการดงน

อรณย รอดสวสด

Page 45: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การวาดรปทรงเรขาคณต

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

อรณย รอดสวสด

Page 46: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การวาดรปสเหลยมดวย RECTANGLE TOOL และ RECTANGLE PRIMITIVE TOOL

การวาดรปสเหลยมดวย Rectangle Tool และ Rectangle Primitive Tool

อรณย รอดสวสด

Page 47: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การวาดรปสเหลยมดวย RECTANGLE TOOL และ RECTANGLE PRIMITIVE TOOL

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

ทงสองเครองมอ สามารถวาดรปสเหลยมไดโดยการคลกท ในทลบอกซ(หรอกดคยลด R ซ าๆ จะสลบไปมาของเครองมอทงสองตว) ตวชเมาสจะเปลยนเปนรป จากนนปรบแตงคาตางๆใหกนเสนทเราจะสราง ซงสามารถก าหนดความโคงของมมของรปสเหลยมไดใน Property Inspector แลวลากเมาสวาดรปสเหลยมหรอวาดรปสเหลยมจตรสไดโดยกดคย<Shift>คางไว

อรณย รอดสวสด

Page 48: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การวาดรปสเหลยมดวย RECTANGLE TOOL และ RECTANGLE PRIMITIVE TOOL

อรณย รอดสวสด

Rectangle Tool Rectangle Primitive Tool

Page 49: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การวาดรปสเหลยมดวย RECTANGLE TOOL และ RECTANGLE PRIMITIVE TOOL

อรณย รอดสวสด

Page 50: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การวาดวงกลมหรอวงรดวย OVAL TOOL และ OVAL PRIMITIVE TOOL

การวาดรปสเหลยมดวย Rectangle Tool และ Rectangle Primitive Tool

อรณย รอดสวสด

Page 51: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การวาดวงกลมหรอวงรดวย OVAL TOOL และ OVAL PRIMITIVE TOOL

เครองมอ Oval Tool และ Oval Primitive Tool จะใชวาด รปวงกลมหรอวงร แต Oval Primitive Tool สามารถกลบมเปลยนแปลงรปทรงหรอรศมภายในวงกลม ใน Property Inspector ไดอกครง

ทงสองเครองมอ สามารถวาดรปไดโดยการคลกคางทเครองมอ Rectangle Toolททลบอกซจะปรากฏเมนยอยแสดงเครองมอ Oval Tool และ Oval Primitive Tool (หรอกดคยลด Oซ าๆ จะสลบไปมาของเครองมอทงสองตว) ตวชเมาสจะเปลยนเปนรป จากนนปรบแตงคาตางๆใหกบเสนทเราจะสราง ซงสามารถก าหนดความโคงของมมของรปสเหลยมไดใน Property Inspector แลวลากเมาสวาดวงรหรอวาดรปวงกลมโดยกดคย<Shift>คางไว

อรณย รอดสวสด

Page 52: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การวาดวงกลมหรอวงรดวย OVAL TOOL และ OVAL PRIMITIVE TOOL

อรณย รอดสวสด

Oval Tool Oval Primitive Tool

Page 53: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การวาดวงกลมหรอวงรดวย OVAL TOOL และ OVAL PRIMITIVE TOOL

อรณย รอดสวสด

Page 54: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การวาดวงกลมหรอวงรดวย OVAL TOOL และ OVAL PRIMITIVE TOOL

อรณย รอดสวสด

Page 55: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การวาดรปหลายเหลยมดวย POLYSTAR TOOL

เครองมอ PolyStar Tool จะอยในกลมเดยวกนกบเครองมอ Rectangle Tool ใชส าหรบสรางรปหลายเหลยม โดยใหคลกคางทเครองมอ Rectangle Tool ททลบอกซจะปรากฏเมนยอยแสดงเครองมอ PolyStar Tool ตวชเมาสจะเปลยนเปน จากนนปรบแตงคาตางๆใหกบรปหลายเหลยมทเราจะสรางใน Property Inspector แลวลากเมาสวาดรปหลายเหลยมไดตามตองการ

อรณย รอดสวสด

Page 56: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การวาดรปหลายเหลยมดวย POLYSTAR TOOL

อรณย รอดสวสด

Polygon Star

Page 57: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การวาดลายเสนอสระดวย PENCIL TOOL

Pencil Tool เปนเครองมอส าหรบใชวาดลายเสนอสระ เหมอนกบการใชดนสอวาดรปบนกระดาษ โดยการคลก ในทลบอกซ (หรอกดคยลด Y)ตวชเมาสจะเปลยนเปนรป จากนนใหลากเมาสวาดเสนไดตามตองการ

อรณย รอดสวสด

Page 58: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การวาดลายเสนอสระดวย PENCIL TOOL

อรณย รอดสวสด

Page 59: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การวาดลายเสนอสระดวย PENCIL TOOL

อรณย รอดสวสด

Page 60: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การวาดเสน LINE TOOL

Line Tool เปนเครองมอส าหรบใชวาดเสนตรง ใชเครอง Selection Tool ดงใหกลายเปนเสนโคงได หรอใชเครองมอ Subselection Tool

อรณย รอดสวสด

Selection Tool

Subselection Tool

Page 61: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

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

เมอมการน าภาพหรอรปทรงทสรางใน Flash มาเรยงซอนกน จะมผลท าใหรปเหลานนถกรวมเขาดวยกนหรอถกแตกออกเปนสวนยอย ๆ แลวแตกรณ ดงนหากนนถกรวมเขาดวยกนหรอถกแตกออกเปนสวนยอย ๆ แลวแตกรณ ดงน

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

อรณย รอดสวสด

Page 62: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

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

เมอมการน าภาพหรอรปทรงทสรางใน Flash มาเรยงซอนกน จะมผลท าใหรปเหลานนถกรวมเขาดวยกนหรอถกแตกออกเปนสวนยอย ๆ แลวแตกรณ ดงนหากนนถกรวมเขาดวยกนหรอถกแตกออกเปนสวนยอย ๆ แลวแตกรณ ดงน

o หากเราวาดรปทรงทมแตสพนซอนทบอกรปทรงหนงทมสพนตางกน เมอแยกรปทรงออกจากกนจะท าใหบรเวณสเดมทถกอกรปทรงทบหายไป

อรณย รอดสวสด

Page 63: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

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

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

อรณย รอดสวสด

Page 64: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

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

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

อรณย รอดสวสด

Page 65: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

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

หากเราวาดเสนตดกน หรอน าเสนหนงมาซอนทบอกเสนหนง เสนทง 2 จะถกตดออกเปนสวนยอยๆตรงจดทเสนทงสองตดกน (ไมวาทงสองเสนจะเปนสเดยวกนหรอคนละสกตาม)

อรณย รอดสวสด

Page 66: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

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

อรณย รอดสวสด

Page 67: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การวาดเสนตรงและเสนโคงเชอมตอกนโดยใช PEN TOOL

Pen Tool เปนเครองมอทใชวาดเสนตรงและเสนโคง โดยเสนทวาดจะเชอมตอกนเปนจดตอจด เราจะเรยกจดนวา “ จดแองเคอร ” ( anchor point )ภายในกลมของ Pen Tool จะมเครองมอตางๆส าหรบปรบแตงเสนพาธใหเปนรปทรงตางๆไดตามทตองการ ดงน

อรณย รอดสวสด

Pen Tool ใชวาดเสนดวยปากา Add Anchor Point Tool ใชเพมจดในแนวเสนพาธ Delete Anchor Point Tool ใชลบจดในแนวเสนพาธ Convert Point Tool ใชเปลยนแขนของเสนพาธใหเปนเสนโคงหรอเสนตรง

Page 68: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การวาดเสนตรงและเสนโคงเชอมตอกนโดยใช PEN TOOL

อรณย รอดสวสด

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

Page 69: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การสรางขอความ TEXT TOOL

อรณย รอดสวสด

T

Page 70: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การสรางขอความ TEXT TOOL

อรณย รอดสวสด

Page 71: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การสรางขอความ TEXT TOOL

อรณย รอดสวสด

Page 72: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การสรางขอความ TEXT TOOL

อรณย รอดสวสด

Page 73: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การสรางขอความ TEXT TOOL

อรณย รอดสวสด

Page 74: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การสรางขอความ TEXT TOOL

อรณย รอดสวสด

Page 75: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การสรางขอความ TEXT TOOL

อรณย รอดสวสด

Page 76: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

FRAME

มลกษณะเปนชองเลกทเรยงกนเปนแถวยาว ท าหนาทบรรจภาพและเสยงทจดวางบน State

อรณย รอดสวสด

Page 77: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การจดการกบ FRAME

การเพม Frame Click เมน Insert, Timeline, Frame (F5)

Click Mouse ขวาเลอก Insert Frame

การลบ Frame Click เลอก Frame ทตองการลบ

Click Mouse ปมขวาเลอก Remove Frame

อรณย รอดสวสด

Page 78: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

KEY FRAME

Keyframe คอ Frame ทมวตถหรอมการเปลยนแปลง (F6)

Blank Keyframe คอ Frame วางทมไวส าหรบการเกบวตถใหมหรอมการเปลยนแปลงใหม

อรณย รอดสวสด

Page 79: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การจดการกบ KEY FRAME

การเพม Key Frame

Click Menu Insert, Timeline, Key Frame (F6)

Click Mouse ขวาเลอก Insert Key Frame

อรณย รอดสวสด

Page 80: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

KEY ลดบน TIMELINE

1. คยลดบน Timeline

Page 81: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

KEY ลดเกยวกบ SYMBOL และ SHAPE

Page 82: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

KEY ลดเกยวกบ PANEL

Page 83: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

KEY ลดอนๆ

Page 84: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การบนทกงานเปน FILE FLASH

Click Menu File, Save

อรณย รอดสวสด

Page 85: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การบนทกงานเปน FILE ทเปดโดยไมตองมโปรแกรม FLASH กเปดได

Click Menu File, Export Movie…

ท Save as Type เลอกนามสกลตามตองการ

หรอ

Click Menu File, Export Image…

ท Save as Type เลอกนามสกลตามตองการอรณย รอดสวสด

Page 86: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การนา FILE ทไดไปเปน FILE นามสกลตางๆ

Click Menu File, Publish Settings

Click เครองหมายถกทนามสกลทตองการ

Click ปม Publish เลย

Click OK

หรอ

Click Menu File, Publish (Shift+F12) จะท าการสงงานไปเปนนามสกลทไดก าหนดไวตามตองการ

อรณย รอดสวสด

Page 87: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การนา FILE ภาพเขามาใชใน FLASH

Click Menu File, Import to Stage…

Click เลอกภาพทตองการ

Click OK

หรอ

Click Menu File, Import to Library…

Click เลอกภาพทตองการ

Click OK อรณย รอดสวสด

Page 88: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

ประเภทของแอนเมชนใน FLASH

1.Frame-by-frame คอ การสรางคยเฟรมหลายคยเฟรมตอกนไป โดยคงความตอเนองของชนงานชนเดมไว ท าใหมองเปนเปนภาพเคลอนไหว การสรางภาพเคลอนไหวแบบเฟรมตอเฟรม จะเหมาะกบการสรางภาพเคลอนไหวทซบซอนไมมรปแบบแนนอน

2.Tween ค าวา Tween มาจากค าวา “in between” เปนการสรางภาพเคลอนไหวจากเฟรมตนและเฟรมสดทาย ซงโปรแกรมจะสรางการเปลยนแปลงระหวางเฟรมใหโดยอตโนมต จงมจะมการสรางเฟรมเพยง 2 เฟรม ซงแบงออกเปน 3 รปแบบ

3.Inverse Kinematic (IK) เปนการใสกระดก เพอเชอมโยงกบรปทรงทสราง หรอวตถหลายๆ ชน ใหสมพนธกนดวยโครงกระดก โดยสามารถขยบกระดกเหลานเพอใหเกดการเคลอนไหว เชน การสรางการเคลอนไหวเลยนแบบการเดนของคน

อรณย รอดสวสด

Page 89: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

TWEEN

Shape Tween เปนการสรางภาพเคลอนไหว โดยแปลงจากรปทรงหนงไปอกรปทรงหนง เชน รปสเหลยมคอยๆ เปลยนเปนรปวงกลม

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

Motion Tween เปนการสรางภาพเคลอนไหวทมการเปลยนต าแหนง ขนาด หรอหมนวตถตามตองการ เปนการสรางภาพเคลอนไหว ทมการเคลอนก าหนดการเคลอนท หมน ยอ หรอขยายใหกบวตถ

อรณย รอดสวสด

Page 90: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การสรางภาพตอเนอง

Frame by Frame การเคลอนไหวชนดภาพตอภาพ

Tweening

Shape Tween การเปลยนรปราง

Motion Tween การเปลยนสถานท

Motion Guide

อรณย รอดสวสด

Page 91: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

วตถทไมสามารถทา TWEEN SHAPE ได

Text *

Grouped Object

Raster File (รปภาพ)

อรณย รอดสวสด

Page 92: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การแยกกลมวตถโดยใช BREAK APART

Break Apart เปนการแยกวตถทถก Group ไว นอกจากนนยงสามารถแยกองคประกอบของวตถประเภท Symbol, Test Block และภาพBitmap เพอท าการตกแตงหรอเปลยนแปลงวตถ

อรณย รอดสวสด

Page 93: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

วธการทา BREAK APART

Click เลอกวตถทตองการท า Break Apart

Click Menu Modify, Break Apart (Ctrl+B)

อรณย รอดสวสด

Page 94: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การเปลยน TEXT ใหสามารถทา TWEEN ได

Click Text Tool (T)

พมพขอความทตองการ

Click Menu Modify, Break Apart (Ctrl + B) 2 ครง

อรณย รอดสวสด

Page 95: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

LAYER

ชนของวตถทสรางงาน

Layer ใดสรางกอนจะอยดานลาง

อรณย รอดสวสด

Page 96: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การเพม LAYER

Click Menu Insert / Timeline / Layer

หรอ Click ทปม New Layer

อรณย รอดสวสด

Page 97: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การเปลยนชอ LAYER

น า Mouse Double Click ท Layer นนๆ

พมพชอใหกบ Layer ตามตองการ

กดปม Enter

อรณย รอดสวสด

Page 98: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การลบ LAYER น า Mouse Click ท Layer ทตองการลบ

Click Mouse ปมขวาเลอก Delete Layer

หรอ กด Mouse เลอกท Layer ทตองการลบ

กดไปทรปถงขยะชอ Delete

อรณย รอดสวสด

Page 99: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การยาย LAYER

กด Mouse คางท Layer ทตองการยาย

ลากไปวางยงต าแหนงทตองการ

อรณย รอดสวสด

Page 100: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

SYMBOL

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

อรณย รอดสวสด

Page 101: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

บทบาททแตกตางกนของSYMBOL และ INSTANCE

ซมบอลเปนตนแบบแตอนสแตนซเปนเพยงส าเนา

อรณย รอดสวสด

Page 102: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

ชนดของ SYMBOL

Graphic Symbolเปนการสรางภาพนงเชน รปตนไม วงกลม สเหลยม เปนการสราง Object ทเคลอนไหว

Button Symbolเปนการสรางปมทมการตอบสนองกบผใชงานรวมถงสามารถรบรการเคลอนทและการกระท าของMouse ได

Movie Clip Symbolเปนการสราง Object ทเคลอนไหวไดสามารถควบคมและก าหนดคณสมบตไดจาก Action Script

อรณย รอดสวสด

Page 103: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

รจกกบ SCENE และ MOVIE

Sceneเปรยบเสมอนเรองราวฉากละครแตละฉาก ภายใน Scene ประกอบดวย Object ตางๆมากมายทสรางขนมา

Movieเปรยบเสมอนเรองราวโดยรวมทงหมดของละคร ซง Movie เกดจากการน า Scene ของฉากทงหมดมาท าการประกอบเชอมโยงเขาดวยกนเปนเนอเรอง

อรณย รอดสวสด

Page 104: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การสราง SYMBOL แบบ GRAPHIC Click Menu Insert

Click New Symbol Name ตงชอใหกบ Symbol

Behavior เลอกชนดของ Symbol เปน Graphic

Click OK

จะพาไปทสวนของชอ Symbol นนๆ

สรางงานเปนภาพตางๆตามตองการ

Click ท Scene จะกลบมาท State

อรณย รอดสวสด

Page 105: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

ตวอยางการสราง SYMBOL แบบ GRAPHIC

Click Menu Insert Click New Symbol Name ตงชอใหกบ Symbol

Behavior เลอกชนดของ Symbol เปน Graphic

Click OK

จะพาไปทสวนของชอ Symbol นนๆ Click Text Tool Font เปน Wingding พมพ

Shift+” จะไดใยแมงมม

Click ท Scene จะกลบมาท State

อรณย รอดสวสด

Page 106: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การเรยกใช SYMBOL ทสรางไว Click Menu Window

Click Library หรอ กดปม F11

Click เลอก Symbol ทตองการ

กด Mouse คางลากออกมาวางไวท State

อรณย รอดสวสด

Page 107: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การแกไข SYMBOL ทสรางไวแลว

Double Click ท Symbol ทอยใน Library

แกไขภาพตามตองการ

เสรจแลว Click ไปท Scene

อรณย รอดสวสด

Page 108: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การแปลง OBJECT ใหเปน SYMBOL

วาด Object หรอพมพขอความ

Click Mouse ปมขวามอเลอก Convert to Symbol

Name ตงชอใหกบ Symbol

Type เลอกชนดของ Symbol

Click OK

อรณย รอดสวสด

Page 109: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การสราง SYMBOL แบบ MOVIE CLIP Click Menu Insert

Click New Symbol Name ตงชอใหกบ Symbol

Type เลอกชนดของ Symbol เปน Movie Clip

Click OK

จะพาไปทสวนของชอ Symbol นนๆ

สรางงานพรอมทงก าหนดแบบ Frame by Frame

Click ท Scene จะกลบมาท Stageอรณย รอดสวสด

Page 110: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

ตวอยางการสราง SYMBOL แบบ MOVIE CLIP

Click Menu Insert Click New Symbol

Name ตงชอใหกบ Symbol

Behavior เลอกชนดของ Symbol เปน Movie Clip

Click OK

จะพาไปทสวนของชอ Symbol นนๆ

Click Menu File, Import, Import to Library Click เลอกภาพทตองการ

เปด Library ขนมาอรณย รอดสวสด

Page 111: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การสรางปมกด

ปมกด (Button) เปนซมบอลประเภทหนงทท าใหผใชสามารถตอบโตกบชนงานทสรางได

อรณย รอดสวสด

Page 112: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การสรางปมกดจะประกอบดวย 4 สถานะ

เฟรม Up เปนสถานะปกตของปมกด คอเปนสถานะเรมตนของปม เมอผใชยงไมไดท าการโตตอบใดๆ

เฟรม Over เปนสถานะเมอผใชเลอนตวชเมาสมาวางเหนอปมกด

เฟรม Down เปนสถานะเมอผใชคลกบนปมกด

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

อรณย รอดสวสด

Page 113: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การสราง SYMBOL แบบ BUTTON SYMBOL

Click Menu Insert

Click New Symbol

Name ตงชอใหกบ Symbol

Type เลอกชนดของ Symbol เปน Button

Click OK

อรณย รอดสวสด

Page 114: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

INSTANT

Symbol ทดงมาใชเรยกวา Instant

อรณย รอดสวสด

Page 115: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การสรางขอความ LINK ไปยง WEBSITE อน

Click ทปม Text Tool

พมพขอความทตองการ

ท Properties URL พมพชอ Website ทตองการ Link

เชน http://www.sanook.com

อรณย รอดสวสด

Page 116: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การ EXPORT FILE ไปเปน ANIMATED GIF

Click Menu File, Export, Export Movie

อรณย รอดสวสด

Page 117: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การ EXPORT FILE ไปเปน ANIMATED GIF

ตงชอ File และเลอกนามสกลปน Animate Gif

Click Save

อรณย รอดสวสด

Page 118: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

การ EXPORT FILE ไปเปน ANIMATED GIF

Click เครองหมายถกท

Interlace ใหโหลดภาพจากบนลงลาง

Transparent ใหแสดงพนดานหลงโปรง

Smooth ใหขอบดราบเรยบ

Dither Solid Colors ใหมความคมชดของภาพเหมอนทสรางไว

Click OK

อรณย รอดสวสด

Page 119: ADOBE FLASH CS6 - itcenter.cdd.go.thitcenter.cdd.go.th/.../sites/105/2017/08/Present-Adobe-Flash-CS6.pdf · การจัดการกับSTAGE Click ที่ปุ่มHand

ตดตอ

[email protected]

อรณย รอดสวสด