การใชโปรแกรมกราฟฟกเพอพฒนาเวบเพจ 1

โปรแกรม Macromedia Flash Professional 8 ซ งความสามารถ ทหลากหลายของโปรแกรมนนนบวนจะถกพฒนาใหมความซบซอนมากขน แตยงคงเนอหาใหตวโปรแกรมมความแตกตางจากเวอรชนทผานมานอยทสด เพอใหผทใชงานไดอยางสะดวกไมตองเสยเวลาเรมตนใหม แตสงหนงทผใชงานจะตองเรยนรใหมอยางสม าเสมอนนกคอเทคนคการเคลอนไหวชนดตาง ๆ ทโปรแกรมนท าได(หรอเรยกส น ๆ วา เอฟเฟกต) ซงทกรายละเอยดการเคลอนไหวนนจะมความแตกตางกนออกไปตามชนงานทไดสรางเอาไว บางเอฟเฟกตทคดวางายแตเวลาท าจรงยากกวาทคดหรอบางเอฟเฟกตทคดวาท ายากแตตอนลงมอท างายนดเดยว ดวยเหตนเอง Flash Workshop จงไดถอก าเนดมาในแวดวงการเคลอนไหวบนเวบอกครง ความ ร เบองตน (Introduction) ไดแ ก ความส าคญ ความหมาย การตดต ง การเปด -ปด สวนประกอบของโปรแกรม ตลอดจนการจดเกบไฟลในรปแบบตาง ๆ ดงน

การตดตงโปรแกรม 1. ใหคดลอก(Copy)โปรแกรมชอ Flash8-en จากแผนซด ทผสอนแจกให ไปใสในเครอง

คอมพวเตอรของผเรยน 2. ดบเบลคลกทไฟล Flash8-en ท าการตดตงตามค าสงการตดตงไปจนจบขนตอน 3. ถาหากในเครองไดลงโปรแกรม Dreamwavwer สามารถเรยกใชโปรแกรมได 4. ถาหากยงไมไดลงโปรแกรม Dreamwavwer ใหดบเบลคลกทไฟล keygen ใหน า Serial

WPD800-59139732-18635 ไปใสเมอเปดใชงาน การเปดใชงานโปรแกรม

1. คลกท Start 2. คลกท Programs 3. คลกท Macromedia 4. คลกท Macromedia Flash 8 5. เขาสหนาแรก ท Create New คลกท Flash document จะเขาสหนาหลก 6. ตองการสรางไฟลใหม ใหคลกท File

การใชโปรแกรมกราฟฟกเพอพฒนาเวบเพจ 2

7. คลกท New 8. คลกท Flash document 9. คลกท Ok

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

1. เมนบาร หมายถงการใชขอความเปนค าสงกบการสรางงานกราฟก 2. กลองเครองมอ (Toolbox) หมายถงการใชรปภาพแทนค าสงตาง ๆ 3. Layer หมายถง ชนหรอทอยของการท าเอฟเฟกตาง ๆ ถาตองการเพมคลกท Insert layer

ตองการลบ ใหแดรกลากลงทรปถงขยะ

เมนบาร

Stage หรอเวท

Layer

ยอ/ขยายเวท

Frame

Properties Inspector

เครองมอ หรอ Tools

เมนบาร

การใชโปรแกรมกราฟฟกเพอพฒนาเวบเพจ 3

4. Frame หมายถงการก าหนดระยะทางใหกบเอฟเฟกตาง ๆ โดยใหคลกขวาดานลางตวเลขทตองการ คลกท Insert Keyframe สามารถก าหนดไดหลาย ๆ จด เพอใสเทคนคการเคลอนไหวชนดตาง ๆ

5. ยอ/ขยายเวท หมายถงการก าหนดมมมองหนาจอภาพใหมขนาดเหมาะสมพรอมท างานไดสะดวก

