Главная ReadMe F.A.Q. Регистрация Форум




Сколько вам лет?
10-15
15-18
18-22
22-27
27-35
35-40
40-60
Система Orphus
Популярные новости!
» flash уроки: 3D flash карусель от начала до конца
» В помощь флешерам!
» flash урок: Портфолио AS3
» новости: Open Screen Project
» Шаблон сайта Flash template Myflashxml cl1b
Случайные новости!
» Бесплантный хостинг swf файлов? | Где размещать св ...
» flash журнал #1: \"Создание 3D карусели с использо ...
» flash игра: Steppenwolf. Эпизоды 17-20.
» flash игра: Hapland 3 - еще сложнее, еще интересне ...
» статья: Все возможности нового Adobe Flash CS4 Pro ...
» flash конкурс: Создай свою текстовую игру во flash ...
» Дмитрий Гурский. ActionScript 2 - Программирование ...
Архив
Апрель 2009 (8)
Март 2009 (24)
Февраль 2009 (23)
Январь 2009 (14)
Декабрь 2008 (12)
Ноябрь 2008 (8)
Помощь проекту
Нравятся наши flash уроки? Хотите отблагодарить? Сделайте это небольшим денежным переводом.

Система Яndex.Деньги
41001294647528
Система WebMoney
Z107467581647
E243939578295
U315407063311
R241161536729
B419555053375

flash урок: Создание прокручиваемого текстового поля (ActionScript 3.0)

20 февраля 2009
В этом уроке Вы научитесь создавать прокручиваемое текстовое поле используя ActionScript 3.0



Вот что получится:















итак, начнём!



1. Создаём новый документ Flash размера 300x300.



2. Переименовываем единственный слой на "Main". Далее создаём на этом слое текстовое поле(у меня статическое) и вводим необходимый текст (я взял текст с курса лекций по системам автоматического управления:-) ). Спозиционируйте текст в центре рабочего поля. Выделяем текстовое поле и нажимаем F8 для преобразования в мувиклип. В поле Name вписываем имя "Text_mc". В поле Type выбираем MovieClip и точку регистрации ставим в верхнем левом углу.



3. Теперь в поле Instance Name нашего мувиклипа с текстовым полем пишем "txt".



Вот что у вас примерно должно быть:



















 
отсюда видно что текст даже длинее чем рабочая область документа!



3. Потом создаём новый слой выше слоя "Main" и переименовываем его на "scrollBar". Берём инструмент Rectangle(прямоугольник), убираем рамку, и рисуем полосу прокрутки шириной 20 пикселей и высотой 275 пикселей, примерно так:












4. Преобразуем нашу полосу прокрутки в мувиклип(F8). В поле Name вписываем имя "Scroll Bar". В поле Type выбираем MovieClip и точку регистрации ставим в верхнем левом углу:























 
5. Теперь в поле Instance Name нашей полосы прокрутки пишем "scrollBar".







6. Двойным щелчком по полосе прокрутки переходим в область её редактирования. Переименовываем единственный слой - пишем "Scroll Line". Выделяем единственный кадр на этом слое и жмём F8, для преобразования текущего прямоугольника(теперь это линия прокрутки) в мувиклип. В поле Name вписываем имя "Scroll Line". В поле Type выбираем MovieClip и точку регистрации ставим в верхнем левом углу.







7. В поле Instance Name нашей линии прокрутки пишем "scrollLine".







8. Теперь будем создавать ползунок для полосы прокрутки. Мы всё ещё находимся в мувиклипе "Scroll Bar". Создаём новый слой выше текущего и переименовываем его на "Scroller".







9. В слое "Scroller" рисуем прямоугольник без рамки такой же ширины, как и линия прокрутки 20 пикселей, а высота - 30 пикселей:












 







 
10. Не снимая выделения с нового прямоугольника нажимаем F8 и преобразуем его в мувиклип. В поле Name вписываем имя "Scroller". В поле Type выбираем MovieClip и точку регистрации ставим в верхнем левом углу.







