ADOBE FLASH CS6 -...

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

อรณย รอดสวสด

ตดตอ

mam_oranee@hotmail.com

อรณย รอดสวสด