adobe flash cs3 professional รู้จักกับ adobe flash cs3 ... · 3 4. timeline panel...
TRANSCRIPT
1
Adobe Flash CS3 Professional เปนโปรแกรมทสามารถสรางภาพกราฟกและภาพเคลอนไหวไดมากมาย
หลายรแบบ ทสาคญคอ เปนโปรแกรมสรางภาพเคลอนไหวแบบ Flash Animation ทสมบรณแบบทสด
มคณสมบตทเดนหลายดานคอ รปแบบไฟลมขนาดเลก สามารถแสดงภาพออกมาไดชดเจน มลกเลนตาง
ๆ มากกวาภาพเคลอนไหวแบบอน ๆ ทใชงานกนอยบนเวบ สามารถสรางเปนหนาเวบทโตตอบกบผใชงาน
ไดทนท
รจกกบ Adobe Flash CS3 Professional
สวนประกอบหลกของ Flash CS3
1
5 6
7
3
4
2
1. Menu Bar
เปนแถบสาหรบเกบคาสงตาง ๆ ของโปรแกรมไวทงหมด ตวอยางเชน คาสงสราง Movie เปด
moive /ปด movie คาสงปรบแตงคาตาง ๆ ของ movie และอน ๆ
2
2. Tools Box
เปนทสาหรบจดเกบเครองมอทตองใชงานเปนประจาไว ไดแกเครองมอดงน
3. Stage พนททางาน
ในการสรางภาพเคลอนไหวหรอสรางชนงานจะตองสรางลงบนพนทสวนน ซงเปนสวนของพนท
ทางานบนโปรแกรม โดยสามารถกาหนดสสนและขนาดไดตามตองการ
Arrow
Line Pen
Pencil
Subselect Lesso Text Rectangle Brush Paint Bucket Ink Bottle
Eyedropper Eraser Hand
Free Transform
Stroke Color Zoom
Swap Colors Fill Color
Default Colors
3
4. Timeline Panel
เปน Panel สาหรบกาหนดชวงจงหวะเวลาของภาพเคลอนไหว ซงสามารถกาหนดไดถง 2000
เฟรม รวมทงแสดง ใหเหน Layer ตาง ๆ ทสรางขนมาใชงาน
5. Properties Panel
เปน Panel สาหรบกาหนดคณสมบตตาง ๆ ของวตถทตองการเลอกปรบแตง รวมถงการปรบแตง
คณสมบตของพนททางานดวย เชน สามารถปรบแตงขนาด ปรบสฉาก การจดวางเปนตน
Frame-by-frame animation
Center frame button
Onion-skinning buttons
Elapsed time
Frame rate
Selected frame number
Guide layer icon Twooned animation Timeline header
Play head Empty key frame
Frame View pop-up menu
4
6. Actions Panel
เปน Panel สาหรบกาหนดคาสงพเศษตาง ๆ ซงเปนคาของ Flash Movie โดยเฉพาะ ลงไปกบ
ภาพเคลอนไหว
7. All Panel
เปนเครองมอเสรมสาหรบชวยใหสามารถทางานในโปรแกรมไดคลองตวขน เชน เลอกส ปรบ
ขนาด เปนตน และยงสามารถเลอกลอก Panel ตดกนเปนชดเพอใชงาน และเลอกปดเปดไดอยางสะดวก
5
ภาพเคลอนไหวแบบจงหวะตอจงหวะ (Frame by Frame) เปนการสรางภาพเคลอนไหวแบบ
พนฐาน โดยผสรางจะตองสรางการเคลอนไหวในแตละจงหวะเอง โดยใหภาพออกมาในลกษณะจงหวะ
ตอจงหวะ ตอกนไปเรอย ๆ จนเปนภาพเคลอนไหวทสมบรณแบบ
ภาพเคลอนไหวแบบ Tween Animation เปนการสรางภาพเคลอนไหวโดยใหโปรแกรมเปน
ผจดการสรางจงหวะ ในการทางานใหโดยอตโนมต ซงภาพทไดออกมาจะมความสวยงามและมจงหวะ
ราบรน
F5 (Frame) คอ ระยะเวลาของภาพเคลอนไหวทก Frame แสดงเหมอนกนหมด เชน หาก Frame
ท 1 วาดรปวงกลม Frame ท 1 – 100 กจะกลายเปนรปวงกลมทงหมด
F6 (Key Frame) คอการสรางจงหวะในชอง Frame ใหแตกตางกนในแตละ Frame เปนจดเรมตน
ของการสรางภาพเคลอนไหว คอ เมอเกดความแตกตางของจงหวะทจะเกดภาพเคลอนไหว
คอการทดสอบการทางานของภาพเคลอนไหว เลอกคาสง Control > Test Movie หรอกด Ctrl +
Enter
การสรางภาพเคลอนไหว
ความแตกตางของ F5 กบ F6
การทดสอบ Movie
6
ไฟล .Fla จะเปนไฟลทมการบนทกขอมลตาง ๆ เอาไวทงหมดจะมขนาดไฟลทใหญ เปนตนฉบบ
ไมสามารถนา ไปแสดงบน Flash Player หรอบนเวบบราวเซอรอนเทอรเนตดงนนการ Save ไฟลใน
รปแบบนจงเปนการบนทกเพอนเอาไวแกไขหรอปรบแตง Movie การบนทกทาไดโดยเลอก File > Save
หรอ File > Save as
การ Save ไฟล
.fla
ไฟล .swf เปนไฟลทจะนาไปใชจรงบน Flash Player หรอบนอนเตอรเนตซง ไฟล Movie ใน
รปแบบนแสดงผลไดอยางเดยว แกไขไมไดบนทกโดยเลอก File > Export Movie ในชอง Save as type
เลอกรปแบบ .swf < กด OK
.swf
7
การสราง Animation แบบ Frame By Frame
1. New File หรอ กด Ctrl + N
2. คลกเฟรมท 1 สรางวงกลม 1 วงพรอมพมพเลข 1 ลงไปดงรป
3. สรางเฟรมท 2 โดยกดปม F6 เพอเพมคยเฟรม จะไดภาพเหมอนเฟรมแรก จากนนคลกทเมน
Edit > Select All แลวคลกท Edit > Copy เพอคดลอกวงกลมพรอมตวเลข แลวคลก Edit > Paste in
Place เพอวางรปวงกลมซอนในตาแหนงเดม แลวใช Arrow Tool เลอกทงรปแลวยายไปทางขวาของ
วงกลมเดม โดยในขณะทยายใหกดปม Shift บนคยบอรดคางไวดวย จากนน ใหเปลยนตวเลขในวงกลม
ขวามอในเฟรมท 2 จากเลข 1 เปน เลข 2
2
3
8
4. สรางเฟรมท 3 โดยกดปม F6 เพอเพมคยเฟรม จะไดภาพเหมอนเฟรมท 2 จากนนใช Arrow
Tool เลอกวงกลมดานขวามอ พรอมเลข 2 ในวงกลม แลวคลกท Edit > Copy เพอคดลอกแลวคลก Edit
> Paste in Place เพอวางรปวงกลมซอนในตาแหนงเดม แลวใช Arrow Tool เลอกตาแหนงวงกลมท 2
ทงรปแลวยายไปทางขวา โดนในขณะทยายใหกดปม Shift บนคยบอรดคางไวดวย จะไดวงกลมชนท 3
จากนนใหเปลยนตวเลขในวงกลมจากเลข 2 เปนเลข 3
5. จากนนมาใชเมาสคลกทพนทวางบน Stage แลวกาหนด Frame Rate ใหเทากบ 1 เฟรมตอ
วนาท แลวทดลองกดปม Enter เพอดตวอยาง หรอกด Ctrl + Enter เพอดผลงาน
3
5
9
1. New File หรอ กด Ctrl + N
2. คลกเฟรมท 1 สรางรปสเหลยม 1 รป
3. คลกทเฟรม 30 เลอกคาสง Insert > Keyframe หรอกดปม F6 เพอเพม Keyframe
4. กดปม Delete ทคยบอรด 1 ครง เพอลมรปสเหลยมออกแลวสรางรปวงกลมขนมาแทนท
สเหลยม จะไดภาพเฟรมท 1 เปนสเหลยมและภาพเฟรมท 30 เปนวงกลม
การสราง Animation แบบ Shape Tweening
2
3
4
10
5. คลดทเฟรมท 1 กาหนด Properties ในชอง Tween เปน Shape จะพบวามเสนเชอม
ระหวางเฟรมท 1 กบเฟรมท 30
6. ทดสอบการทางานโดยกด Enter หรอคลด Play ท Windows Controller จะพบวา รป
สเหลยมจะเปลยนแปลงรปรางกลายเปนรปวงกลม
5
กรณทเปนตวอกษร ใหทาการ Break Apart (Ctrl + B) กอน ทงเฟรมเรมตนและเฟรม
สดทาย โดยคาสง Break Apart เรยกไดจาก Modify >Break Apart
2.
1. กาหนดวตถในเฟรมเรมตน และกาหนดวตถในเฟรมสดทาย
หมายเหต กรณทเปนตวอกษร ใหใชหลกการเดยวกน คอ
11
1. New File หรอ กด Ctrl + N
2. คลกทเฟรมท 1 แลวพมพขอความลงบน Stage
3. เลอกเครองมอ Arrow Tool แลวคลกเลอกขอความ “Multimedia” นาไปวางไวทมมลางซายของ
Stage หรอในจดทตองการ
4. คลกทเฟรม 25 เลอก Insert > Keyframe หรอกด F6 จะไดขอความเหมอนเดม (“Multimedia”) ท
เฟรม 25 จากนนใชเครองมอ Arrow Tool คลกลากขอความไปวางไวทมมบนขวาของ Stage
5. กาหนด Properties ในชอง Tween เปน Motion กาหนด Rotate เปนแบบ CW (ตามเขมนาฬกา)
จานวน 1 รอบ จะเกดเสนเชอมระหวางเฟรมท 1 กบเฟรมท 25 ท Timeline
การสราง Animation แบบ Motion Tweening
2
3
12
5
6. ทาการทดสอบโดยการกดปม Play ท Window > Tool bar > Controller จะไดขอความ
“Multimedia” หมน 1 รอบจากจดเรมตนไปยงจดสดทาย
13
ถาเปนรปกราฟกทสรางขนจากเครองมอของโปรแกรม จะทาการ Motion ไดกตอเมอทา
การรวมกราฟกนน ๆ กอน โดยเลอกคาสง Modify > Group
หมายเหต
14
การสราง Animation โดยการ Mask Layer
1. New File หรอกด Ctrl + N กาหนดสพนหลง (Background) เปนสดา
2. คลดทเฟรมท 1 พมพขอความวา “Animation” โดยเลอกรปแบบตวอกษรและสตามตองการ
3. จากนนคลกทเฟรม 30 กดปมเพมเฟรม (F5)
4. ทาการเพม Layer ใหม โดยคลกคาสง Insert > Layer จะได Layer 2 เพมขนมา
2
3
4
15
5. สรางภาพวงกลมทเฟรมท 1 ของ Layer 2 ทดานซายของคาวา “Animation”
5
6. จากนนลอกคาสง Insert > Create Motion Tween แลวคลกเฟรมท 30 กดปม F6 เพอเพม
Keyframe จากนนใชเมาสคลกภาพวตถวงกลมไปวางไวทางดวนขวาของคาวา “Animation”
6
7. เมอทดสอบโดยการกด Enterหรอคลกปม Play จะเหนภาพวงกลมวงไปบนขอความ
“Animation”
16
8. คลกเมาสท Layer 2 แลวเลอกคาสง Mask โดยคลกขวาของเมาสท Layer 2 แลวเลอก
Mask
คาสง
9. เมอทดสอบการทางานกจะพบวาขอความ “Animation” จะแสดงเมอม Mask (Layer บน)
เคลอนทผานเทานน
17
1. New File หรอกด Ctrl + N แลววาดรปปลาไวทรม Stage ดานซ
een เฟรมเรมต
าย (เพอใหวายไปดานขวา)
นอยทางดานซายในเฟรมท 1
3. คลกทเฟรม 40 แลวเพม Keyframe โดยการกดปม F6 จะไดภาพเหมอนเฟรมท 1 คอภาพ
ปลาทตาแหนงเดยวกนจากนน ใชเมาสคลกลากวตถ(ปล ไปวางทรม Stage ทางดานขวาจะ
4. เมอทดสอบดขณะน จะพบวาปลาจะเคลอนทจากขอบดานซายไปดานขวา ในลกษณะเสนตรง
2. จากนนเลอกคาสง Insert > Create Motion Tw
า)
ไดภาพปลาในเฟรมท 40 และจะปรากฏเสนเชอมระหวางเฟรมท 1 กบเฟรมท 40 ดงรป
3
การสราง Animation โดยใช Motion Guide
2
1
18
5. การก นทางการเคลอนท (Motion Guide) ทาไดโดยเลอกเมน Insert > Motion Guide
เมอเลอกคาสงนแล Guide Layer
6. คลกทเฟรมท 1 ของ Layer Guide Layer 1 จากนนทาการ
ลากเสนจากดานซายไปดานขวาหร อนทไป ตวอยางรป
7. จากนนปรบจดเรมตนและจดสดทายใหกบวตถโดยคลกเมาสทเฟรมท 1 เ ปม Snap to
objects หรอเลอกทคาสง View Snap to objects ใชเมาสลากวตถ(ปลา) ใหเกาะตดกบ
เสน ณ จดเรมตน และทเฟรม 40 ลากวตถใหเกาะตดกบปลายเสนทางดานขวามอ ดงรป
าหนดเส
1 วจะปรากฏ Layer เพมเขามาใน Timeline ชอวา
แลวใชเครองมอ Pencil Tool
อตามลกษณะทตองการใหปลาเคล
ลอก
6
8. จากนนทดสอบการเคลอนทและแกไขเสนทางไดตามตองการ แตการเคลอนทของวตถจะหน
ไปทางเดยวยงดไมเปนธรรมชาต กสามารถปรบใหหนตามเสนทางทเปลยนแปลงได โดยใช
เมาสคลกทเฟรมท 1 แลวกาหนด Properties ในชองเลอกทาเครองหมายถกในชอง Orien
t to
path แลวลองทดสอบการทางานอกครง
8
19
20
การนาภาพเขามาใช โดยใชคาสง File >
Import จะไดภาพทเลอกมาปรากฏบนพนทการ
ทางานเลย หากเลอก File > Import to Library
ภาพจะถกนาไปเกบไวใน Library
การสราง Animation โดยใช Motion Guide
1. เลอกเมน File > Import
2. ชอง File of type เลอก All Sound Formats
3. เลอกไฟลเสยงทตองการ แลวกด Open
Library
การใสเสยงใหกบชนงาน
โปรแกรมจะทาการ Import ไฟลเสยงมาใสไวใน
4. เปด Library จะพบไฟลเสยงทนาเขามา
5. กดปม Play เพอทดลองฟงเสยงได
3
2
5 4
21
22
6. การนาไฟลเสยงมาใสในชนงาน ใหลากไฟลเสยงทตองการมาวางบนพนทของชนงาน
7. สามารถปรบแตงเสยงไดในชอง Properties โดยเลอกประเภทของ Effect แลวกดปม Edit
เพอปรบแตงตามตองการ
7
ชนงานทจะนาออกไปใชมขนาดไฟลทเลก
วาง ๆ ใหเลอกเมน Insert > New Symbol
ประโยชนของ และสามารถ
นามาใชไดหลายครง โดยไมตองสรางใหม
1. หากจะทาการสราง Symbol จากท หรอกดปม F8
2. จะปรากฎดงภาพ
Symbol ม 3 รปแบบ ไดแก
Movie Clip Symbol
เปนรปแบบของ Symbol ทสามารถสรางภาพเคลอนไหวทซบซอนได
Button Symbol
เปนรปแบบของภาพกราฟกทถกเปลยนใหกลายเปนปม
Graphic Symbol
เปนรปแบบของภาพกราฟก(ภาพนง) ทถกเปลยนมาเปน Symbol ภาพกราฟกไดมาจากการวาด
จากเครองมอใน Flash หรอการนาภาพจากภายนอกเขามากได ภาพทนาเขามาใชงานในตอนแรกจะเปน
Bitmap ไมสามารถแกไขคาได หารทาการ Convert เปน Graphic Symbol จะสามารถปรบแตงได เชน
การปรบแตง Alpha, tint, Brightness
Symbol คอการทาให
การสราง Symbol
2
23
1
24
ด ๆ หรอคาสงท
2. เลอก Action > Movie Control > Stop
การใชคาสง
เปนการใชคาสงเพอควบคม Movie เชน สงใหเลน สงใหหยด สงใหไปยงหน
สงให Stop ใหเลอกตาแนงหรอวตถทจะใส Action Script
าใ
ซบซอนมากมาย
1. เชนเมอตองการจะ
Action Script เบองตน
1
2
จะเกดคาสง Stop ดงภาพท 3 3.
3
3
คอการนาไฟลไปใช
OK
เลอก File > Publish
งานบนเว
> กด
โปรแกรมจะสรางไฟลททาการเลอกไวทงหมด
บบราวเซอร
ชงาน โดยเลอก File > Publish Settings > ในชอง Formats เลอกรปแบบ Type ทจะนาไปใ
การ Publish
25
26
1. ไปท Start > Ru
3. เลอกท My Computer จากนนไปท Menu > Edit > Find Next
4. ตองทาการหา Registry 2 ตวคอ Fixedfon.fon และ Fonts.fon พมพคาวา Fixedfon.fon ลงไป
กด OK
5. เมอพบแลวให Double Click ทชอ เพอเขาไปแก Data โดยแกใหเปนคาวา vgafixed.fon
6. เมอแกแลวกดท F3 เพอหาจดผดตอไป แกใหหมดทกตว
7. Restart เครองใหม
คาเตอน การแกไขคา registry นควรกระทาโดยผทมความรความชานาญเกยวกบ Windows ขน
วธแกไขคา Registry
โปรแกรม Flash CS3 หากตองการใชงานในสวนของ Properties บางคาสง แตวาไมสามารถใช
งานไดเนองจากมขนาดลนหนาจอ มวธการปรบแกโดยตองเขาไปแกไขคา registry ดงน
n
2. พมพคาวา Regedit เพอเปด Registry Editor
สง เพราะหากแกไขผดคา จะทาใหสงผลกระทบตอระบบ Windows ได