11. В поле Instance Name нашего ползунка пишем "scroller".







12. Переходим на главную временную шкалу и создаём новый слой выше слоя "Main" и переименовываем его на "Mask"(в нём будет прямоугольник - маска).







13. Рисуем прямоугольник шириной с мувиклип с текстовым полем, и высотой с полосу прокрутки и нажимаем F8. В поле Name вписываем имя "Mask". В поле Type выбираем MovieClip и точку регистрации ставим в верхнем левом углу:











 










14. В поле Instance Name нашего ползунка пишем "masker".







15. Создаём новый слой выше всех и называем его "Actions"(в нём будем писать код).







16. Нажимаем на первый кадр слоя "Actions" и нажимаем F9, для перехода на панель Actions и пишем код. Вот код:











//сразу маскируем мувиклип с текстовым полем



//txt - мувиклип с текстовым полем



//masker - маска



txt.mask = masker;







//создаём прямоугольную область прокрутки в мувиклипе с текстовым полем(txt)



txt.scrollRect = new Rectangle(0,0,txt.width,txt.height);







//кешируем мувиклипе с текстовым полем(txt)



txt.cacheAsBitmap = true;







//устанавливаем наш ползунок в положение 0 по Y - самый верх



//scrollBar - полоса прокрутки(в ней находятся: линия прокрутки и ползунок)



//scrollBar.scroller - ползунок



scrollBar.scroller.y = 0;







//слушаем событие нажатия мышкой на ползунок и вызываем функцию 'downHandler'



scrollBar.scroller.addEventListener(MouseEvent.MOUSE_DOWN, downHandler);







//слушаем событие отпускания мышки над ползунком и вызываем функцию 'upHandler'



scrollBar.scroller.addEventListener(MouseEvent.MOUSE_UP, upHandler);







//слушаем событие уведения мышки с ползунка и вызываем функцию 'outHandler'



scrollBar.scroller.addEventListener(MouseEvent.MOUSE_OUT, outHandler);







//функция вызывается при нажатии мышкой на ползунок



function downHandler(event:MouseEvent){







//слушаем событие движения мышки над ползунком и вызываем функцию 'moveHandler'



//event.currentTarget - в данном случае ползунок(передаётся через параметр)



event.currentTarget.addEventListener(MouseEvent.MOUSE_MOVE, moveHandler);







//создаём область перетаскивания ползунка внутри полосы прокрутки



var dragRect:Rectangle = new Rectangle(0,0,0,scrollBar.scrollLine.height-scrollBar.scroller.height);







//начинаем перетаскивание по заданной области



event.currentTarget.startDrag(false,dragRect);



}







//------------







// функция вызывается при отпускании мышки над ползунком



function upHandler(event:MouseEvent){







//при отпускании мышки над ползунком удаляем слушатель события движения мышки



event.currentTarget.removeEventListener(MouseEvent.MOUSE_MOVE, moveHandler);







//прекращаем перетаскивание



event.currentTarget.stopDrag();



}







//------------







//функция вызывается при уведении мышки с ползунка



function outHandler(event:MouseEvent){







//при уведении мышки с ползунка удаляем слушатель события движения мышки



event.currentTarget.removeEventListener(MouseEvent.MOUSE_MOVE, moveHandler);







//прекращаем перетаскивание



event.currentTarget.stopDrag();



}







//------------







//функция вызывается при движении мышки над ползунком если на него нажали



function moveHandler(event:MouseEvent){







//передаём в новый объект Rectangle результаты прокрутки



var rect:Rectangle = txt.scrollRect;







//вычисляем процент прокрутки относительно передвижения ползунка



var percent:Number = event.currentTarget.y/(scrollBar.scrollLine.height-event.currentTarget.height)*(rect.height-masker.height);







//записываем вычисленный процент в объект Rectangle



rect.y = percent;







//применяем новые координаты для прокрутки



txt.scrollRect = rect;



}