6. Stage หรอเวท หมายถงบรเวณพนทส าหรบแสดงผลงานและบอกขนาดของรปภาพ 7. เครองมอหรอTools หมายถงการใชรปภาพแทนค าสงตาง ๆ 8. Properties หมายถงสวนทใหก าหนดขนาด สพนหลง ความเรวใหกบชนงาน

เรมตนสรางงานใหม

1. คลกท Size: 2. ใส 400 ท (width) และ 300 ท (height) 3. ท Background color: คลกเลอกสทตองการ 4. ท Frame rate : ใส 15 (ตวเลขนอยจะเคลอนไหวชา มากจะเรวขน) 5. คลกท Ok 6. ยอขนาด Stage หรอ เวทใหเหลอ 60 % เพอใหมองเหนภาพทงหมด

*** ตองก าหนดทกครงเมอเรมสรางชนงานใหม ***

1. การแทรกรปภาพ ผเรยนไดเรยนรเกยวกบการแทรกรปภาพในลกษะตาง ๆ ไดแก การยอหรอขยายรปภาพ การแสดงของรปภาพในลกษณะตาง ๆ ทสวยงาม โดยมขนตอนดงตอไปน 1. ก าหนดคาตามขอ1-6 (ในหวขอเรมตนสรางงานใหม) ใหเรยบรอย 2. ดบเบลคลกท Layer1 3. ท Name พมพค าวา background (เปนการตงชอใหกบ Layer) 4. คลกท File 5. คลกท Import 6. คลกท Import to Stage

550 x 400 pixels

การใชโปรแกรมกราฟฟกเพอพฒนาเวบเพจ 4

7. ท Look in คลกท ลกศรลง 8. คลกไดรฟทเกบรปภาพ 9. ดบเบลคลกท Folder ทเกบไฟลรปภาพไว 10. คลกทชอไฟลทตองการ 11. คลกท Open 12. คลกท Modify 13. คลกท Convert to Symbol 14. คลกท Movie Clip 15. คลกท OK 16. คลกท แถบเครองมอ Free Transform Tool ยอ/ขยายและยายรปภาพใหพอด 17. คลกขวาดานลางเลข 50 18. คลกท Insert Keyframe เพอก าหนด ระยะทางในการเคลอนไหวเปน 50 19. คลกขวาทจดกลม ดานลาง เลข 1 20. คลกท Create Motion Tween 21. คลกตรงกลางรปภาพ 22. ดท Propertise ดานลางจอภาพ 23. ท Color คลกท ลกศรลง 24. คลกท Alpha ใส 0% 25. คลกท เมน Control 26. คลกท Test Movie (หรอ กดปม Ctrl คางไว กด Enter 1 ครง) เพอดผลงาน 27. คลกท Close ปดการแสดงผล 28. คลกทจดกลม ดานลาง เลข 50 29. ท Color คลกท ลกศรลง คลกท Alpha ใส 0% 30. คลกขวาท ดานลาง เลข 25 31. คลกท Insert Keyframe

แปลงไฟลชนดตางๆ เปน Movie Clip

การใชโปรแกรมกราฟฟกเพอพฒนาเวบเพจ 5

32. ท Color คลกท ลกศรลง คลกท Alpha ใส 100% 33. กดป ม Ctrl คางไว กดปม Enter เพอดผลการแสดง จะสวางขนแลวจางลง การแทรกรปท 2 1. คลกทดานลางรปตาและรปกญแจของ Layer แรก ใหมเครองหมายกากบาท เพอลอคและ

ปด Layer ไว ปองกนไมใหท างานผด layer 2. คลกท แทรก Layer 3. ดบเบลคลกท Layer ใหม 4. ท Name พมพชอของ Layer 5. คลกท File 6. คลกท Import 7. คลกท Import to Stage 8. คลกไดรฟทเกบรปภาพ 9. ดบเบลคลกท Folder ทเกบไฟลรปภาพไว 10. คลกทชอไฟลทตองการ 11. คลกท Open (ถาหากมค าถามออกมาวาตองการใชรปทงหมดหรอไม ใ

ใหคลกท No รปจะออกมาเฉพาะรปทเลอกเพยงรปเดยว) 12. คลกท Modify 13. คลกท Convert to Symbol 14. คลกท Movie Clip 15. คลกท OK 16. คลกท แถบเครองมอ Free Transform Tool ยอ/ขยายและยายรปภาพใหพอ 17. คลกขวาดานลางเลข 51 18. คลกท Insert Keyframe เพอก าหนดระยะทางในการเคลอนไหวเปน 51 19. คลกขวาทจดกลม ดานลาง เลข 1 20. คลกท Create Motion Tween 21. คลกตรงกลางรปภาพ ท Color คลกท ลกศรลง คลกท Alpha ใส 0%

การใชโปรแกรมกราฟฟกเพอพฒนาเวบเพจ 6

22. กดป ม Ctrl คางไว กด Enter 1 ครงจะแสดงร ปภาพพรอมกน 23. คลกท Close ปดการแสดงผล 24. คลกทรปท 2 ยอใหมขนาดเลกลงอยตรงกลางเวท กดป ม Ctrl Enter 25. จะแสดงรปท 1 และรปท 2 จากเลกคอยขยายใหญขนมา (*** ยายรปภาพไปวางใน

ต าแหนงทตองการ รปภาพกจะออกมาจากต าแหนงนน ๆ ***) 26. คลกท File 27. คลกท Save As 28. ท File Name ใสชอไฟล (ควรเปนชอทเกยวกบงานนน ๆ) 29. คลกท Save (เปนการจดเกบไฟลเพอน าไปแกไขเปลยนแปลงภายหลง) 30. คลกท File คลกท Export คลกท Export Movie 31. ท File Name ใสชอไฟล (ตองเปนภาษาองกฤษ เพอน าไปใชบนเวบ) 32. คลกท Save (ไฟลชนดนแกไขไมได)

2. การแทรกรป Animation ผเรยนไดเรยนรเกยวกบการแทรกรปภาพทมลกษณะเปนภาพเคลอนไหวทท ามาจาก Image Ready โดยมขนตอนดงตอไปน 1. คลกท File คลกท New คลกท Flash document คลกท Ok 2. ดบเบลคลกท Layer แรก 3. ท Name พมพชอนก 4. คลกท Insert 5. คลกท New Symbol 6. ท Name พมพค าวา birds 7. คลกท OK 8. คลกท File 9. คลกท Import 10. คลกท Import to Stage 11. ท Look in คลกท ลกศรลง 12. คลกท ไดรฟ D 13. ดบเบลคลกท Folder ทเกบรปภาพของนกไว

การใชโปรแกรมกราฟฟกเพอพฒนาเวบเพจ 7

14. คลกท ไฟลชอ birds 15. คลกท Open 16. คลกท Windows 17. คลกท Library 18. คลกท birds 19. คลกท Scene1 20. คลกท รปนก 21. แดรกลากมาวางดานลางซายของเวท 22. คลกขวาทดานลางเลข 60 23. คลกท Insert Keyframe 24. คลกขวาทดานลางเลข 1 25. คลกท Create Motion Tween 26. คลกทจดกลมดานลางเลข 60 27. แดรกลากรปนกในเวทไปไวบนมมขวา 28. กดป ม Ctrl คางไว กด Enter 1 ครง เพอดผล 29. คลกท Close ปดการแสดงผล 30. คลกขวาทดานลางเลข 15 31. คลกท Insert Keyframe 32. แดรกลากรปนกไปไวตรงกลางดานลางเวท 33. กดป ม Ctrl คางไว กด Enter 1 ครง เพอดผล 34. คลกท Close ปดการแสดงผล 35. คลกขวาทดานลางเลข 45 36. คลกท Insert Keyframe 37. แดรกลากรปนกไปไวตรงกลางดานบนเวท 38. กดป ม Ctrl คางไว กด Enter 1 ครง

เพอดผล นกจะบนในลกษณะดงน

4

การใชโปรแกรมกราฟฟกเพอพฒนาเวบเพจ 8

3. การแทรกขอความ ผเรยนไดเรยนรเกยวกบการแทรกหรอการพมพขอความแลวน าเทคนคการท าภาพเคลอนไหวมาใสเพอความสวยงาม โดยมขนตอนดงตอไปน

1. คลกท File คลกท New คลกท Flash document คลกท Ok 2. ดบเบลคลกท Layer แรก 3. ท Name พมพค าวาพนหลง 4. คลกท File 5. คลกท Import 6. คลกท Import to Stage 7. ท Look in คลกท ลกศรลง 8. คลกท ไดรฟ D 9. ดบเบลคลกท Folder ทเกบรปภาพไว 10. คลกท ไฟลรปภาพทตองการ 11. คลกท Open 12. คลกท Modify 13. คลกท Convert to Symbol 14. คลกท Movie Clip 15. คลกท OK 16. คลกท แถบเครองมอ Free Transform Tool 17. ยอ/ขยายและยายรปภาพใหพอดกบเวท 18. คลกขวาดานลางเลข 50

1 2

3

การใชโปรแกรมกราฟฟกเพอพฒนาเวบเพจ 9

19. คลกท Insert Keyframe เพอก าหนดระยะทางในการเคลอนไหวเปน 50 20. คลกขวาทจดกลม ดานลาง เลข 1 21. คลกท Create Motion Tween 22. คลกในรปภาพ 23. ท Color ดานลาง คลกท ลกศรลง 24. คลกท Alpha ใส 0% 25. กดป ม Ctrl คางไว กด Enter 1 ครง จะแสดงรปพนหลง 26. คลกท Close ปดการแสดงผล 27. คลกท Insert Layer 28. ดบเบลคลกท Layer แรก 29. ท Name พมพค าวาดอย 30. คลกท แถบเครองมอ Text Tool 31. คลกตรงกลางเวท พมพค าวา ดอยสเทพเปนศร 32. คลมด าทขอความ ก าหนดแบบอกษร ขนาดและส

33. คลกท แถบเครองมอ Free Transform Tool 34. ขยายขอความใหใหญยายไวในต าแหนงดานลางเวท 35. คลกขวาดานลางเลข 60 ของ layer ดอย 36. คลกท Insert Keyframe เพอก าหนดระยะทางในการเคลอนไหวเปน 60 37. คลกขวาทจดกลม ดานลาง เลข 1 ของ layer ดอย 38. คลกท Create Motion Tween 39. คลกทขอความ ยอใหเลกลงแลวแดรกลากไปไวดานบนเวท 40. กดป ม Ctrl คางไว กด Enter 1 ครงจะแสดงพนหลงและขอความแรก 41. คลกท Close ปดการแสดงผล

การใชโปรแกรมกราฟฟกเพอพฒนาเวบเพจ 10

***** ให แทรก Layer อก 3 Layer พมพค าขวญของจงหวดเชยงใหม คอ ประเพณเปนสงา บปผชาตลวนงามตา นามล าคานครพงค ***** จดเกบไฟลใหเรยบรอย

