การจัดรูปแบบของภาพที่ใช้ XML เรียกมา

[sarina]

  เราสามารถจัดรูปแบบและขนาดของรูปภาพที่ใช้ XML เรียกมาทำยังไงคะ
ประมาณรูปข้างล่างอ่ะค่ะ

ให้มันเรียงกันเป็นแถวและสามารถกำหนดขนาดให้เล็กได้  โดยหากรูปมีจำนวนมาก
ก็จะมีปุ่มเลื่อนหรือสกอร์บาร์(อันนี้ก็มึน..อิอิ)  แล้วทำเป็น event เมื่อคลิ๊ก
ก็จะส่งรูปนั้นไปไว้ใน MC (ในกรอบสีแดง)

.........ขอบคุณล่วงหน้านะคะ

[Layiji]

  รออ่านด้วยครับ

[จักรี]

เดี๋ยวขอศึกษาการเขียนดึง xml มาโชว์ก่อนนะครับ 
เพราะลำพังแค่ดึงมาโชว์ยังทำไม่ได้เลย   งั้นรออ่านด้วยคน

[ยุนเอ]

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

แต่แฟลชไม่รู้ 

[sarina]

  สู้ๆ

[yamadie [ 道教 ]]

ลองอ่านจากบทความนี้ แล้วนำมาประยุกต์ใช้ดูครับ
Kirupa

[sarina]

  ขอบคุณมากนะค่ะ
แต่ที่คุณ yamadie [ 道教 ] ให้มาอันนี้มันแยกเป้น 2 คือส่วนของ icon และส่วนของรูปจริง
พอคลิ๊กที่ icon มันก็จะเรียกรูปจริงออกมา  แต่ตรงสไลด์ข้างล่างเจ๋งดีค่ะ
ยังไงก็ขอบคุณนะค่ะ

**แต่ที่อยากได้คือประมาณนี้ค่ะ

พอเราคลิ๊กตัวที่เลือกมันก็จะมาแสดงใน MC ค่ะ(ส่วนเรื่องปุ่มหมุนขยายและลบเสร็จแล้วค่ะ )

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:หรือว่าควรเปลี่ยนแปลงยังไงเสนอได้นะค่ะ(เพราะตอนนี้มึนไม่รู้จะต่อยังไง..อิอิ)

[กากก่อเกรียนนู้บ]

ใช้ 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);
}

ยังไม่ได้เทสต์นะครับ แต่โดยหลักการแล้วคือประมาณนี้ครับ

[sarina]

  MovieClipLoader มันย่อขนาดยังไงค่ะเพราะลองดึงมาแสดงแล้วมันแสดงเท่าขนาดจิงของรูปอ่ะค่ะ
แล้วอีกอย่าง  ถ้าuser อัพรูปมาเยอะๆ มันเก็บรูป 1 ภาพ ต่อ MovieClipLoader 1ตัว หรือมันได้มากกว่านั้น
เพราะขนาดของรูปที่ไม่เท่ากัน  เลยเป็นปัญหาในตอนนี้  อีกกอย่างต้องทำให้มันมีสกอร์ล ถ้ารูปเยอะ
**และต้องเอารูปเข้าไปใน mc นั้นอีก  ขอคำแนะนำหน่อยนะค่ะ  ขอบคุณค่ะ

[กากก่อเกรียนนู้บ]

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) + "%";
};

[sarina]

 :33:เย้..ทำได้แล้ว

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

เพราะสคริปที่ให้มามัน fix ค่า width กับ height เอาไว้

โค้ด เลือกทั้งหมด ขยายเนื้อหา

   _mc._width = 30;
   _mc._height = 30;

ต้องทำไงค่ะขอคำแนะนำอีกหน่อยนะค่ะ

[sarina]

  แบบนี้ค่ะ อยากให้เป็นแบบในรูปส่วนล่างน่ะค่ะ

สัดส่วนของรูปจะเท่าเดิมไม่โดนบีบอะค่ะ

[poloh]

ลองใช้ _xscale กับ _yscale ประยุกต์ดูนะครับ

[กากก่อเกรียนนู้บ]

มีวิธีบนก็ได้ครับ

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

โค้ด เลือกทั้งหมด ขยายเนื้อหา

...
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; //ดู ด้านแนวนอนยาวกว่า ก็เอาไปคูณอัตราส่วน แต่ถ้าแนวนอนสั้นกว่าแนวตั้ง ก็ไปหารอัตราส่วน
};
...

ประมาณนี้ครับ เอาไปลองแล้วผิดยังไง ก็ลองแก้ดูอีกทีนะครับ

[poloh]

หลักๆที่ผมคิดก็เหมือนก่อแหละครับ

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

โค้ด เลือกทั้งหมด ขยายเนื้อหา


...
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 เท่านั้น
** แต่ถ้าต้องการกำหนดความกว้างคงที่ ก็ใช้ของก่อได้เลยครับ

ปล. โค้ดนี้ผมยังไม่ได้ลองนะครับ ถ้าผิดไป ก็ขออภัยด้วย