//------------











Вот и всё! Протестируйте ролик!







Исходник: prokruchivaemyjj-tekst.rar [9.59 Kb] (cкачиваний: 158)







Автор: SarGun







Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

Другие новости по теме:

  • flash урок: Random Boxes Text Effect with Actionscript 3
  • flash урок: Портфолио AS3
  • flash уроки: Сохраняем картинку из Flash посредством PHP (ActionScript 3)
  • Обучение к программе: Selteco Alligator Flash Designer. Урок 10: Кнопки для ...
  • Обучение к программе: Selteco Alligator Flash Designer. Урок 7: Создание ан ...



  •  (голосов: 4)
    SarGun | Просмотров:1550 | Напечатать
    #1 написал: Medved (20 февраля 2009 20:38)


    Группа: Посетители
    Регистрация: 17.12.2008
    Комментариев: 1
    Публикаций: 0
    Россия, Таганрог
    Огромное спасибо што выложили этот урок, то что мне надо!!!!!!!
    ICQ: 473251869
    #2 написал: Fly (21 февраля 2009 00:58)


    Группа: Администраторы
    Регистрация: 21.07.2008
    Комментариев: 127
    Публикаций: 37
    Республика Беларусь, Минск
    Хороший урок, выражаю свою и от администрации благодарность respekt


    --------------------
    1) Админ всегда прав
    2) Если админ не прав, смотри пункт 1
    ICQ: 207886769
    #3 написал: SarGun (21 февраля 2009 05:35)


    Группа: Модератор форума
    Регистрация: 10.12.2008
    Комментариев: 16
    Публикаций: 7
    Украина, Киев
    та незашто!!! всегда рад помочь!!! )


    --------------------
    Полезней разобраться самому, чем узнать от кого-то!))
    ICQ: 420260217
    #4 написал: ExeJem (22 февраля 2009 16:34)


    Группа: Посетители
    Регистрация: 21.02.2009
    Комментариев: 2
    Публикаций: 0
    Россия, Санкт-Петербург
    отличный урок, побольше бы таких goodgood


    --------------------
    я только начинаю учиться
    ICQ: 329955591
    #5 написал: Fly (22 февраля 2009 17:02)


    Группа: Администраторы
    Регистрация: 21.07.2008
    Комментариев: 127
    Публикаций: 37
    Республика Беларусь, Минск
    Цитата: stlay
    отличный урок, побольше бы таких goodgood

    Подписывайтесь на рассылку, там в формате видео очень много хороших уроков :)


    --------------------
    1) Админ всегда прав
    2) Если админ не прав, смотри пункт 1
    ICQ: 207886769
    #6 написал: DNS (20 марта 2009 13:23)


    Группа: Посетители
    Регистрация: 12.02.2009
    Комментариев: 1
    Публикаций: 0
    Россия, Москва
    Урок отличный! Вот только еще бы дописать AS для движения скроллера при прокрутки мышью....я думаю тогда урок был бы полноценнее.
    ICQ: --
    #7 написал: Tafari (10 апреля 2009 19:51)


    Группа: Посетители
    Регистрация: 1.04.2009
    Комментариев: 2
    Публикаций: 0
    Россия, Санкт-Петербург
    А как насчет загружаемого текста ну например их xml или txt? что там по поводу скролла?
    ICQ: --
    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии в данной новости.
    Видео Журнал "Легко о Flash" - подписавшись на него вы будете один раз в месяц получать его выпуск на свой почтовый ящик, там вы найдете новые видео уроки по работе в программе Adobe Flash CS4.

    Ваш e-mail:

    Ваше имя на русском:
    политика антиспама
    подпишитесь сейчас и получите доступ ко всем выпущенным журналам
    Логин
    Пароль
     


    Требуется для просмотраFlash Player 9 или выше.



    Rambler's Top100 Рейтинг@Mail.ru Rating All.BY Каталог SiteCreation rate your site
    links
    Internet Map page counter