4. การแทรกเสยงเพลง ผเรยนไดเรยนรเกยวกบการแทรกหรอใสเสยงเพลงในภาพกราฟกใหเพมเสยงเขามาอกรปแบบหนง โดยมขนตอนดงตอไปน 1. คลกท File คลกท New คลกท Flash document คลกท Ok 2. ดบเบลคลกท Layer แรก 3. ท Name พมพค าวา รปวว 4. คลกท File คลกท Import คลกท Import to Stage 5. ท Look in คลกท ลกศรลง 6. คลกท ไดรฟ D 7. ดบเบลคลกท Folder ทเกบรปภาพไว 8. คลกท ชอไฟลทตองการ 9. คลกท Open 10. คลกท Modify 11. คลกท Convert to Symbol 12. คลกท Movie Clip 13. คลกท OK 14. คลกท แถบเครองมอ Free Transform Tool 15. ยอ/ขยายและยายรปภาพใหพอดกบเวท 16. คลกขวาดานลางเลข 50 17. คลกท Insert Keyframe เพอก าหนดระยะทางในการเคลอนไหวเปน 50 18. คลกขวาทจดกลม ดานลาง เลข 1 19. คลกท Create Motion Tween 20. คลกในรปวว 21. ท Color คลกท ลกศรลง คลกท Alpha ใส 0%

การใชโปรแกรมกราฟฟกเพอพฒนาเวบเพจ 11

22. คลกท Insert Layer 23. ดบเบลคลกท Layer ทแทรกใหม 24. ท Name พมพค าวา เพลง 25. คลกท File คลกท Import คลกท Import to Library 26. ท Look in คลกท ลกศรลง 27. คลกท ไดรฟ D 28. ดบเบลคลกท Folder ทเกบไฟลเพลงไว 29. คลกท ชอไฟลทตองการ 30. คลกท Open 31. คลกท Window 32. คลกท Library 33. คลกทชอเพลง 34. คลกท สญลกษณ เพลง 35. แดรกลากลงมาใสในเวท 36. คลกทดานลางเลข 48 ของ Layer เพลง 37. กดปมฟงกชน F6 เพอก าหนดจดจบของเพลง 38. ดท Propertise ดานลาง 39. ท Sond คลกท ลกศรลง 40. คลกทชอเพลง 41. ท Sync: คลกท ลกศรลง 42. คลกท Stop 43. คลกทดานลางเลข 1 44. ดท Propertise ดานลางท Sond คลกท ลกศรลง 45. คลกทชอเพลง 46. ท Sync: คลกท ลกศรลง 47. คลกท Start 48. กดป ม Ctrl คางไว กด Enter 1 ครงจะแสดงรปววและเสยงเพลง

การใชโปรแกรมกราฟฟกเพอพฒนาเวบเพจ 12

49. จดเกบไฟลใหเรยบรอย

5. การท า highlight ผเรยนไดเรยนรเกยวกบการใสเอฟเฟกตใหกบขอความเพอใหดดมความโดดเดนแปลกตา โดยมขนตอนดงตอไปน 1. คลกท File คลกท New คลกท Flash document คลกท Ok 2. คลกท Size: 3. ใส 350 ท (width) และ 100 ท (height) 4. ท Background color: คลกเลอกขาว 5. ท Frame rate : ใส 15 6. คลกท Ok 7. ดบเบลคลกท Layer แรก 8. ท Name พมพค าวา ขอความ 9. คลกท แถบเครองมอ Text Tool 10. แดรกลากใหพอด พมพ ค าวา โปรแกรม Flash 8 11. คลมด าทขอความ ก าหนดแบบอกษร ขนาดและส

12. คลกท แถบเครองมอ Free Transform Tool 13. ขยายขอความใหใหญยายไวตรงกลางเวท 14. คลกขวาดานลางเลข 60 ของ layer ขอความ 15. คลกท Insert Keyframe เพอก าหนดระยะทางในการเคลอนไหวเปน 60 16. คลกดานลางตรงจดกลมสขาวทรปกญแจของLayerขอความเพอลอคLayer นไว 17. คลกท Insert Layer 18. ดบเบลคลกท Layer ใหม 19. ท Name พมพค าวา ไฮไลท 20. คลกทแถบเครองมอ Oval Tool

การใชโปรแกรมกราฟฟกเพอพฒนาเวบเพจ 13

