Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [AS3] Obramowanie
Forum PHP.pl > Inne > Hydepark
230005
Chciałbym dodać obramowanie wokół MovieClip'a, lub obrazu w nim (żadna animacja, tylko coś takiego jak w css border: 10px solid grey). Problem w tym, że kiedy nadaję obramowanie samemu MovieClipowi, jest ono mniejsze niż obszar przez niego zajmowany - rysowany jest kwadrat wokół lewego górnego rogu, a jego wielkość jest uzależniona od wielkości samego MC (np. mc ma wymiar 400X200, a ramka 50X25). Kiedy natomiast rysuję ramkę wokół bitmapy wewnątrz mc, ma ona różny rozmiar - a to w zależności od tego z jakiej wielkości zdjęcie zostało przeskalowane - czasem jest gruba, a czasem ledwo ją widać.

  1.  
  2. //tak rysuję:
  3. public function drawBorder():void {
  4. graphics.lineStyle( 40, 0xCCCCCC );
  5. graphics.drawRect(0, 0, getChildAt(0).width, getChildAt(0).height);
  6. graphics.endFill();
  7. }
  8.  
  9. //tak wywołuję, PolaroidMc dziedziczy po MovieClip
  10. var mc:MovieClip = new PolaroidMc();
  11. mc.addChild(e.target.content);
  12. mc.drawBorder();
  13.  


Mam nadzieję, że w miarę jasno opisałem problem smile.gif. Jakieś sugestie?
wookieb
A po co pobierasz element na głębokości 0?
Nie mogłeś poprostu użyć this.width ?
Poza tym pokaż kod PolaroidMC bo to też wiele znaczy.

Poza tym spójrz na metodę getRect z movieclipa
230005
Elementem na głębokości 0 jest bitmapa. Potrzebuję jej, ponieważ jak pisałem, jeśli daję obramowanie samemu MovieClip'owi, ma ono niewłaściwy rozmiar, czyli wielkość zdjęcia pomniejszoną o jakiś procent i dla każdego zdjęcia jest ona inna (bo każde zdjęcie ma inny rozmiar smile.gif). Nie użyłem this.width z wyżej podanego powodu. Na razie w kodzie PolaroidMc nie ma nic prócz tej jednej metody, którą tu zamieściłem (drawBorder). Co do getRect():

  1.  
  2. var dim = getRect(this);
  3. trace(dim);
  4. graphics.lineStyle( 40, 0xCCCCCC );
  5. graphics.drawRect(dim.x, dim.y, dim.w, dim.h);
  6. graphics.endFill();
  7.  


Po wypisaniu dostaję poprawne wyniki, np:

(x=0, y=0, w=800, h=781)

i błąd:

ReferenceError: Error #1069: Nie znaleziono właściwości w w flash.geom.Rectangle, a wartość domyślna nie istnieje.
at PolaroidMc/drawBorder()
at Document/onBigComplete()

EDIT:

faktycznie, this.width daje ten sam wynik, co getChildAt(0).width - a wydawało mi się, że to sprawdzałem. Błąd z różnymi ramkami wciąż jednak występuje.

Tu jest kod, który zdjęcie skaluje i umieszcza na scenie:

  1.  
  2. var angle:Number = (Math.random() * 100) / 6;
  3.  
  4. while (Math.round(angle) > 6) {
  5. angle = (Math.random() * 100) / 6;
  6. }
  7.  
  8. var mc:MovieClip = new PolaroidMc();
  9. mc.addChild(e.target.content);
  10. mc.drawBorder();
  11.  
  12. var iWidth = e.target.content.width;
  13. var iHeight = e.target.content.height;
  14. var newW = 430;
  15. var newH = 430;
  16.  
  17. if(iWidth > iHeight) {
  18. newH = iHeight * (newH / iWidth);
  19. mc.x = tX;
  20. mc.y = tY + 20;
  21. }
  22. else if(iWidth < iHeight) {
  23. newW = iWidth * (newW / iHeight);
  24. mc.x = tX + 100;
  25. mc.y = tY;
  26. }
  27.  
  28. mc.name = currentlyLoadedName;
  29. mc.width = newW;
  30. mc.height = newH;
  31.  
  32. tX -= 10;
  33. tY -= 3;
  34.  
  35. if ((Math.ceil(Math.random() * 100)) % 2 == 0) {
  36. mc.rotation -= angle;
  37. } else {
  38. mc.rotation += angle;
  39. }
  40.  
  41. album_mc.addChild(mc);
  42.  
