วิธีพัฒนาเบราว์เซอร์รูปภาพออนไลน์ FLASH MX ที่ใช้ ASP

การเปิดตัว FLASH MX (FLASH6) ทำให้แฟลชเกอร์เป็นอีกเหตุผลหนึ่งที่ทำให้เป็นลม เพราะใบหน้าใหม่ของเธอทำให้เราตื่นเต้น

1. มาเริ่มกันที่ฟังก์ชันใหม่ของ MX

หลังจากเข้าสู่อินเทอร์เฟซการพัฒนา MX แล้ว คลิก Help=>Samples ในแถบเมนู จากนั้นหน้าเว็บจะเปิดขึ้น ตัวอย่างเหล่านี้จะทำให้เรารู้สึกถึงฟังก์ชันใหม่ของ MX จากนั้นคลิกลิงก์ "ไฮไลต์คุณลักษณะ: โหลดรูปภาพ" ในใบไม้ เราเห็นสัตว์ทะเล 5 รูปในแอนิเมชั่นนี้ (ผู้โดยสาร A: แล้วถ้าเราเห็นล่ะ?) ความแตกต่างจากเมื่อก่อนคือ 5 ภาพนี้ไม่ได้รวมเข้าด้วยกันกับไฟล์ swf นี้ (ผู้โดยสาร B: แน่นอนมันเป็นภาพภายนอก) swf ของ "loadMovie" ซึ่งหายากและแปลก) และไม่ใช่ไฟล์ swf ภายนอกที่เรียก แต่เป็นไฟล์ภาพ jpg ภายนอก 5 ไฟล์ของ "loadMovie" เป็นเพราะ MX ได้ขยายคำสั่ง "loadMovie" ออกไป ทำให้ฉันรู้สึกเป็นเกียรติที่ได้เขียนบทช่วยสอนนี้ ^_^

เปิดความช่วยเหลือออนไลน์ของ MX แล้วคุณจะพบคำอธิบายโดยละเอียดของ MX เกี่ยวกับ "loadMovie" ประโยคแรกของส่วน "Parameters" ซึ่งก็คือ "url URL ที่สมบูรณ์หรือสัมพันธ์กันของไฟล์ SWF หรือไฟล์ JPEG ที่จะโหลด" ชี้ให้เห็น: "loadMovie" ในปัจจุบันไม่เพียงแต่สามารถโหลด swf ภายนอก แต่ยังโหลดไฟล์รูปภาพ jpg ภายนอกได้อีกด้วย ทุกวันนี้ เมื่อภาพในรูปแบบ jpg ได้รับความนิยมอย่างมากบนอินเทอร์เน็ต เราต้องบอกว่านี่เป็นข่าวที่ยอดเยี่ยม

ลองย้อนกลับไปดูคำอธิบายของ MX เกี่ยวกับตัวอย่างภาพเคลื่อนไหว "Sea Life" นี้: "ตัวอย่างนี้สาธิตวิธีที่คุณสามารถโหลดรูปภาพจากไดรฟ์หรือเซิร์ฟเวอร์ลงในภาพยนตร์ในขณะรันไทม์ได้ ไม่มีรูปภาพในไลบรารีของไฟล์ต้นฉบับสำหรับ " ตัวอย่างนี้" ใช่ "loadMovie" ของเบราว์เซอร์รูปภาพ "สิ่งมีชีวิตใต้ทะเล" นี้เป็นรูปภาพ jpg ของ "ไดรฟ์" ในเครื่อง และรายการชื่อไฟล์ของรูปภาพ jpg ได้รับการกำหนดไว้ล่วงหน้า

ปัญหาเล็กๆ น้อยๆ เกิดขึ้นจากสิ่งนี้: หากมีไฟล์ "daliang.jpg" ในรายการชื่อไฟล์ที่กำหนด แต่วันหนึ่งไฟล์นี้หายไปใน "ไดรฟ์หรือเซิร์ฟเวอร์" อย่างน่าเสียดาย เมื่อมีการใช้ "loadMovie" อีกครั้ง จะทำอย่างไร ไม่มีอะไรผิดพลาดได้ แล้วไงล่ะ? !:~( อย่าร้องไห้ มาหาวิธีแก้ปัญหาด้วยกันนะ :)

(Lurenbing: หากสามารถสร้างรายชื่อไฟล์ปัจจุบันแบบไดนามิกทุกครั้งที่ใช้ "loadMovie" ทุกอย่างจะเรียบร้อยดี ต้าเหลียง: ถูกต้อง) ทุกครั้ง เมื่อเรียกใช้ภาพเคลื่อนไหว สามารถสร้างรายการชื่อไฟล์รูปภาพ jpg ปัจจุบันแบบไดนามิกได้ ซึ่งสามารถแก้ไขปัญหาข้างต้นได้

อย่างไรก็ตาม ไม่ใช่เรื่องง่ายที่จะสร้างรายชื่อไฟล์แบบไดนามิกใน "ไดรฟ์" ในเครื่อง อย่างไรก็ตาม เราสามารถทราบได้จากคำอธิบายของแอนิเมชัน "Sea Life" นี้: "loadMovie" ของ MX ยังสามารถโหลดรูปภาพแบบไดนามิกจากเซิร์ฟเวอร์ได้ ด้านข้างให้เป็น "ชิปภาพยนตร์" ดังนั้น เราจะคิดใหม่อีกครั้ง: การใช้ภาษาฝั่ง "เซิร์ฟเวอร์" เราสามารถสร้างรายการชื่อไฟล์รูปภาพ jpg ฝั่ง "เซิร์ฟเวอร์" ได้อย่างง่ายดายและไดนามิก

2. แนวคิด

โดยสรุป เรารู้ว่าเบราว์เซอร์รูปภาพ MX นี้จะทำงานบนเครือข่าย และจะต้องมีโปรแกรมพื้นหลังบนฝั่ง "เซิร์ฟเวอร์" ที่สร้างรายการชื่อไฟล์รูปภาพ jpg แบบไดนามิกบนฝั่ง "เซิร์ฟเวอร์" ไฟล์รูปภาพ jpg เหล่านี้จะต้องวางไว้ที่ฝั่ง "เซิร์ฟเวอร์" ด้วย

เมื่อใดก็ตามที่เบราว์เซอร์รูปภาพ MX นี้ทำงาน มันจะใช้วิธีการ "loadVariables" เสมอเพื่อขอให้ SERVER ส่งคืนรายการไฟล์รูปภาพปัจจุบันทางฝั่ง "เซิร์ฟเวอร์" จากนั้นเบราว์เซอร์รูปภาพ MX จะสามารถ "loadMovie" ไฟล์ jpg เหล่านี้ได้ ไฟล์ภาพลำดับ.

เราจะเลือก ASP เป็นการสนับสนุนแบ็กเอนด์เนื่องจากสะดวกมากที่จะใช้เพื่อสำรวจไฟล์ข้าง "เซิร์ฟเวอร์"

เพื่อให้บทช่วยสอนนี้เข้าใจง่าย ไฟล์ ASP พื้นหลังและไฟล์รูปภาพ jpg ทั้งหมดจะอยู่ในไดเร็กทอรีเดียวกันทางฝั่ง "เซิร์ฟเวอร์"

นี่คือแนวคิดของโปรแกรมทั้งหมด ด้านล่างนี้ เราจะใช้อิมเมจเบราว์เซอร์ MX โดยละเอียด

3. การใช้งานเฉพาะ

1. ส่วน ASP

เริ่มต้นด้วย ASP ในพื้นหลัง เนื่องจากเบราว์เซอร์รูปภาพ MX ที่เราจะพัฒนาจะทราบรายการไฟล์ jpg ของไดเร็กทอรีปัจจุบันทางฝั่ง "เซิร์ฟเวอร์" ผ่านทาง ASP ไฟล์ imagebrowse.asp ต่อไปนี้สามารถรับรู้การทำงานของการสร้างรายการชื่อไฟล์ jpg แบบไดนามิก:

-
 สลัว strPathInfo, strPhysicalPath
 'รับชื่อไฟล์ของไฟล์ asp นี้
 strPathInfo = Request.ServerVariables("SCRIPT_NAME")
 'รับเส้นทางที่แน่นอนของไฟล์ asp นี้บนเซิร์ฟเวอร์
 strphysicalpath = server.MapPath (strpathinfo)

ASP นี้มีประโยคประมาณสิบกว่าประโยคเท่านั้น ดังนั้นมันจึงง่ายมาก ฉันเชื่อว่าผู้มีประสบการณ์จะสามารถเข้าใจ ASP นี้ได้อย่างรวดเร็ว

สมมติว่าไดเร็กทอรีที่มีไฟล์ ASP อยู่ประกอบด้วยไฟล์ jpg สองไฟล์ "one.jpg" และ "two.jpg" หากคุณรันโปรแกรม ASP นี้เพียงอย่างเดียว ในเว็บเบราว์เซอร์ รายการชื่อไฟล์ต่อไปนี้จะถูกส่งกลับ:

&image1= two.jpg&image2=one.jpg&total=2ทุกสิ่ง

ที่ขึ้นต้นด้วย "&" คือชื่อตัวแปร และ "=" ตามด้วยค่าของตัวแปร เนื่องจากนี่คือรูปแบบที่ระบุโดย Flash โดยใช้ "loadVariables" เพื่ออ่านตัวแปรภายนอก