21. แดรกวาดวงกลมขนาดใหญกวาขอความไวดานนอกเวท 22. คลกทแถบเครองมอ Selection 23. แดรกคลมรปวงกลม 24. คลกท Fill color 25. คลกทสรง หรอสอน ๆ 26. คลกขวาดานลางเลข 60 ของ Layer ไฮไลท 27. คลกท Insert Keyframe 28. คลกขวาดานลางเลข 1 ของ Layer ไฮไลท 29. คลกท Creat Motion Tween 30. คลกทดานลางเลข 60 ของ Layer ไฮไลท 31. แดรกลากจดกลมสรงไปวางไวดานหลงขอความ ดานนอกเวท 32. คลกดานลางตรงจดกลมสขาวทรปตาและรปกญแจของLayer ไฮไลท 33. คลกท Insert Layer 34. คลกท Layer ขอความ ใหมแถบสด าคลมตลอดเฟรม 35. คลกขวาดานลางเลข 1 ของ Layer ขอความ 36. คลกท Copy Frames 37. คลกท Layer ทแทรกใหม ใหมแถบสด าคลมตลอดเฟรม 38. คลกขวาดานลางเลข 1 ของ Layer ทแทรกใหม 39. คลกท Paste Frames 40. คลกขวาท layer ทคดลอกมาใหม 41. คลกท Mask 42. กดป ม Ctrl คางไว กดปม Enter 43. คลกท Close ปดการแสดงผล 44. จดเกบไฟลใหเรยบรอย

การใชโปรแกรมกราฟฟกเพอพฒนาเวบเพจ 14

6. การท า spot light ผเรยนไดเรยนรเกยวกบการก าหนดจดเดนใหกบรปภาพทมลกษณะเปนแสงไฟสองไปยงต าแหนงทตองการ โดยมขนตอนดงตอไปน 1. คลกท File คลกท New คลกท Flash document คลกท Ok 2. ดบเบลคลกท Layer แรก 3. ท Name พมพค าวา รปภาพ 4. คลกท File คลกท Import คลกท Import to Stage 5. ท Look in คลกท ลกศรลง 6. คลกท ไดรฟ D 7. ดบเบลคลกท Folder ทเกบรปภาพไว 8. คลกท ชอไฟลทตองการ 9. คลกท Open 10. คลกท Modify 11. คลกท Convert to Symbol 12. คลกท Movie Clip 13. คลกท OK 14. คลกท แถบเครองมอ Free Transform Tool 15. ยอ/ขยายและยายรปภาพใหพอดกบเวท 16. คลกขวาดานลางเลข 70 17. คลกท Insert Keyframe 18. คลกท Insert Layer 19. ดบเบลคลกท Layer ทแทรกใหม 20. พมพค าวา spotlight 21. คลกทแถบเครองมอ Oval Tool 22. แดรกวาดวงกลมบรเวณใบหนานางแบบ 23. คลกทแถบเครองมอ Selection 24. แดรกคลมรปวงกลม 25. คลกขวาดานลางเลข 71

การใชโปรแกรมกราฟฟกเพอพฒนาเวบเพจ 15

26. คลกท Insert Keyframe 27. คลกขวาทจดกลมดานลางเลข 1 28. คลกท Creat Motion Tween 29. คลกขวาดานลางเลข 25 30. คลกท Insert Keyframe 31. แดรกลากรปวงกลมลงมาดานลาง 32. คลกท แถบเครองมอ Free Transform Tool 33. ยอรปใหเลกลง ท าเปนวงร หรอท าการหมน 34. คลกขวาดานลางเลข 45 35. คลกท Insert Keyframe 36. แดรกลากรปวงกลมขนไปไวมมบนขวา 37. ยอใหเลกลง 38. คลกขวาท Layer spotlight 39. คลกท Mask 40. คลกทจดกลมดานลางเลข 71 41. แดรกลากมาท 65 เพอให Spotlight หยดนงนดหนง 42. กดปม Ctrl คางไว และ กดปม Enter เพอดผลงาน 43. จดเกบใหเรยบรอย