wookieb
Cytat(230005 @ 4.04.2010, 18:52:26 ) *
ReferenceError: Error #1069: Nie znaleziono właściwości w w flash.geom.Rectangle, a wartość domyślna nie istnieje.
at PolaroidMc/drawBorder()
at Document/onBigComplete()

A zobacz czy w Rectangle wystepuje wlasciwosc w i h snitch.gif bo nie wydaje mi sie winksmiley.jpg


Co do skalowania to kiedyś udało mi się wykorzystać sprytniejszą technikę
[JAVASCRIPT] pobierz, plaintext
  1.  
  2. var newWidth:Number = 430;
  3. var newHeight:Number = 430;
  4.  
  5. if(target.width > newWidth) target.width = newWidth;
  6. if(target.height > newHeight) target.height = newHeight;
  7.  
  8. target.scaleX = Math.min(target.scaleX,target.scaleY);
  9. target.scaleY = Math.min(target.scaleX,target.scaleY);
  10.  
[JAVASCRIPT] pobierz, plaintext

Metoda ta wynika z tego, że zmiana szerokości elementu spowoduje zmianę parametru scale[x|y] co jest baaardzo wygodne.

Brakuje mi tutaj jednej informacji. Na jakie zdarzenie jest wykonywany kod, który teraz podałeś niżej? Bo rozumiem, że powinno być to zdarzenie na zakończenie załadowania zdjęcia.
230005
Cytat
A zobacz czy w Rectangle wystepuje wlasciwosc w i h snitch.gif bo nie wydaje mi sie


Ok, my mistake - trace wypisało w i h więc logicznym założeniem było to, które poczyniłem. Teraz już wiem, że powinno to być width i height smile.gif.

Co do twojej techniki - no w sumie, to całkiem niezły pomysł smile.gif.

Cytat
rozumiem, że powinno być to zdarzenie na zakończenie załadowania zdjęcia.


I tak jest. Nie wiem czy to coś zmienia, ale ładowanie sobie kolejkuję, czyli wczytuję zdjęcia po kolei w zależności od pewnego kryterium (nazwy w tym wypadku). Najpierw ładowana jest miniaturka, a później odpowiadające jej duże zdjęcia. Hmmm... jeśli ci to jakoś pomoże, to może wrzucić dokładnie całość kodu?

Edit:

Zakomentowałem linie odpowiadające za nadawanie nowych wymiarów zdjęciom i wygląda na to, że teraz wszystkie ramki mają takie same rozmiary. Ale to chyba nie powinno mieć wpływu?
wookieb
Tak wrzuć całość istotnego kodu, ponieważ za wiele więcej powiedzieć nie mogę.
230005
Lepiej dać za dużo, niż za mało więc wrzucam wszystko:

document.as

  1.  
  2. package {
  3. import flash.display.MovieClip;
  4. import flash.display.Loader;
  5. import flash.net.*;
  6. import flash.events.*;
  7. import PolaroidMc;
  8.  
  9. public class Document extends MovieClip {
  10. private var loader:Loader;
  11. private var album:MovieClip;
  12. private var fullPics:MovieClip;
  13. private var tX:int;
  14. private var tY:int;
  15. private var pX:int;
  16. private var pY:int;
  17. private var currNum:int;
  18. private var currentlyLoadedName:String;
  19.  
  20. //zmienne dla ruchu kolistego
  21. private var centerX:int;
  22. private var centerY:int;
  23. private var radius = 50;
  24. private var angleStep = .02;
  25. private var twoPI = 2 * Math.PI;
  26. private var currentAngle = 0;
  27. private var currPhoto:*;
  28. private var prevPhoto:*;
  29.  
  30. public function Document() {
  31. tX = 140;
  32. tY = 60;
  33. pX = 120;
  34. pY = 40;
  35. currNum = 8;
  36. currPhoto = null;
  37. prevPhoto = null;
  38.  
  39. currentlyLoadedName = "woman-"+currNum;
  40. loader = new Loader();
  41. loader.load(new URLRequest("images/woman-"+currNum+"-thumb.jpg"));
  42. loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onThumbComplete);
  43. }
  44.  
  45. private function onBigComplete(e:Event):void {
  46. var angle:Number = (Math.random() * 100) / 6;
  47.  
  48. while (Math.round(angle) > 6) {
  49. angle = (Math.random() * 100) / 6;
  50. }
  51.  
  52. var mc:MovieClip = new PolaroidMc();
  53. mc.addChild(e.target.content);
  54. mc.drawBorder();
  55.  
  56. var iWidth = e.target.content.width;
  57. var iHeight = e.target.content.height;
  58. var newW = 430;
  59. var newH = 430;
  60.  
  61. if(iWidth > iHeight) {
  62. newH = iHeight * (newH / iWidth);
  63. mc.x = tX;
  64. mc.y = tY + 20;
  65. }
  66. else if(iWidth < iHeight) {
  67. newW = iWidth * (newW / iHeight);
  68. mc.x = tX + 100;
  69. mc.y = tY;
  70. }
  71.  
  72. mc.name = currentlyLoadedName;
  73. mc.width = newW;
  74. mc.height = newH;
  75.  
  76. tX -= 10;
  77. tY -= 3;
  78.  
  79. if ((Math.ceil(Math.random() * 100)) % 2 == 0) {
  80. mc.rotation -= angle;
  81. } else {
  82. mc.rotation += angle;
  83. }
  84.  
  85. album_mc.addChild(mc);
  86. currNum--;
  87.  
  88. if(currNum > 0) {
  89. currentlyLoadedName = "woman-"+currNum;
  90. loader = new Loader();
  91. loader.load(new URLRequest("images/woman-"+(currNum)+"-thumb.jpg"));
  92. loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onThumbComplete);
  93. }
  94. }
  95.  
  96. private function onThumbComplete(e:Event):void {
  97. var iWidth = e.target.content.width;
  98. var iHeight = e.target.content.height;
  99. var newW = 165;
  100. var newH = 220;
  101.  
  102. if(iWidth > iHeight)
  103. newH = iHeight * (newH / iWidth);
  104. else if(iWidth < iHeight)
  105. newW = iWidth * (newW / iHeight);
  106.  
  107. var mc_s:MovieClip = new MovieClip();
  108. mc_s.addChild(e.target.content);
  109.  
  110. mc_s.name = currentlyLoadedName;
  111. mc_s.x = pX;
  112. mc_s.y = pY;
  113.  
  114. if(thumbs_mc.numChildren % 3 == 0) {
  115. mc_s.x = pX;
  116. mc_s.y = pY;
  117. pY += 260;
  118. pX = 120;
  119. }
  120. else {
  121. if(iWidth > iHeight)
  122. pX += 180;
  123. else
  124. pX += 150;
  125. }
  126.  
  127. mc_s.width = newW;
  128. mc_s.height = newH;
  129. mc_s.addEventListener(MouseEvent.CLICK, onThumbClick);
  130.  
  131. thumbs_mc.addChild(mc_s);
  132.  
  133. loader = new Loader();
  134. loader.load(new URLRequest("images/woman-"+(currNum)+".jpg"));
  135. loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onBigComplete);
  136. }
  137.  
  138. private function onThumbClick(e:Event):void {
  139. if(currPhoto != album_mc.getChildByName(e.target.name)) {
  140. for(var i:int = 0; i < thumbs_mc.numChildren; ++i)
  141. thumbs_mc.getChildAt(i).removeEventListener(MouseEvent.CLICK, onThumbClick);
  142.  
  143. if(currPhoto == null) {
  144. currPhoto = album_mc.getChildByName(e.target.name);
  145. centerX = currPhoto.x;
  146. centerY = currPhoto.y;
  147. currPhoto.addEventListener(Event.ENTER_FRAME, advanceCircleForwards);
  148. }
  149. else {
  150. currPhoto = album_mc.getChildByName(e.target.name);
  151. centerX = prevPhoto.x;
  152. centerY = prevPhoto.y;
  153. prevPhoto.addEventListener(Event.ENTER_FRAME, advanceCircleBackwards);
  154. }
  155. }
  156. }
  157.  
  158. private function advanceCircleForwards(e:Event):void {
  159. currentAngle += angleStep;
  160. currPhoto.x = (centerX + Math.cos(currentAngle * twoPI) * radius) - radius;
  161. currPhoto.y = centerY + Math.sin(currentAngle * twoPI) * radius;
  162.  
  163. if(currentAngle < .5 && currentAngle > .25)
  164. album_mc.setChildIndex(currPhoto, album_mc.numChildren - 1);
  165.  
  166. if (currentAngle >= .5 ) {
  167. prevPhoto = currPhoto;
  168.  
  169. for(var i:int = 0; i < thumbs_mc.numChildren; ++i)
  170. thumbs_mc.getChildAt(i).addEventListener(MouseEvent.CLICK, onThumbClick);
  171.  
  172. currPhoto.removeEventListener(Event.ENTER_FRAME, advanceCircleForwards);
  173. }
  174. }
  175.  
  176. private function advanceCircleBackwards(e:Event):void {
  177. currentAngle -= angleStep;
  178. prevPhoto.x = (centerX + Math.cos(currentAngle * twoPI) * radius) + radius;
  179. prevPhoto.y = centerY + Math.sin(currentAngle * twoPI) * radius;
  180.  
  181. if (currentAngle <= 0 ) {
  182. centerX = currPhoto.x;
  183. centerY = currPhoto.y;
  184. currentAngle = 0;
  185. prevPhoto.removeEventListener(Event.ENTER_FRAME, advanceCircleBackwards);
  186. currPhoto.addEventListener(Event.ENTER_FRAME, advanceCircleForwards);
  187. }
  188. }
  189. }
  190. }
  191.  


