ฟอนต์ฟอรั่ม

F0NT Community (เก่า) => ห้องคอม => ห้องแฟลช => โพสต์ถูกเริ่มโดย: sarina เมื่อ 20 ส.ค. 2008, 12:06 น.

ชื่อเรื่อง: การจัดรูปแบบของภาพที่ใช้ XML เรียกมา
โพสต์โดย: sarina เมื่อ 20 ส.ค. 2008, 12:06 น.
 :56: เราสามารถจัดรูปแบบและขนาดของรูปภาพที่ใช้ XML เรียกมาทำยังไงคะ
ประมาณรูปข้างล่างอ่ะค่ะ
(http://img2.f0nt.com/20/ce592c6121d1a744b665a99c1be76659.jpg)
ให้มันเรียงกันเป็นแถวและสามารถกำหนดขนาดให้เล็กได้  โดยหากรูปมีจำนวนมาก
ก็จะมีปุ่มเลื่อนหรือสกอร์บาร์(อันนี้ก็มึน..อิอิ)  แล้วทำเป็น event เมื่อคลิ๊ก
ก็จะส่งรูปนั้นไปไว้ใน MC (ในกรอบสีแดง)

.........ขอบคุณล่วงหน้านะคะ
ชื่อเรื่อง: ตอบ: การจัดรูปแบบของภาพที่ใช้ XML เรีย
โพสต์โดย: Layiji เมื่อ 20 ส.ค. 2008, 12:07 น.
 :25: รออ่านด้วยครับ
ชื่อเรื่อง: ตอบ: การจัดรูปแบบของภาพที่ใช้ XML เรีย
โพสต์โดย: จักรี เมื่อ 20 ส.ค. 2008, 12:11 น.
เดี๋ยวขอศึกษาการเขียนดึง xml มาโชว์ก่อนนะครับ  :37:
เพราะลำพังแค่ดึงมาโชว์ยังทำไม่ได้เลย :05:  งั้นรออ่านด้วยคน :25:
ชื่อเรื่อง: ตอบ: การจัดรูปแบบของภาพที่ใช้ XML เรีย
โพสต์โดย: ยุนเอ เมื่อ 20 ส.ค. 2008, 13:24 น.


ถ้าใช้ FLEX ก็ลากๆ วางๆ ครับ

แต่แฟลชไม่รู้  :47:
ชื่อเรื่อง: ตอบ: การจัดรูปแบบของภาพที่ใช้ XML เรีย
โพสต์โดย: sarina เมื่อ 20 ส.ค. 2008, 14:38 น.
 :05: สู้ๆ
ชื่อเรื่อง: ตอบ: การจัดรูปแบบของภาพที่ใช้ XML เรีย
โพสต์โดย: yamadie [ 道教 ] เมื่อ 20 ส.ค. 2008, 15:28 น.

(http://img2.f0nt.com/20/a537efffb2d2f1d4f2744c3494a941d2.jpg)

ลองอ่านจากบทความนี้ แล้วนำมาประยุกต์ใช้ดูครับ
Kirupa (http://www.kirupa.com/developer/mx2004/thumbnails.htm)
ชื่อเรื่อง: ตอบ: การจัดรูปแบบของภาพที่ใช้ XML เรีย
โพสต์โดย: sarina เมื่อ 20 ส.ค. 2008, 16:08 น.
 :40: ขอบคุณมากนะค่ะ
แต่ที่คุณ yamadie [ 道教 ] ให้มาอันนี้มันแยกเป้น 2 คือส่วนของ icon และส่วนของรูปจริง
พอคลิ๊กที่ icon มันก็จะเรียกรูปจริงออกมา  แต่ตรงสไลด์ข้างล่างเจ๋งดีค่ะ
ยังไงก็ขอบคุณนะค่ะ

**แต่ที่อยากได้คือประมาณนี้ค่ะ
(http://img2.f0nt.com/20/7468e78719daecb977ca111c5295f2ae.jpg)
พอเราคลิ๊กตัวที่เลือกมันก็จะมาแสดงใน MC ค่ะ(ส่วนเรื่องปุ่มหมุนขยายและลบเสร็จแล้วค่ะ :42:)

http://www.printenator.com/index.php?page=shop.product_details&flypage=flypage-ask.tpl&product_id=30&category_id=13&option=com_virtuemart&Itemid=66

:33:หรือว่าควรเปลี่ยนแปลงยังไงเสนอได้นะค่ะ(เพราะตอนนี้มึนไม่รู้จะต่อยังไง..อิอิ)
ชื่อเรื่อง: ตอบ: การจัดรูปแบบของภาพที่ใช้ XML เรีย
โพสต์โดย: กากก่อเกรียนนู้บ เมื่อ 21 ส.ค. 2008, 02:25 น.
ใช้ MovieClipLoader ช่วยครับในการรับรูปเข้ามาแสดง เพราะมันจะตรวจรูปให้ด้วยว่าโหลดเสร็จหรือยัง
แถมย่อขนาดให้เข้ากับขนาดของ MovieClipLoader ให้เองด้วย (สะดวกมาก)

ส่วนการจัดให้เป็นคอลัมน์ และแถวนั่น ต้องเอาจำนวนรูปทั้งหมดมาคำนวณครับ

สมมติว่า มี 20 รูป เอา แถวละ 3 รูป

ก็ให้คิดว่า ต้องสร้าง 20/3 = 6.67 = 7 แถว

ก็วนลูปดูครับว่า ทุกๆ 3 รูปให้เปลี่ยนแถว

var xPosition;
var yPosition = 20;

for( i = 0; i < 20; i++){
  xPosition = 20 + (50*(i%3)); //ตำแหน่ง x ที่เป็นไปได้คือ 20, 70, 120
  if(i%3 == 0){
     yPosition += 50; //เมื่อครบ 3 รูป ก็จะเปลี่ยนค่า yPosition ทีนึง ค่าที่เป็นไปได้ก็ 20, 70, ...
  }

  trace("xPosition: " + xPosition + ", yPosition: " + yPosition);
}


ยังไม่ได้เทสต์นะครับ แต่โดยหลักการแล้วคือประมาณนี้ครับ
ชื่อเรื่อง: ตอบ: การจัดรูปแบบของภาพที่ใช้ XML เรีย
โพสต์โดย: sarina เมื่อ 21 ส.ค. 2008, 11:15 น.
 :09: MovieClipLoader มันย่อขนาดยังไงค่ะเพราะลองดึงมาแสดงแล้วมันแสดงเท่าขนาดจิงของรูปอ่ะค่ะ
แล้วอีกอย่าง  ถ้าuser อัพรูปมาเยอะๆ มันเก็บรูป 1 ภาพ ต่อ MovieClipLoader 1ตัว หรือมันได้มากกว่านั้น
เพราะขนาดของรูปที่ไม่เท่ากัน  เลยเป็นปัญหาในตอนนี้  อีกกอย่างต้องทำให้มันมีสกอร์ล ถ้ารูปเยอะ
**และต้องเอารูปเข้าไปใน mc นั้นอีก  ขอคำแนะนำหน่อยนะค่ะ  ขอบคุณค่ะ
ชื่อเรื่อง: ตอบ: การจัดรูปแบบของภาพที่ใช้ XML เรีย
โพสต์โดย: กากก่อเกรียนนู้บ เมื่อ 21 ส.ค. 2008, 16:13 น.
MovieClipLoader เป็นตัวจัดการการโหลดภา่พ/swf ใส่ MovieClip ครับ
ดังนั้นเราต้องมี MovieClip มารับภาพที่จะโหลดเข้ามาด้วย

var mcldr:MovieClipLoader = new MovieClipLoader();
//สร้าง MovieClip มารอรับภาพที่โหลด ตัวอย่างนะครับ ใช้จริงก็ว่ากันอีกที
_root.createEmptyMovieClip("holder_mc",10);
//โหลดภาพ
mcldr.loadClip("URLภาพ", holder_mc);

//สั่งให้ตรวจสอบเหตุการณ์ที่เกิดขึ้น
mcldr.addListener(this);

// ภาพโหลดเสร็จแล้ว ก็ย่อมันลงเท่าขนาดที่ต้องการ
function onLoadInit(_mc:MovieClip) {
   _mc._width = 30;
   _mc._height = 30;
};

// เหตุการณ์นี้จะทำงาน เมื่อภาพกำลังโหลดครับ
function onLoadProgress(_mc:MovieClip, loaded:Number, total:Number) {
   pct_mc.pct_txt.text = Math.floor(loaded / total * 100) + "%";
};
ชื่อเรื่อง: ตอบ: การจัดรูปแบบของภาพที่ใช้ XML เรีย
โพสต์โดย: sarina เมื่อ 22 ส.ค. 2008, 11:41 น.
 :33:เย้..ทำได้แล้ว

แต่มันติดอยู่อีกนิดนึ่ง
-ถ้าเป็นรูปสี่เหลี่ยมจัตตุรัสมันไม่มีปัญหาค่ะ
-แต่พอเป็นรูปสี่เหลี่ยมผืนผ้าทั้งแนวสูง
และแนวนอนรูปมันบีบมาเลยค่ะ  ต้องแก้ไงคะ

เพราะสคริปที่ให้มามัน fix ค่า width กับ height เอาไว้
   _mc._width = 30;
   _mc._height = 30;


ต้องทำไงค่ะขอคำแนะนำอีกหน่อยนะค่ะ :46:
ชื่อเรื่อง: ตอบ: การจัดรูปแบบของภาพที่ใช้ XML เรีย
โพสต์โดย: sarina เมื่อ 22 ส.ค. 2008, 15:29 น.
 :42: แบบนี้ค่ะ อยากให้เป็นแบบในรูปส่วนล่างน่ะค่ะ
(http://img2.f0nt.com/22/30fccc53af9662562c69b8c26f8f0c07.jpg)
สัดส่วนของรูปจะเท่าเดิมไม่โดนบีบอะค่ะ
ชื่อเรื่อง: ตอบ: การจัดรูปแบบของภาพที่ใช้ XML เรีย
โพสต์โดย: poloh เมื่อ 22 ส.ค. 2008, 15:41 น.
ลองใช้ _xscale กับ _yscale ประยุกต์ดูนะครับ
ชื่อเรื่อง: ตอบ: การจัดรูปแบบของภาพที่ใช้ XML เรีย
โพสต์โดย: กากก่อเกรียนนู้บ เมื่อ 23 ส.ค. 2008, 04:04 น.
มีวิธีบนก็ได้ครับ

หรือจะถึกแบบผมด้านล่างนี้ ก็ได้ขนาดที่เป๊ะเหมือนกัน
คือหาอัตราส่วนระหว่างด้านกว้าง และด้านยาว ครับ

...
function onLoadInit(_mc:MovieClip) {
  var w = _mc._width;
  var h = _mc._height;
  var ratio = (w > h)?h/w:w/h; //ดู ด้านไหนสั้นกว่า ก็เอาด้านนั้นตั้ง หารด้วยด้านที่ยาวกว่า จะได้เป็นทศนิยมที่น้อยกว่า 1

  _mc._width = 30; //fix ความกว้างที่ 30 ด้านยาวก็ต้องคำนวณจากอัตราส่วน
  _mc._height = (w > h)?w*ratio:w/ratio; //ดู ด้านแนวนอนยาวกว่า ก็เอาไปคูณอัตราส่วน แต่ถ้าแนวนอนสั้นกว่าแนวตั้ง ก็ไปหารอัตราส่วน
};
...


ประมาณนี้ครับ เอาไปลองแล้วผิดยังไง ก็ลองแก้ดูอีกทีนะครับ
ชื่อเรื่อง: ตอบ: การจัดรูปแบบของภาพที่ใช้ XML เรีย
โพสต์โดย: poloh เมื่อ 23 ส.ค. 2008, 13:41 น.
หลักๆที่ผมคิดก็เหมือนก่อแหละครับ

ต่างกันติ๊ดเดียว


...
function onLoadInit(_mc:MovieClip) {
  _mc._width = _mc._height = 30;//กำหนดค่าไปก่อน
  var w = _mc._xscale;
  var h  = _mc._yscale;
  if(_mc._xscale > _mc._yscale){ //ตรวจสอบว่าค่าไหนมีค่าน้อยกว่า ให้ใช้ของ scale นั้นแทน
    _mc._xscale = _mc._yscale;
  }else{
    _mc._yscale = _mc._xscale;
  }
};
...

** อันนี้ผมตีโจทย์ว่า ต้องการความกว้างหรือความสูงเท่ากับ 30 เท่านั้น
** แต่ถ้าต้องการกำหนดความกว้างคงที่ ก็ใช้ของก่อได้เลยครับ

ปล. โค้ดนี้ผมยังไม่ได้ลองนะครับ ถ้าผิดไป ก็ขออภัยด้วย
ชื่อเรื่อง: ตอบ: การจัดรูปแบบของภาพที่ใช้ XML เรีย
โพสต์โดย: sarina เมื่อ 25 ส.ค. 2008, 08:46 น.
ขอบคุณมากๆๆๆๆๆๆ ค่ะ :33:
ชื่อเรื่อง: ตอบ: การจัดรูปแบบของภาพที่ใช้ XML เรีย
โพสต์โดย: sarina เมื่อ 26 ส.ค. 2008, 13:06 น.
 :33: ทำได้แล้วค่ะ  จากที่ให้มาตรงเป๊ะเลยอ่ะค่ะ

var mcldr:MovieClipLoader = new MovieClipLoader();

//สร้าง MovieClip มารอรับภาพที่โหลด ตัวอย่างนะครับ ใช้จริงก็ว่ากันอีกที
_root.createEmptyMovieClip("holder_mc",10);

//โหลดภาพ
mcldr.loadClip("imgs/12190555433.png", holder_mc);

holder_mc._x = 80;
holder_mc._y = 310;

//สั่งให้ตรวจสอบเหตุการณ์ที่เกิดขึ้น
mcldr.addListener(this);

// ภาพโหลดเสร็จแล้ว ก็ย่อมันลงเท่าขนาดที่ต้องการ
function onLoadInit(_mc:MovieClip) {
  _mc._width = _mc._height = 50;//กำหนดค่าไปก่อน
  var w = _mc._xscale;
  var h  = _mc._yscale;
  if(_mc._xscale > _mc._yscale){ //ตรวจสอบว่าค่าไหนมีค่าน้อยกว่า ให้ใช้ของ scale นั้นแทน
    _mc._xscale = _mc._yscale;
  }else{
    _mc._yscale = _mc._xscale;

  }
};

// เหตุการณ์นี้จะทำงาน เมื่อภาพกำลังโหลดครับ
function onLoadProgress(_mc:MovieClip, loaded:Number, total:Number) {
   pct_mc.pct_txt.text = Math.floor(loaded / total * 100) + "%";
}


แต่ที่นี้มันมายุ่งตรงใช้ XML ไฟล์ นี้แหละค่ะ ชักงงๆ
ไม่รู้เขียนให้มันรันรูปที่โหลดมาไง  แล้วต้องทำให้มันเป็นปุ่มเรียงกันพอเราคลิ๊ก
มันก็จะดึงรูปมาแสดงใน mc ที่อยู่ในไลบารี่ :54:
(http://img2.f0nt.com/26/0188932be8a21c037421f4391225573d.jpg)
พอมีตัวอย่างป่าวค่ะ หรือว่าต้องเขียนยังไง  ประมาณไหน
:42: ขอบคุณค่ะ
ชื่อเรื่อง: ตอบ: การจัดรูปแบบของภาพที่ใช้ XML เรีย
โพสต์โดย: sarina เมื่อ 26 ส.ค. 2008, 13:13 น.
 :46:
ชื่อเรื่อง: ตอบ: การจัดรูปแบบของภาพที่ใช้ XML เรีย
โพสต์โดย: กากก่อเกรียนนู้บ เมื่อ 26 ส.ค. 2008, 14:25 น.
เฮ้อ อืม คุณก็แค่ก๊อปมาแปะแค่นั้นเอง ผมไม่รู้ว่าคุณเข้าใจโค้ดแค่ไหน

การโหลด XML นี่เข้าใจว่ามันยาก

แต่ไอ้ที่เอา MovieClip มาเรียงเนี่ย จริงๆ งานทุกงานที่ผ่านมา
ที่คุณบอกทำได้แล้วเนี่ย คุณน่าจะมีพื้นฐานได้บ้างแล้ว

แต่นี่เหมือนกับว่า ที่ผ่านมาคุณแค่ก๊อปโค้ดแปะ แล้วทำงานได้อะครับ

ลองดูอีกหน่อยดีไหมครับ ใน Help ก็มีครับ วิธีการดึง XML

ในบอร์ด TFD ผมก็อธิบายไว้แล้วเรื่อง Flash+XML

เดี๋ยวเอา Powerpoint Flash+XML มาแจกอีกเลยเอ้า

ผมขออย่างเดียวครับ
ขอให้คุณลองทำดูก่อน
ชื่อเรื่อง: ตอบ: การจัดรูปแบบของภาพที่ใช้ XML เรีย
โพสต์โดย: sarina เมื่อ 26 ส.ค. 2008, 14:32 น.
อ้างคำพูดจาก: sarina เมื่อ 26 ส.ค. 2008, 13:06 น.
:33: ทำได้แล้วค่ะ  จากที่ให้มาตรงเป๊ะเลยอ่ะค่ะ

var mcldr:MovieClipLoader = new MovieClipLoader();

//สร้าง MovieClip มารอรับภาพที่โหลด ตัวอย่างนะครับ ใช้จริงก็ว่ากันอีกที
_root.createEmptyMovieClip("holder_mc",10);

//โหลดภาพ
mcldr.loadClip("imgs/12190555433.png", holder_mc);

holder_mc._x = 80;
holder_mc._y = 310;

//สั่งให้ตรวจสอบเหตุการณ์ที่เกิดขึ้น
mcldr.addListener(this);

// ภาพโหลดเสร็จแล้ว ก็ย่อมันลงเท่าขนาดที่ต้องการ
function onLoadInit(_mc:MovieClip) {
  _mc._width = _mc._height = 50;//กำหนดค่าไปก่อน
  var w = _mc._xscale;
  var h  = _mc._yscale;
  if(_mc._xscale > _mc._yscale){ //ตรวจสอบว่าค่าไหนมีค่าน้อยกว่า ให้ใช้ของ scale นั้นแทน
    _mc._xscale = _mc._yscale;
  }else{
    _mc._yscale = _mc._xscale;

  }
};

// เหตุการณ์นี้จะทำงาน เมื่อภาพกำลังโหลดครับ
function onLoadProgress(_mc:MovieClip, loaded:Number, total:Number) {
   pct_mc.pct_txt.text = Math.floor(loaded / total * 100) + "%";
}



:05:ที่โพสไปอ่ะเผื่อคนอื่นเข้ามาดูโค๊ดอ่ะค่ะก็เลยรวมเอาไว้แล้วบอกว่าโค้ดนี้ใช้ได้อ่ะค่ะ
ขอโทษด้วยค่ะถ้าหากทำให้เข้าใจผิด  ส่วนที่ถามไปก็ทำอยู่ด้วยค่ะ
แต่ยังไงก็ขอบคุณมากนะคะ  :42:
ชื่อเรื่อง: ตอบ: การจัดรูปแบบของภาพที่ใช้ XML เรีย
โพสต์โดย: poloh เมื่อ 27 ส.ค. 2008, 14:25 น.
ไม่เคยใช้ MovieClipLoader มาก่อนเลย
แต่ก่อนจะติดปัญหาเรื่องที่ว่า โหลดภาพมาแล้วหาค่าความสูงความกว้างไม่ได้
เลยใช้แบบ enterframe เชกความกว้าง ความสูงไปเรื่อย

วันนี้ต้องทำงานนึง เลยได้ข้อมูลตัวนี้มาใช้งานพอดี
ขอบคุณก่อมากๆเลยครับ :12:
ชื่อเรื่อง: ตอบ: การจัดรูปแบบของภาพที่ใช้ XML เรีย
โพสต์โดย: RevlonZ เมื่อ 06 ก.ย. 2008, 04:13 น.
ลองเอาตัวนี้ไปดูมั้ยครับ zoom in out ได้ด้วย -0- มันทำได้มากเกินไปผมเคยเก็บไว้ศึกษา
ถึงคราวจริงๆแล้วผมใช้ตัว ด้านล่าง

(http://www.uploadtoday.com/images/partner/download_file.jpeg) (http://www.uploadtoday.com/download/?41040&A=911739)

แต่ผมเองใช้ของ Simpleviewer อยู่ใช้งานง่ายดี ตัวอย่าง http://www.dijuit.com/gallery.html ผมลองล๊ะ
ดาวโหลดนี่เลยครับใครที่ชอบแบบง่ายๆแก้ xml อย่างเดียว เปิดด้วย notepad แล้วลองศึกษาดูน๊ะ
        V
        V
        V
        V
        V
http://www.airtightinteractive.com/simpleviewer/simpleviewer.zip (http://www.airtightinteractive.com/simpleviewer/simpleviewer.zip)

:53: