adobe flash cs6 · 2017-08-21 · เนื อหาหลักสูตร การท...
TRANSCRIPT
ADOBE FLASH CS6
วทยากรผสอน : อรณย รอดสวสด (แหมม)
วทยากรผชวย : อรอนงค จนทร (น า)
วทยากรผชวย : ธารณ นรนดร (ออบ)
วทยากรผชวย : กรวร ลกาเนดไทย (แพรว)
เน อหาหลกสตร
เรมตนรจกกบ Adobe Flash
การใชงานโปรแกรมเบองตน
การวาดรปและการลงส
ซมโบล (Symbol) และอนสแตนซ (Instance)
การน าเขารปภาพและวดโอ
การสรางภาพเคลอนไหว (Animation)
อรณย รอดสวสด
เน อหาหลกสตร
การท างานกบเลเยอร
การสรางมฟวคลป (Movie Clip)
การสรางปม (Button)
การเลนเสยงในมฟว
การเสนอผลงานบนเวบเพจ (Publishing)
รจกกบภาษาโปรแกรม Action Script และการประยกตในโปรแกรมทพฒนาขน
อรณย รอดสวสด
ADOBE FLASH CS6
Adobe Flash cs6 เปนโปรแกรมทมประสทธภาพสงสาหรบงานดานกราฟก ภาพเคลอนไหว ตลอดจนมลตมเดยสาหรบเวบ โดยลกษณะเดนของภาพเคลอนไหวทไดจากโปรแกรม Flash จะมไฟลขนาดเลก จงสามารถโหลดมาแสดงไดอยางรวดเรว รวมท งคณสมบตในการสรางภาพกราฟกแบบเวคเตอรทาใหภาพมความคมชดสามารถยอ-ขยายขนาดได
อรณย รอดสวสด
ลกษณะเดนของ ADOBE FLASH CS6
สามารถสรางภาพเคลอนไหว
สรางงานในรปแบบ Multimedia
ใสลกเลนตางๆ
สรางการโตตอบ
อรณย รอดสวสด
ลกษณะเดนของ ADOBE FLASH CS6
Adobe Flash เปนโปรแกรมส าหรบสรางภาพกราฟก ภาพเคลอนไหว และมลตมเดยบนเวบ เรยกไฟลภาพเคลอนไหว และมลตมเดยทสรางจาก Flash วา “มฟว (movie)”ทเราสามารถน า Flash มาใชสรางงานไดหลากหลายรปแบบ อาท
ภาพเคลอนไหว ตวอกษร ภาพ และโลโกกราฟก พรอมเสยงและเอฟเฟกตประกอบ เชน ภาพหลก ของหนาเวบ แบนเนอรโฆษณา การน าเสนอขอมลในรปแบบของสไลดโชว เปนตน
เกมและโปรแกรมทโตตอบกบผใช ไปจนถงฟอรมทใหผใชกรอกขอมล และสงขอมลทกรอกไปทเครองเซรฟเวอรเพอน าไปประมวลผลและบนทกไวได
เราอาจใช Flash สรางเวบไซตทงเวบเลยกได
อรณย รอดสวสด
ลกษณะเดนของ ADOBE FLASH CS6
แฟลชมเครองมออ านวยความสะดวกในการสรางภาพเคลอนไหวและงานมลตมเดยไดเปนอยางด และมภาษาโปรแกรมส าหรบใชควบคมการท างานของชนงาน นอกจากนงานทสรางโดย Flash จะไดไฟลชนงานทมขนาดเลกท าใหสามารถน ามาเผยแพรบนอนเทอรเนต เพราะโหลดมาแสดงผลไดอยางรวดเรว แฟลช จงเปนอกทางเลอกส าหรบการน าเสนอขอมลบนเวบทไดมการน าภาพเคลอนไหวและมลตมเดยมาใชอยางแพรหลายเพอดงดดความสนใจของผชมซงในอดตการท าเชนนตองอาศยเทคนคการเขยนโปรแกรมบนเวบทยงยากและซบซอนแถมไฟลผลงานทสรางยงมขนาดใหญอกดวย ท าใหหนาเวบนนโหลดชามากจนผใชอาจไมสามารถทนรอได
อรณย รอดสวสด
งานทได ADOBE FLASH CS6
File มขนาดเลก
ภาพทไดไมแตก
อรณย รอดสวสด
ความแตกตางระหวาง FILE .FLA และ .SWF
File .Fla (Flash document) File .swf (Flash movie)
สามารถแกไขขอมลหรอวตถภายหลงได ไมสามารถแกไขขอมลหรอวตถภายหลงได
แสดงผลบน Browser ชา แสดงผลบน Browser เรว
ผลงานทไดมขนาดใหญ ผลงานทไดมขนาดเลก
Icon ทไดมสแดง Icon ทไดมสขาว
อรณย รอดสวสด
ชนดของภาพกราฟก
ภาพกราฟกออกเปน 2 ชนด คอ
1. ภาพกราฟกชนดบตแมป (Bitmap )
ภาพกราฟกชนดบตแมปเปนภาพทเกดจากเมดสหรอจดสทเราเรยกกนวาพกเซล(pixel) มาเรยงกนจนเปนภาพ เพราะฉะนนความสวยงามของภาพจงขนอยกบความละเอยดของเมดส
ขอด ภาพชนดนสามารถแสดงรายละเอยดไดใกลเคยงภาพจรง เชน ภาพถายทมรายละเอยดสง เพราะเปนการใชพกเซลจ านวนมากมาประกอบกน
ขอเสย ภาพชนดนจะมขนาดใหญตามความละเอยดภาพ เพราะตองใชจ านวนพกเซลเพมขนตาม นอกจากนนการน าภาพมาขยายใหใหญกวาขนาดปกตจะท าใหภาพทไดไมชด
อรณย รอดสวสด
ภาพกราฟกชนดบตแมป (BITMAP )
อรณย รอดสวสด
ชนดของภาพกราฟก
ภาพกราฟกออกเปน 2 ชนด คอ2. ภาพกราฟกชนดเวกเตอร (Vector )
ภาพชนดเวกเตอรไมใชพกเซลเหมอนภาพชนดบทแมป แตจะใชการค านาณทางคณตศาสตรเขามาชวยในการสรางเสนและลวดลายตาง ๆ ทประกอบกนเปนภาพแทน
ขอด ภาพชนดนปรบหรอยอขนาดไดตามตองการ โดยไมมผลตอความละเอยดของภาพเพราะไมวาภาพจะเลกหรอใหญความคมชดกไมเปลยนแปลง เพราะคอมพวเตอรจะสรางภาพขนมาโดยใชวธการค านวณ ซงไมไดถกจ ากดดวยจ านวนพกเซลในภาพวามมากนอยเพยงใด นอกจากนนภาพชนดเวกเตอรมขนาดไฟลเลกกวาบทแมปเพราะไมไดใชพกเซลจ านวนมากมาสรางเปนภาพ แตมเพยงค าสงสรางลวดลายเพอประกอบเปนภาพเทานน
ขอเสย เนองมาจากลกษณะของภาพทสรางจากการใชคอมพวเตอรสรางเสนและรปทรงมาประกอบกนแลว ภาพชนดนจงมขอจ ากดในการแสดงภาพถาย แตจะเหมาะกบภาพกราฟกแนวลายเสนทมสคอนขางตอเนองเทานน
อรณย รอดสวสด
ภาพกราฟกชนดเวกเตอร (VECTOR )
อรณย รอดสวสด
WELCOME SCREENสรางไฟลใหมแบบตางๆ
สรางไฟลจาก Template
เปดไฟลเกามาใชงาน
อรณย รอดสวสด
สวนประกอบของ ADOBE FLASH CS61
6
4
3
5
2
Menu Bar
Toolbox
Stage
Timeline
Panel
Properties
อรณย รอดสวสด
สวนประกอบของ ADOBE FLASH CS6
เมนบาร แถบทรวมค าสงในการใชงานทงหมดเกยวกบการสรางชนงานและการตงคาในโปรแกรม
ทลบอกซ กลองทรวบรวมเครองมอทใชในการสรางและปรบแตงออบเจกต
อรณย รอดสวสด
เครองมอทใชในการสรางงานSelection : เลอกออบเจค
Subselection : ปรบแตงรปทรงออบเจค
Free Transform :ปรบรปทรงออบเจค
Gradient Transform : ปรบแนวสเกรเดยนท
3D Rotation : ปรบแตงรปทรงออบเจคแบบ 3 มต
3D Translation : เคลอนยายออบเจคแบบ 3 มต อรณย รอดสวสด
เครองมอทใชในการสรางงาน
Add Anchor Point : เพมจดแองเคอร
Delete Anchor Point : ลบจดแองเคอร
Convert Anchor Point : ปรบจดแองเคอร
Lasso : เลอกออบเจคหรอพนทบางสวนจองออบเจค
Pen : วาดรปทรง เสนตรง เสนโคง
อรณย รอดสวสด
เครองมอทใชในการสรางงานText : พมพขอความ
Line : วาดเสนตรง
Rectangle : วาดสเหลยม
Oval : วาดวงกลมหรอวงร
Rectangle Primitive : วาดสเหลยมทปรบแตงมมไดภายหลง
Oval Primitive : วาดวงกลมหรอวงรทปรบแตงรปแบบไดภายหลง
PolyStar : วาดรปหลายเหลยมและรปดาวอรณย รอดสวสด
เครองมอทใชในการสรางงานPencil : วาดรปทรง เสนตรง เสนโคง
Brush : ระบายสภาพ
Spray Brush : พนสภาพแบบสเปรย
Deco : เตมลวดลายใหกบออบเจค
อรณย รอดสวสด
เครองมอทใชในการสรางงานBone : สรางขอตอการเคลอนไหวใหกบออบเจค
Bind : ปรบแตงการเคลอนไหวใหกบออบเจค
Paint Bucket : เตมสพนใหกบออบเจค
Ink Bottle : เตมสเสนใหกบออบเจค
อรณย รอดสวสด
เครองมอทใชในการสรางงานEyedropper : กอปปสจากออบเจคอน
Eraser : ลบเสนหรอสพนของออบเจค
Hand : เลอนดสวนตางๆของภาพ
Zoom : ยอ / ขยายมมมองภาพบนสเตจ
อรณย รอดสวสด
เครองมอทใชในการสรางงาน
Stroke Color : เลอกสเสน
Fill Color : เลอกสพน
Black and White : เลอกเสนเปนสด า และพนสขาว
Swap colors : สลบสเสนกบสพน
อรณย รอดสวสด
เครองมอเสรม
เครองมอ Selection
อรณย รอดสวสด
เครองมอเสรม
เครองมอ Free Transform
อรณย รอดสวสด
เครองมอเสรม
เครองมอ Brush
อรณย รอดสวสด
การจดการกบ TOOLBOX
Click เมน Window
Click Tools
หรอ
กดปม Ctrl+F2
อรณย รอดสวสด
สวนประกอบของ ADOBE FLASH CS6
Stage พนทสขาวตรงกลางหนาจอทใชจดวางออบเจกตตาง ๆทตองการแสดงใหเหนในชนงาน เปนพนททใชในการวาดภาพ สรางงานตางๆ
อรณย รอดสวสด
การจดการกบ STAGE
Click ทปม Hand Tool สามารถยาย Stage ได
Click Zoom ยอ-ขยาย Stage ได
Show Frameแสดง Stage ใหพอดกบหนาจอ
Show Allแสดงงานทงหมดทท าในหนาจอถงแมงานจะเกน Stage
อรณย รอดสวสด
การกาหนดคาของ STAGE
Click ท Stage
Click ท Panel ดานขวา บรรทด Properties
ก าหนด Size และ สพนตามตองการ
อรณย รอดสวสด
สวนประกอบของ ADOBE FLASH CS6
Timeline เปนเครองมอส าคญทใชในการสรางภาพเคลอนไหว โดยประกอบดวย 2 สวนหลก คอ เลเยอร (Layer) และเฟรม (Frame)
Layer นนเปรยบเสมอนแผนใสทใชจดวาง Object หลายๆชนใหเรยงซอนกนได
Frame เปนการแบงภาพเคลอนไหวออกเปนจงหวะยอยๆ เหมอนกบภาพนงหรอฟลมภาพยนตรแตละภาพ ซงเมอน าหลายๆเฟรมมาแสดงอยางตอเนองจะท าใหเหนภาพเคลอนไหวอยางสมบรณ ต าแหนงของแตละเฟรมจะแสดงหมายเลขเฟรม โดยม Playhead เปนตวควบคมการแสดงภาพบน Stage และจะบอกต าแหนงเฟรมปจจบน
อรณย รอดสวสด
TIMELINE
อรณย รอดสวสด
STATUS BAR ของ TIMELINE
Current Frameบอกใหรวาขณะน Play Head แสดงอยทชองใด
Frame Rateบอกใหรวาขณะน Play Head วงดวยความเรวก Frame ตอวนาท
Elapsed Timeบอกใหรวาขณะน Play Head วงมาถง Frame น ใชเวลากวนาท
อรณย รอดสวสด
การจดการกบ TIMELINE
Click Menu Window
Click Timeline
หรอ
กดปม Ctrl+Alt+T
อรณย รอดสวสด
สวนประกอบของ ADOBE FLASH CS6
พาเนล หนาตางทรวบรวมเครองมอตาง ๆ ส าหรบใชในการปรบแตงออบเจกต
อรณย รอดสวสด
การจดการกบ PANEL ตางๆ
Click Menu Window
Click เลอก Panel ตามตองการ
กด F4 ซอน/แสดงเครองมอ
อรณย รอดสวสด
สวนประกอบของ ADOBE FLASH CS6
Properties เปนพาเนลทใชแสดงคณสมบตตาง ๆ ของออบเจกตทเราคลกเลอกและแสดงคณสมบตของสเตจขณะทเราท างานอย
อรณย รอดสวสด
การจดการกบ PROPERTIES
Click Menu Window
Click Properties
หรอ
กดปม Ctrl+F3
อรณย รอดสวสด
การจดการกบ RULER
Click Menu View / Rulers
หรอ Ctrl + Alt + Shift + R
อรณย รอดสวสด
การจดการกบเสน GUIDE
Click Menu View
Click Guide, Show Guide
หรอ
กด Mouse คางทบนไมบรรทดลากลงมาบรเวณ State
อรณย รอดสวสด
การวาดภาพแบบปกตในแฟลช นน เมอเราวาดรปดวยเครองมอตางๆเรากจะไดรปทรง ( SHAPE ) ซงรปทรงของภาพประกอบดวย
อรณย รอดสวสด
• เสนขอบ( Stroke ) หรอลายเสน (Outline) เปนโครงรางของรป
• สวนทเปนพนรป (Fill) พนทภายในเสนขอบ
เสนขอบ( Stroke )
การก าหนดรายละเอยดของรปทรงทวาด
อรณย รอดสวสด
เมอเราคลกเลอกเครองมอใดเพอวาดรปทรง ใหสงเกตใน Property Inspector ของเครองมอนน จะปรากฏคณสมบตของเสนและสพนใหเราก าหนดเพมเตมได ดงน
ใน PROPERTIES INSPECTOR มรายละเอยดทเราก าหนดไดกอนวาดภาพดงน
อรณย รอดสวสด
ใน PROPERTIES INSPECTOR มรายละเอยดทเราก าหนดไดกอนวาดภาพดงน
จากจานสทเราเลอกใชงานขางตนเปนสมาตรฐานทโปรแกรมก าหนดมา แตหากเราตองการผสมสดวยตวเองกท าไดเชนกนโดยวธการดงน
อรณย รอดสวสด
การวาดรปทรงเรขาคณต
ประกอบไปดวยรปสเหลยม รปวงกลม วงร และรปหลายเหลยม ดงรป ขอแบงออกเปนกลมๆตามรายการท Tools ดงน
อรณย รอดสวสด
การวาดรปสเหลยมดวย RECTANGLE TOOL และ RECTANGLE PRIMITIVE TOOL
การวาดรปสเหลยมดวย Rectangle Tool และ Rectangle Primitive Tool
อรณย รอดสวสด
การวาดรปสเหลยมดวย RECTANGLE TOOL และ RECTANGLE PRIMITIVE TOOL
เครองมอ Rectangle Tool และ Rectangle Primitive Tool ใชส าหรบวาดรปส เหลยม หรอส เหลยมมมโคง แตกตางกนตรงท รปท ไดจาก Rectangle Primitive Tool จะสามารถกลบมาเปลยนลกษณะความโคงของมมท Property Inspectorไดอกคร ง
ทงสองเครองมอ สามารถวาดรปสเหลยมไดโดยการคลกท ในทลบอกซ(หรอกดคยลด R ซ าๆ จะสลบไปมาของเครองมอทงสองตว) ตวชเมาสจะเปลยนเปนรป จากนนปรบแตงคาตางๆใหกนเสนทเราจะสราง ซงสามารถก าหนดความโคงของมมของรปสเหลยมไดใน Property Inspector แลวลากเมาสวาดรปสเหลยมหรอวาดรปสเหลยมจตรสไดโดยกดคย<Shift>คางไว
อรณย รอดสวสด
การวาดรปสเหลยมดวย RECTANGLE TOOL และ RECTANGLE PRIMITIVE TOOL
อรณย รอดสวสด
Rectangle Tool Rectangle Primitive Tool
การวาดรปสเหลยมดวย RECTANGLE TOOL และ RECTANGLE PRIMITIVE TOOL
อรณย รอดสวสด
การวาดวงกลมหรอวงรดวย OVAL TOOL และ OVAL PRIMITIVE TOOL
การวาดรปสเหลยมดวย Rectangle Tool และ Rectangle Primitive Tool
อรณย รอดสวสด
การวาดวงกลมหรอวงรดวย 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>คางไว
อรณย รอดสวสด
การวาดวงกลมหรอวงรดวย OVAL TOOL และ OVAL PRIMITIVE TOOL
อรณย รอดสวสด
Oval Tool Oval Primitive Tool
การวาดวงกลมหรอวงรดวย OVAL TOOL และ OVAL PRIMITIVE TOOL
อรณย รอดสวสด
การวาดวงกลมหรอวงรดวย OVAL TOOL และ OVAL PRIMITIVE TOOL
อรณย รอดสวสด
การวาดรปหลายเหลยมดวย POLYSTAR TOOL
เครองมอ PolyStar Tool จะอยในกลมเดยวกนกบเครองมอ Rectangle Tool ใชส าหรบสรางรปหลายเหลยม โดยใหคลกคางทเครองมอ Rectangle Tool ททลบอกซจะปรากฏเมนยอยแสดงเครองมอ PolyStar Tool ตวชเมาสจะเปลยนเปน จากนนปรบแตงคาตางๆใหกบรปหลายเหลยมทเราจะสรางใน Property Inspector แลวลากเมาสวาดรปหลายเหลยมไดตามตองการ
อรณย รอดสวสด
การวาดรปหลายเหลยมดวย POLYSTAR TOOL
อรณย รอดสวสด
Polygon Star
การวาดลายเสนอสระดวย PENCIL TOOL
Pencil Tool เปนเครองมอส าหรบใชวาดลายเสนอสระ เหมอนกบการใชดนสอวาดรปบนกระดาษ โดยการคลก ในทลบอกซ (หรอกดคยลด Y)ตวชเมาสจะเปลยนเปนรป จากนนใหลากเมาสวาดเสนไดตามตองการ
อรณย รอดสวสด
การวาดลายเสนอสระดวย PENCIL TOOL
อรณย รอดสวสด
การวาดลายเสนอสระดวย PENCIL TOOL
อรณย รอดสวสด
การวาดเสน LINE TOOL
Line Tool เปนเครองมอส าหรบใชวาดเสนตรง ใชเครอง Selection Tool ดงใหกลายเปนเสนโคงได หรอใชเครองมอ Subselection Tool
อรณย รอดสวสด
Selection Tool
Subselection Tool
การวาดรปทรงซอนกนใน FLASH
เมอมการน าภาพหรอรปทรงทสรางใน Flash มาเรยงซอนกน จะมผลท าใหรปเหลานนถกรวมเขาดวยกนหรอถกแตกออกเปนสวนยอย ๆ แลวแตกรณ ดงนหากนนถกรวมเขาดวยกนหรอถกแตกออกเปนสวนยอย ๆ แลวแตกรณ ดงน
o หากเราวาดรปทรงทมแตสพนซอนทบอกรปทรงหนงทมสพนเดยวกน จะท าใหพนรปของทงสองถกรวมเขาดวยกน
อรณย รอดสวสด
การวาดรปทรงซอนกนใน FLASH
เมอมการน าภาพหรอรปทรงทสรางใน Flash มาเรยงซอนกน จะมผลท าใหรปเหลานนถกรวมเขาดวยกนหรอถกแตกออกเปนสวนยอย ๆ แลวแตกรณ ดงนหากนนถกรวมเขาดวยกนหรอถกแตกออกเปนสวนยอย ๆ แลวแตกรณ ดงน
o หากเราวาดรปทรงทมแตสพนซอนทบอกรปทรงหนงทมสพนตางกน เมอแยกรปทรงออกจากกนจะท าใหบรเวณสเดมทถกอกรปทรงทบหายไป
อรณย รอดสวสด
การวาดรปทรงซอนกนใน FLASH
หากเราวาดรปทรงทมเสนขอบซอนทบอกรปหนงเสนขอบทซอนทบทง 2 รปทรงนนจะกลายเปนของรปทรงใดรปทรงหนง ขนอยกบการคลกเลอกของเรา เชน หลงจากซอนรปทรงดานลาง ถาเราดบเบลคลกเลอกรปทรงใดเสนขอบกจะกลายเปนของรปทรงนน
อรณย รอดสวสด
การวาดรปทรงซอนกนใน FLASH
หากวาดเสนตดผานรปทรงหนง หรอน ารปทรงมาซอนทบเสนจะท าใหรปทรงนนถกแบงออกเปนสวนยอยๆตามแนวทถกตดเสน
อรณย รอดสวสด
การวาดรปทรงซอนกนใน FLASH
หากเราวาดเสนตดกน หรอน าเสนหนงมาซอนทบอกเสนหนง เสนทง 2 จะถกตดออกเปนสวนยอยๆตรงจดทเสนทงสองตดกน (ไมวาทงสองเสนจะเปนสเดยวกนหรอคนละสกตาม)
อรณย รอดสวสด
การวาดรปทรงซอนกนใน FLASH
อรณย รอดสวสด
การวาดเสนตรงและเสนโคงเชอมตอกนโดยใช PEN TOOL
Pen Tool เปนเครองมอทใชวาดเสนตรงและเสนโคง โดยเสนทวาดจะเชอมตอกนเปนจดตอจด เราจะเรยกจดนวา “ จดแองเคอร ” ( anchor point )ภายในกลมของ Pen Tool จะมเครองมอตางๆส าหรบปรบแตงเสนพาธใหเปนรปทรงตางๆไดตามทตองการ ดงน
อรณย รอดสวสด
Pen Tool ใชวาดเสนดวยปากา Add Anchor Point Tool ใชเพมจดในแนวเสนพาธ Delete Anchor Point Tool ใชลบจดในแนวเสนพาธ Convert Point Tool ใชเปลยนแขนของเสนพาธใหเปนเสนโคงหรอเสนตรง
การวาดเสนตรงและเสนโคงเชอมตอกนโดยใช PEN TOOL
อรณย รอดสวสด
สรางรปทรงแบบเปด ใหเราดบเบลคลกทจดสดทาย สรางรปทรงแบบปด ใหกลบไปคลกทจดเรมตนของรปทรง สงเกตตวชเมาสทเปลยนไปมวงกลมตดกบปากกา
การสรางขอความ TEXT TOOL
อรณย รอดสวสด
T
การสรางขอความ TEXT TOOL
อรณย รอดสวสด
การสรางขอความ TEXT TOOL
อรณย รอดสวสด
การสรางขอความ TEXT TOOL
อรณย รอดสวสด
การสรางขอความ TEXT TOOL
อรณย รอดสวสด
การสรางขอความ TEXT TOOL
อรณย รอดสวสด
การสรางขอความ TEXT TOOL
อรณย รอดสวสด
FRAME
มลกษณะเปนชองเลกทเรยงกนเปนแถวยาว ท าหนาทบรรจภาพและเสยงทจดวางบน State
อรณย รอดสวสด
การจดการกบ FRAME
การเพม Frame Click เมน Insert, Timeline, Frame (F5)
Click Mouse ขวาเลอก Insert Frame
การลบ Frame Click เลอก Frame ทตองการลบ
Click Mouse ปมขวาเลอก Remove Frame
อรณย รอดสวสด
KEY FRAME
Keyframe คอ Frame ทมวตถหรอมการเปลยนแปลง (F6)
Blank Keyframe คอ Frame วางทมไวส าหรบการเกบวตถใหมหรอมการเปลยนแปลงใหม
อรณย รอดสวสด
การจดการกบ KEY FRAME
การเพม Key Frame
Click Menu Insert, Timeline, Key Frame (F6)
Click Mouse ขวาเลอก Insert Key Frame
อรณย รอดสวสด
KEY ลดบน TIMELINE
1. คยลดบน Timeline
KEY ลดเกยวกบ SYMBOL และ SHAPE
KEY ลดเกยวกบ PANEL
KEY ลดอนๆ
การบนทกงานเปน FILE FLASH
Click Menu File, Save
อรณย รอดสวสด
การบนทกงานเปน FILE ทเปดโดยไมตองมโปรแกรม FLASH กเปดได
Click Menu File, Export Movie…
ท Save as Type เลอกนามสกลตามตองการ
หรอ
Click Menu File, Export Image…
ท Save as Type เลอกนามสกลตามตองการอรณย รอดสวสด
การนา FILE ทไดไปเปน FILE นามสกลตางๆ
Click Menu File, Publish Settings
Click เครองหมายถกทนามสกลทตองการ
Click ปม Publish เลย
Click OK
หรอ
Click Menu File, Publish (Shift+F12) จะท าการสงงานไปเปนนามสกลทไดก าหนดไวตามตองการ
อรณย รอดสวสด
การนา FILE ภาพเขามาใชใน FLASH
Click Menu File, Import to Stage…
Click เลอกภาพทตองการ
Click OK
หรอ
Click Menu File, Import to Library…
Click เลอกภาพทตองการ
Click OK อรณย รอดสวสด
ประเภทของแอนเมชนใน FLASH
1.Frame-by-frame คอ การสรางคยเฟรมหลายคยเฟรมตอกนไป โดยคงความตอเนองของชนงานชนเดมไว ท าใหมองเปนเปนภาพเคลอนไหว การสรางภาพเคลอนไหวแบบเฟรมตอเฟรม จะเหมาะกบการสรางภาพเคลอนไหวทซบซอนไมมรปแบบแนนอน
2.Tween ค าวา Tween มาจากค าวา “in between” เปนการสรางภาพเคลอนไหวจากเฟรมตนและเฟรมสดทาย ซงโปรแกรมจะสรางการเปลยนแปลงระหวางเฟรมใหโดยอตโนมต จงมจะมการสรางเฟรมเพยง 2 เฟรม ซงแบงออกเปน 3 รปแบบ
3.Inverse Kinematic (IK) เปนการใสกระดก เพอเชอมโยงกบรปทรงทสราง หรอวตถหลายๆ ชน ใหสมพนธกนดวยโครงกระดก โดยสามารถขยบกระดกเหลานเพอใหเกดการเคลอนไหว เชน การสรางการเคลอนไหวเลยนแบบการเดนของคน
อรณย รอดสวสด
TWEEN
Shape Tween เปนการสรางภาพเคลอนไหว โดยแปลงจากรปทรงหนงไปอกรปทรงหนง เชน รปสเหลยมคอยๆ เปลยนเปนรปวงกลม
Classic Tween เปนการท าแอนเมชนเพอโดยเปลยนคณสมบตของวตถ ส ความสวางของส หรอขนาดรปราง เชน ภาพทคอยๆ สวางขน หรอตวหนงสอคอยๆ จางหายไป
Motion Tween เปนการสรางภาพเคลอนไหวทมการเปลยนต าแหนง ขนาด หรอหมนวตถตามตองการ เปนการสรางภาพเคลอนไหว ทมการเคลอนก าหนดการเคลอนท หมน ยอ หรอขยายใหกบวตถ
อรณย รอดสวสด
การสรางภาพตอเนอง
Frame by Frame การเคลอนไหวชนดภาพตอภาพ
Tweening
Shape Tween การเปลยนรปราง
Motion Tween การเปลยนสถานท
Motion Guide
อรณย รอดสวสด
วตถทไมสามารถทา TWEEN SHAPE ได
Text *
Grouped Object
Raster File (รปภาพ)
อรณย รอดสวสด
การแยกกลมวตถโดยใช BREAK APART
Break Apart เปนการแยกวตถทถก Group ไว นอกจากนนยงสามารถแยกองคประกอบของวตถประเภท Symbol, Test Block และภาพBitmap เพอท าการตกแตงหรอเปลยนแปลงวตถ
อรณย รอดสวสด
วธการทา BREAK APART
Click เลอกวตถทตองการท า Break Apart
Click Menu Modify, Break Apart (Ctrl+B)
อรณย รอดสวสด
การเปลยน TEXT ใหสามารถทา TWEEN ได
Click Text Tool (T)
พมพขอความทตองการ
Click Menu Modify, Break Apart (Ctrl + B) 2 ครง
อรณย รอดสวสด
LAYER
ชนของวตถทสรางงาน
Layer ใดสรางกอนจะอยดานลาง
อรณย รอดสวสด
การเพม LAYER
Click Menu Insert / Timeline / Layer
หรอ Click ทปม New Layer
อรณย รอดสวสด
การเปลยนชอ LAYER
น า Mouse Double Click ท Layer นนๆ
พมพชอใหกบ Layer ตามตองการ
กดปม Enter
อรณย รอดสวสด
การลบ LAYER น า Mouse Click ท Layer ทตองการลบ
Click Mouse ปมขวาเลอก Delete Layer
หรอ กด Mouse เลอกท Layer ทตองการลบ
กดไปทรปถงขยะชอ Delete
อรณย รอดสวสด
การยาย LAYER
กด Mouse คางท Layer ทตองการยาย
ลากไปวางยงต าแหนงทตองการ
อรณย รอดสวสด
SYMBOL
ซมบอล(Symbol) คอการน าออบเจกตทเปนภาพกราฟก ปมกดหรอมฟวมาก าหนดเปนตนแบบ เพอน าไปใชเปนสวนประกอบในการสรางชนงาน
อรณย รอดสวสด
บทบาททแตกตางกนของSYMBOL และ INSTANCE
ซมบอลเปนตนแบบแตอนสแตนซเปนเพยงส าเนา
อรณย รอดสวสด
ชนดของ SYMBOL
Graphic Symbolเปนการสรางภาพนงเชน รปตนไม วงกลม สเหลยม เปนการสราง Object ทเคลอนไหว
Button Symbolเปนการสรางปมทมการตอบสนองกบผใชงานรวมถงสามารถรบรการเคลอนทและการกระท าของMouse ได
Movie Clip Symbolเปนการสราง Object ทเคลอนไหวไดสามารถควบคมและก าหนดคณสมบตไดจาก Action Script
อรณย รอดสวสด
รจกกบ SCENE และ MOVIE
Sceneเปรยบเสมอนเรองราวฉากละครแตละฉาก ภายใน Scene ประกอบดวย Object ตางๆมากมายทสรางขนมา
Movieเปรยบเสมอนเรองราวโดยรวมทงหมดของละคร ซง Movie เกดจากการน า Scene ของฉากทงหมดมาท าการประกอบเชอมโยงเขาดวยกนเปนเนอเรอง
อรณย รอดสวสด
การสราง SYMBOL แบบ GRAPHIC Click Menu Insert
Click New Symbol Name ตงชอใหกบ Symbol
Behavior เลอกชนดของ Symbol เปน Graphic
Click OK
จะพาไปทสวนของชอ Symbol นนๆ
สรางงานเปนภาพตางๆตามตองการ
Click ท Scene จะกลบมาท State
อรณย รอดสวสด
ตวอยางการสราง 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
อรณย รอดสวสด
การเรยกใช SYMBOL ทสรางไว Click Menu Window
Click Library หรอ กดปม F11
Click เลอก Symbol ทตองการ
กด Mouse คางลากออกมาวางไวท State
อรณย รอดสวสด
การแกไข SYMBOL ทสรางไวแลว
Double Click ท Symbol ทอยใน Library
แกไขภาพตามตองการ
เสรจแลว Click ไปท Scene
อรณย รอดสวสด
การแปลง OBJECT ใหเปน SYMBOL
วาด Object หรอพมพขอความ
Click Mouse ปมขวามอเลอก Convert to Symbol
Name ตงชอใหกบ Symbol
Type เลอกชนดของ Symbol
Click OK
อรณย รอดสวสด
การสราง SYMBOL แบบ MOVIE CLIP Click Menu Insert
Click New Symbol Name ตงชอใหกบ Symbol
Type เลอกชนดของ Symbol เปน Movie Clip
Click OK
จะพาไปทสวนของชอ Symbol นนๆ
สรางงานพรอมทงก าหนดแบบ Frame by Frame
Click ท Scene จะกลบมาท Stageอรณย รอดสวสด
ตวอยางการสราง 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 ขนมาอรณย รอดสวสด
การสรางปมกด
ปมกด (Button) เปนซมบอลประเภทหนงทท าใหผใชสามารถตอบโตกบชนงานทสรางได
อรณย รอดสวสด
การสรางปมกดจะประกอบดวย 4 สถานะ
เฟรม Up เปนสถานะปกตของปมกด คอเปนสถานะเรมตนของปม เมอผใชยงไมไดท าการโตตอบใดๆ
เฟรม Over เปนสถานะเมอผใชเลอนตวชเมาสมาวางเหนอปมกด
เฟรม Down เปนสถานะเมอผใชคลกบนปมกด
เฟรม Hit ผใชจะไมเหนสถานะนของปมกด แตใชส าหรบก าหนดขอบเขตการท างานของปม
อรณย รอดสวสด
การสราง SYMBOL แบบ BUTTON SYMBOL
Click Menu Insert
Click New Symbol
Name ตงชอใหกบ Symbol
Type เลอกชนดของ Symbol เปน Button
Click OK
อรณย รอดสวสด
INSTANT
Symbol ทดงมาใชเรยกวา Instant
อรณย รอดสวสด
การสรางขอความ LINK ไปยง WEBSITE อน
Click ทปม Text Tool
พมพขอความทตองการ
ท Properties URL พมพชอ Website ทตองการ Link
เชน http://www.sanook.com
อรณย รอดสวสด
การ EXPORT FILE ไปเปน ANIMATED GIF
Click Menu File, Export, Export Movie
อรณย รอดสวสด
การ EXPORT FILE ไปเปน ANIMATED GIF
ตงชอ File และเลอกนามสกลปน Animate Gif
Click Save
อรณย รอดสวสด
การ EXPORT FILE ไปเปน ANIMATED GIF
Click เครองหมายถกท
Interlace ใหโหลดภาพจากบนลงลาง
Transparent ใหแสดงพนดานหลงโปรง
Smooth ใหขอบดราบเรยบ
Dither Solid Colors ใหมความคมชดของภาพเหมอนทสรางไว
Click OK
อรณย รอดสวสด