Компонент SCROLLPANE и все его особенности
RATFACE
И так что же вас ждет в етом уроке!
В етом уроке я расскажу о том как пользоваться этим компонентом, его осбонности, ньюансы и их решения а также проблемы которые нельзя решить!
Для тех кто вообще не знает как использовать етот чудесный, на мой взгляд, компонент я начну рассказывать прямо сейчас. А те кто уже знает промотайте ниже! -)
И так! Поехали!
Как обычно создаете обычный документ с обычным размером 550х400 больше вам для тест странички не понадобиться. Кидаете на него ScrollPane копмонент, растените его в ширену или ввысоту, как вам удобно, до нужного вам размера. В моем уроке я растену компонент скажем до 300 в ширену (width) и назовем его cmpImageScroller к примеру, а всякие название начинающиеся на myТРАТАТА уже надоели.
Создаете MovieClip ааабсолютно пустой, называет его mcScrollContent и помещаете его в библиотеку :-) там ему место. Клацаете на него правой кнопкой и выбираете Linkage вам откроеться окошко с параметрами. Клацаете на белом квадратеке на против которого написано Export for ActionScript после чего для вас разблокируються два поля ввода. В поле Identifier напиши имя вашего MovieClip'a в библиотеки, скажем назовите "imageScrollerContent". Он будет контейнером всего, что вы! будете грузить в ScrollPane.
Итак в нашем фрэйме де вы собрались писать скрипт начинаем ПРОГРАМИРОВАТЬ!
Пишите следующие
cmpImageScroller.contentPath = "imageScrollerContent";
Что же етой срокой мы сделали!? Мы задали нашему ScrollPane'y контейнер в нутри которого мы будим размещать картинки или .swf або то что вам нужно!
Так мы ето зделали а вот что делает Flash!? А он делает следующее - он производит attachMovie используя LinkageName которое вы даете ему в contentPath тоесть imageScrollerContent. Даёт ему определеное конкретное имя и глубину. Теперь как нам обратиться в етому контейнеру!? Наш контейнер в ScrollPane'e называеться spContentHolder ето значит что теперь все что мы хотим загрузить в ScrollPane мы грузим в наш контейнер по пути cmpImageScroller.spContentHolder !
Теперь для теста создайте MovieClip и нарисуйте в нем квадрат скажем 80х80. Теперь надо провести одну хитрость. Компонент ScrollPane владеет рядом недостатков которые приходиться решать с помощью небольших хитростей.
Если вы хотите что бы между вашими картинками была дистанция у нас не получиться получить её с помощью скрипта скажем увеличив координату на ту величину на которую нам нада. Если мы так сделаем то все будет ок, НО! Последния картинка будет не просто плотно прилегать к краю ScrollPane но и кусок картинки может уйти за пределы видимости! Поетому мы прибегним к следущему методу! Мы создадим еще один MovieClip с именем скажем mcShadow, помести его с правой стороны нашей картинки (кубика) высота етого клипа должна быть равна высоте картинки или высоте максимального размера картинки а ширина етого клипа как раз и будит то самое расстояние между картинками. И еще одна очень важная деталь. В настройках MovieClip'a (Properties) выставить сolor в alpha и установить значение в 0! Он станет невидимым собсна что нам и нада! -)
И так все что нам нада мы подготовили а дальше в фрэйм де у вас написано совсем чуть скрипта, скопируйте и вставьте то что написано ниже там все с коментам !!!
Только после копирования на торопитесь запускать. Изза плохого пространства для вписывания уроков на Flasher.ru комменты могу чуть сползать. Просто посмотрите скрипт и поправьте строки!
stop() //*********************************************** // initialize variables //*********************************************** //стартовая позиция картинок по X var startImageX:Number = 10; //стартовая позиция картинок по Y var startImageY:Number = 10; //дистанция между картинками var imageShift:Number = 0; //текущая координата картинки var currImageX:Number = 10;
//создаем контейнер в ScrollPane'e cmpImageScroller.contentPath = "imageScrollerContent";
//вставляем в компонент 5 картинок в моем случае одних и тех же for(var i=0;i<5;i++) { //добовляем картинку из библиотеки cmpImageScroller.spContentHolder.attachMovie("image", "image"+i, i); //оптимизируем скрипт создавая переменную image передавая ей ссылку на нашу картинку var image:MovieClip = cmpImageScroller.spContentHolder["image"+i]; //выставляем координаты токо что созданной картинки image._x = startImageX; image._y = startImageY; //выщитываем новую координату для следующей картинки startImageX += image._width + imageShift;
}
И так вы должны получить ScrollPane с вашими картинка. Ели не работает вы всегда можете качнуть мой исходник с етой темо и посмотреть как все оно там =)
А ТЕПЕРЬ НЕКОТОРЫЕ ОСОБЕННОСТИ!!!!
Можно сказать так что одну из особенностей мы уже прошли выше! Ето момент с расстоянием между картинками.
Есть еще один момент. Проработав урок который описан выше вы естественно заметите что добовляяя картинки у компонента автоматичестки появляеться Scroll. ScrollPane устроен так что его Scroll формируеться один раз и не в тот момент когда вы в него что то загружаете!!! А в тот когда запускаете свою ФЛЭШКУ! Если вы захотите запустить флэшку и при нажатии на, скажем кнопку, загрузить в ScrollPane свои картинки то картинки загрузяться а вот Scroll не появиться! -(( ТУПО!? ДА! Я тож так считаю -)) Но что поделать. Хотя НЕТ! ВРУ! Поделать есть что можно внести пару изменений в компонент Macromedi'u а вот как ето я вам потом расскажу! На етом все спасибо за ВНИМАНИЕ! -)
Страница сайта http://silicontaiga.ru
Оригинал находится по адресу http://silicontaiga.ru/home.asp?artId=6127
|