PolaroidMc.as

  1.  
  2. package {
  3. import flash.display.MovieClip;
  4.  
  5. public class PolaroidMc extends MovieClip {
  6. public function PolaroidMc() {
  7.  
  8. }
  9.  
  10. public function drawBorder():void {
  11. var dim = getRect(this);
  12. graphics.lineStyle( 40, 0xCCCCCC );
  13. graphics.drawRect(dim.x, dim.y, dim.width, dim.height);
  14. graphics.endFill();
  15. }
  16. }
  17. }
  18.  
wookieb
Zdziwię Cię ponieważ u mnie jest raczej wszystko ok
http://wookieb.pl/upload/images/1270415943_image.jpg
Moja propozycja to usunięcie bitmapy z twojego polaroida na czas testu.
230005
Nie zdziwiłeś mnie tongue.gif. Mniej więcej tak jak pokazujesz to powinno wyglądać, ale jest jedno ale. Ja do testowania używam 8 zdjęć różnej rozdzielczości i proporcji (część to prawie kwadraty, inne są w stosunku 4:3, 3:4 itp). Generalnie ramka wygląda prawie tak samo dla zdjęć podobnych - czyli np dwa mają w oryginale około 1000 x 700 (tylko przykład) i jest niemalże taka sama, natomiast dla zdjęcia dwukrotnie większego jest prawie niewidoczna (na tym zrzucie nie zobaczysz oryginalnej wielkości zdjęć, więc pierwsze ma rozdzielczość około 2000 x 3000, drugie o jakieś 800 x 1200, trzecie 550 x 800 - mowa o kolejności zdjęć po lewej, nie miniaturek):

http://img12.imageshack.us/img12/4467/flashjf.jpg
wookieb
No to mówimy o kompletnie innej rzeczy smile.gif a tak naprawdę to nie zrozumiałem Cię - przepraszam.
w lineStyle 5 parametr mówi o skalowaniu linii. Ustaw na none i po kłopocie smile.gif
230005
O jaaa biggrin.gif. Wciąż nie mogę się przyzwyczaić, że manual as nie jest taki jak manual php i można po prostu kliknąć w programie, a odpowiednia strona się otworzy i wszystko będzie wiadome smile.gif. Dzięki!
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.