ส่วน ASP ของพื้นหลังเสร็จสมบูรณ์แล้ว มาดูวิธีสร้างสิ่งต่าง ๆ ใน FLASH กัน

ส่วน FLASH

ให้เปิด FLASH MX ก่อน วางตัวแปร Dynamic Text สองตัวชื่อ "text" และ "test" ในฉากหลัก และป้อนสตริง "loading..." ใน "test" (แสดงว่ากำลังอ่านอยู่ จดรายการไว้) ในจำนวนนั้น "ข้อความ" ใช้เพื่อแสดงชื่อของไฟล์ jpg ที่กำลังเรียกดู และ "ทดสอบ" ใช้เพื่อแสดงข้อมูลอื่นๆ ที่เกี่ยวข้อง

จากนั้นสร้างอินสแตนซ์ชิปภาพยนตร์ชื่อ "imageview" และอินสแตนซ์ปุ่มชื่อ "display" ในฉากหลัก ทุกครั้งที่กดปุ่มนี้ รูปภาพ jpg ที่เข้ามา "loadMovie" จะแสดงใน "imageview"

จากนั้นสร้างชิปภาพยนตร์ที่ประกอบด้วย 3 เฟรมชื่อ "finder" ในฉากหลัก หน้าที่ของมันคือถามเซิร์ฟเวอร์ถึงรายการชื่อไฟล์ภาพ jpg ในไดเร็กทอรีปัจจุบัน มันจะไม่หยุดที่เฟรมที่สองจนกว่าคำตอบจะเป็น ได้รับ Action Scripts ของสามเฟรมนี้คือ:

Action Script ของเฟรมแรก:

//ส่งคืนรายการชื่อไฟล์ jpg ที่สร้างโดย imagebrowse.asp
 //กรอกเส้นทางของไฟล์ ASP ตามสถานการณ์จริง
 //บทความนี้ถือว่าไฟล์ ASP และไฟล์ jpg ทั้งหมดอยู่ในไดเร็กทอรีรากของเว็บเซิร์ฟเวอร์
 loadVariables("http://127.0.0.1/imagebrowse.asp", "");

สคริปต์การกระทำของเฟรมที่สอง:

//หากค่าทั้งหมดที่ส่งคืนไม่ว่างเปล่าแสดงว่า... 
ถ้า (รวม<>null) { 
     //แสดงในกล่องข้อความ "ทดสอบ" จำนวนไฟล์ jpg ในชื่อไฟล์ jpg list_root.test = "total=" เพิ่มผลรวม; 
     //โอนชื่อไฟล์ jpg เหล่านี้ไปยังตัวแปร FLASH เหล่านี้โดยขึ้นต้นด้วย "fImage" ตามลำดับสำหรับ (i=1; i<=total; i++) { 
       set("fImage" เพิ่ม i, eval("image" เพิ่ม i)); 
     - 
     //หยุดที่เฟรมปัจจุบันหยุด(); 
-  

สคริปต์การกระทำของเฟรมที่สาม:

จะควบคุมการแสดงภาพ

เมื่อกลับไปที่เฟรมที่สอง

ต่อไปก็ถึงเวลามอบจิตวิญญาณให้กับปุ่ม "แสดงผล"

กลับไปที่ฉากหลักและเพิ่ม Action Script ต่อไปนี้ลงในเฟรมแรกของฉากหลัก (ฉากหลักมีเพียงเฟรมเดียวเท่านั้น):

count = 1; 
   //เหตุการณ์ที่ทริกเกอร์โดยการคลิกปุ่ม//(วิธีการอธิบายเหตุการณ์ใหม่ของ FLASH MX ทำให้การเขียนโปรแกรมสคริปต์ของ MX ใกล้เคียงกับเชิงวัตถุมากขึ้น) 
   _root.display.onPress = ฟังก์ชั่น () { 
   //ถ้าค่ารวมไม่ว่างเปล่าแสดงว่า... 
   //(กล่าวคือ: ถ้าอ่านรายชื่อไฟล์สำเร็จแล้ว...) 
     ถ้า (_root.finder.total<>null) { 
       //ใช้วิธี "loadMovie" เพื่อแสดงภาพ jpg ใน "imageview" loadMovie(eval("_root.finder.fImage" เพิ่มจำนวน), _root.imageview); 
       //แสดงชื่อไฟล์ของรูปภาพ jpg นี้ในข้อความ "text" box_root.text = eval("_root.finder.fImage" เพิ่มจำนวน); 
       //แสดงในกล่องข้อความ "ทดสอบ" ว่าไฟล์รูปภาพ jpg นี้อยู่ใน list_root.test = "Number=" เพิ่มจำนวน; 
       //หากภาพสุดท้ายในรายการปรากฏขึ้น ให้เริ่มแสดงภาพแรกในรายการอีกครั้งหาก (count<_root.finder.total) { 
         นับ++; 
       } อื่น { 
         นับ = 1; 
       - 
     - 
   - 

จนถึงตอนนี้ สิ่งต่าง ๆ ในส่วนของ FLASH ก็ได้เสร็จสมบูรณ์แล้ว หลังจากคอมไพล์และส่งออกไฟล์ swf แล้ว โปรแกรมทั้งหมดก็ได้รับการประกาศว่าเสร็จสมบูรณ์แล้ว!

3. ทดสอบ

บทความนี้สันนิษฐานว่าไฟล์ ASP และไฟล์ jpg ทั้งหมดอยู่ในไดเรกทอรีรากของเว็บเซิร์ฟเวอร์

ฉันไม่รู้ว่าโปรแกรมนี้ทำงานอย่างไร มาทดสอบกัน:

ขั้นแรกวางไฟล์ภาพ jpg บางไฟล์แบบสุ่มในไดเร็กทอรีรากของเซิร์ฟเวอร์เว็บ จากนั้นใช้ Flash Player หรือเว็บเบราว์เซอร์เพื่อเปิดไฟล์ swf ที่คุณเพิ่งสร้าง และรอจนกระทั่งปุ่ม "กำลังโหลด" ปรากฏขึ้นใน "ทดสอบ" " กล่องข้อความ ..." หลังจากที่สตริงหายไป เราสามารถเรียกดูภาพ jpg เหล่านี้ได้โดยคลิกปุ่ม "แสดง"

4. สรุป

เทคโนโลยีใหม่ของ FLASH MX สามารถใช้ร่วมกับบางโปรแกรมเช่น ASP เพื่อทำให้ FLASH ตื่นตายิ่งขึ้น

บทความนี้เป็นเพียงบทช่วยสอนเท่านั้น เพื่อให้ผู้อ่านเข้าใจถึงสิ่งสำคัญได้อย่างรวดเร็ว ฟังก์ชันของเบราว์เซอร์รูปภาพ MX นี้จึงไม่ง่ายไปกว่านี้แล้ว หากคุณต้องการใช้งานจริง คุณจะต้องปรับปรุงโปรแกรมนี้บางส่วน ตัวอย่างเช่น: เนื่องจากข้อจำกัดแบนด์วิธ เมื่อ "loadMovie" เป็นภาพขนาดใหญ่ คุณต้องเพิ่มโปรแกรมโหลดภาพล่วงหน้าใน FLASH เพื่อไม่ให้ปรากฏการณ์ "การรอโง่" เกิดขึ้นอีกต่อไป เมื่อ "loadMovie" เข้ามา เมื่อขนาดของภาพ มีขนาดใหญ่หรือเล็ก คุณต้องเพิ่มโปรแกรมที่ปรับขนาดโดยอัตโนมัติ ทำการปรับปรุงที่เหมาะสมกับโปรแกรม ASP และส่วน FLASH เพื่อไม่ให้จำกัดอยู่เพียงการเรียกดูไดเร็กทอรีที่มีไฟล์ "imagebrowse.asp" ด้วยการปรับปรุงส่วน FLASH อย่างเหมาะสม ทำให้สามารถประมวลผลรูปภาพที่มาจาก "loadMovie" อย่างง่ายๆ ได้ เช่น การปรับขนาด การเปลี่ยนสี การเสียรูปอย่างง่าย เป็นต้น (หลังจากการตรวจสอบแล้ว แนวคิดข้างต้นก็สามารถเป็นจริงได้ แต่ต้าเหลียงขี้เกียจเกินไปที่จะทำ ทุกคนต้องทำงานหนัก! ทำงานหนัก! อย่าเกียจคร้านกับต้าเหลียง^_^)

สุดท้ายนี้ หลังจากอ่านบทความนี้แล้ว ฉันหวังว่าพวกคุณทุกคนจะสร้างเบราว์เซอร์รูปภาพออนไลน์ FLASH MX ที่น่าตื่นตาตื่นใจที่สุดบนอินเทอร์เน็ต อย่าลืมบอก Da Liang ข่าวดีและแนวคิดของคุณ

โอเค แค่นี้ก่อน แล้วเจอกัน!

เนื่องจาก Da Liang มีระดับที่จำกัด จึงมีการละเว้นบางอย่างอย่างหลีกเลี่ยงไม่ได้ เพื่อนๆ สามารถวิพากษ์วิจารณ์และแก้ไขได้