Action Script тілінде бағдарламалау

Батырманы бағдарламалау

1 Алдымен батырманың суретін саламыз

1. Осы батырмаға маустың оң батырмасын басып панелін шақырамыз

1. Осы терезеде бағдарлама коды теріледі.

} On (relase)

{

GotoAndPlay(2);

2. Екінші кадрды белгілеп Ғ6 батырмачсын басады.

3. Action терезесінде келесі код теріледі

On (relase)

{

GotoAndPlay(1);

}

6 Бірінші және екінші кадрға Action панелін шақырып Stop коммандасын орнатады.

14-лекция. Баннер құру.

1. Баннер құрудың негізгі принциптері.

2. Баннерде анимациялау.

3. Мәтіндік анимация.

4. Кадрлық анимация.

5. Таймер. Motion Tween қозғалысы.

Недавно мне пришлось столкнуться с задачей создания flash-ролика на сайт. Он должен был быть абсолютно примитивным – смена нескольких картинок с определенным эффектом. Возможно, это реально выполнить и с помощью gif анимации, созданием которой я уже интересовался на минимально-базовом уровне. Но не хотелось тратить на это много времени, вникать в какой-то сложный пакет от Marcomedia или копаться в тонкостях gif анимации, а найти простую программку для создания элементарных flash-роликов.

Остановил выбор на программе Flash Banner Creator. Во-первых, она максимально проста в использовании, во-вторых, обладает достаточным функционалом, и, наконец, в-третьих, полностью подходит для выполнения задачи создания простой (а может и не очень простой) flash анимации. Итак, рассмотрим процесс создания примитивного ролика.

Окно программы разбито как бы на 3 основных раздела, представляющие, по сути, шаги при создании «флэшки»: 1. загрузка фотографии, 2. выбор «темы» и 3. непосредственно создание анимации.

Выбираем пункт Photo. Нам необходимо найти или создать несколько изображений, которые будут использоваться в будущем ролике. Чтобы загрузить их в программу можно воспользоваться специально кнопкой Add либо просто «перетащить» в окно программы. Изображения можно менять местами, удалять, поворачивать.

Отдельно следует заметить кнопочку Edit, которая становится активной при выборе фотографии. Нажатие на нее вызывает всплывающее окно с настройками для той или иной фотки. Дело в том, что по умолчанию в поле URL прописывается ссылка на официальный сайт, и при клике на flash-ролик пользователь будет направлен туда. В общем, ссылку желательно убрать. Насколько я понял, в демо версии программы идет какая-то проверка по этим ссылкам, то есть для нормальной работу нужен кряк.

В этих же свойствах можно добавить текст и элемент КлипАрта на изображение (см. закладки Text и ArtClip). Немаловажными пунктами в окне настроек есть Transition Effect, где выбирается тип преобразования для данного кадра, и Transition Duration с Show Duration – время преобразования (действия эффекта) и просто отображения картинки. Здесь можно выставить как конкретные значения, так и выбрать опцию «по-умолчанию» (default).

Во второй закладке Theme мы задаем способ отображения flash анимации. Здесь можно выбрать множество видов отображения – начиная показом только фотографий и заканчивая целыми фотоальбомами на flash! Выбор действительно потрясающий.

На этой странице помимо выбора «темы», мы должны задать еще несколько параметров для нашей флэшки.

Это название альбома (Album title) ширину и высоту изображения (width, height), цвет фона (Background color), частоту кадров (Frame rate), а также время преобразования и отображения отдельной фотографии. Судя по всему, если вы для картинок на предыдущем этапе установили знания default, то временные значения будут браться из этих настроек. В этой же части окна есть кнопочка с дополнительными опциями – «More Options». Открываем и видим еще один «подарочек» от разработчиков:

Самым первым полем идет ссылка для всех картинок флэшки. Не забудьте ее убрать либо настроить, так как вам нужно. Дальше можно выбрать параметр для ссылки – открываться в отдельном окне либо в том же, а также указать еще несколько опций для flash-ролика.

Возвращаемся в закладку Theme. В центральном блоке этого окна кроме выбора темы есть выпадающее меню Decorate the photo with. Здесь можно выбрать определенные эффекты для изображений, например, падающие листья или снежинки.

В самом низу данного раздела «Темы» есть возможность добавить музыки в ваш ролик, достаточно загрузить файл с помощью кнопочки Add.

После всех сложных (и не очень) настроек переходим к последней закладке – Publish. Здесь все предельно просто – можно сохранить только что созданный ролик в Flash формате (при этом создается еще файл *.html для просмотра) либо записать ролик-презентацию на диск! Последняя опция достаточно интересная, так как в темах есть несколько вариантов с достойными фотоальбомами – весьма неплохая комбинация стильного оформления любимых фоток с музыкальным сопровождением. К сожалению, разбираться с этим всем не было времени, но на первый взгляд там все должно быть просто.

Итак, чтобы создать вашу Flash анимацию достаточно нажать Publish now. После чего программа сразу предложит ее просмотреть. Очень удобно:)

Радует, что для внесения каких-то изменений или исправлений достаточно перейти на один из предыдущих пунктов и сделать эти правки несколькими кликами мышки, не нужно рыться в слоях, многочисленных настройках и опциях. Сделали изменения – вернулись и снова нажали «Publish now» – удобно и быстро. И для всего этого абсолютно не обязательно знать тонкости и особенности Flash.

Если вам действительно понравиться программа, то купить ее можно на официальном сайте (стоимость всего лишь $29.95) или найти на просторах интернета.

Кадырлық анимация. Мұнда қолданушы фильмнің әрбір кадрын өзі жасайды. 1 кадрдың алдыңғыдан айырмашылығы аз болған сайын 1 кадрдан екіншіге өту жатықтығы және персонаж қозғалысының табиғилығы жүзеге асады. Әрбір кадрлық фильм жасауда келесі кадрға кілттік кадр (Key Frame) қойылады. Нәтижеде соңғы кадр жаңа жерге көшіріледі. Сонан соң көшірілген объекті өзгертіледі. Уақыт диаграммасында кілттік кадр ішінде қара нүктесі бар сұр тіктөртбұрышпен бейнеленеді.

Автоматты анимация (Tweened-анимациясы). Мұнда қолданушы фильмнің бірінші және соңғы кадрын ғана жасайды, ал барлық аралық кадрларды Flash автоматты түрде жасайды.

Сценарий негізіндегі анимация. Flash-тің Action Script программалау тілі негізінде жасалған анимация.

15-лекция. Сайтта интро-роликтер құру.

1. Интро-роликтер құрудың негізгі прнциптері.

2. Растрлық бейнеден векторлық картаға өту.

3. Onion Skip көмегімен тестілеу.

4. Skip Intro-бастапқы бетке өтуді ұйымдастыру.

5. Сайтты жоспарлау. HTML-бетке SWF-роликтерін орналастыру.

Когда мы попадаем на главную страницу сайта, то зачастую нам демонстрируют небольшой анимационный ролик-заставку, а иногда и целый мультфильм. Все это великолепие стало возможным благодаря Flash. На этом уроке мы с вами создадим анимационную заставку, или intro-ролик, для сайта фирмы «Конэкс», занимающейся разнообразными грузоперевозками.

Сначала было слово. Пишем сценарий

В этом случае к условиям, предъявляемым к баннерам (см. «Мир ПК», № 11/04, с. 121), добавляется следующее: клип должен быть предельно коротким и содержать ссылки на основные страницы сайта.

Первым делом надо определить общую концепцию, т.е. сюжет ролика. Давайте составим себе техническое задание. Поскольку «Конэкс» занимается международными грузоперевозками, то действие разворачивается на фоне карты земного шара.

Составляем текстовые блоки — слоганы:

Люди мечтали преодолеть пространство и время,

У нас это получилось,

«Конэкс» — название самой компании,

Компания независимых экспедиторов.

Ссылки на основные страницы будут следующие:

О нас,

Новости,

Перевозки,

Таможенные декларации.

А также ссылка на главную страницу сайта и на информацию о четырех основных типах перевозок (авто, авиа, железнодорожные, морские), представленная четырьмя картинками, которые будут превращаться из черно-белых в цветные при наведении курсора мыши.

На прилагаемом к журналу диске имеются исходник и swf-файл этого урока. Откройте файл konex.swf, и вы поймете, что нам предстоит сделать.

Итак, за работу

Компактность клипа — одно из главных условий. Я предлагаю вам довольно эффективный прием, позволяющий существенно уменьшить объем клипа. Он основан на том, что изначально клип делается в 1,5—2 раза меньше, чем требуется, а потом попросту растягивается в браузере. Так как в основе Flash-анимации лежит векторная графика, то такое расширение происходит без потери качества. Следует соблюдать осторожность при увеличении растровых импортированных изображений. Но и тут нет ничего страшного, поскольку если оптимизировать рисунки с помощью, например, средств Adobe Photoshop, то удастся добиться золотой середины между качеством изображения и занимаемым им объемом в байтах (или в килобайтах).

Настраиваем параметры клипа: в Document Properties (Свойства документа) задаем фон. Остановимся на сером нейтральном фоне — #9B9B9B. Задаем ширину и высоту клипа, для чего вводим значения 400 и 300 пикселов соответственно. Потом мы растянем клип, увеличив его «площадь» в 2 раза — 800x600 пикселов. Но это позже.

Динамичная карта. Импорт объектов

Сайтты жоспарлау. HTML-бетке SWF-роликтерін орналастыру

Қазақ тілінде веб сайт құру үшін не істеу керек?

1. Веб хостинг тандайміз.

Хостинг ақылы немесе тегін болуы мүмкін.

2. Сайтқа домен атын таңдаймыз.

Мысалы dom.kz, referat.kz, sayram.kz/atoi

3. Компьютерде қазақ тілінің драйверлері туруы керек.

Драйверды мына сілтеме арқылы жүктеп алуға болады.

4. Веб парақтарды қүратын программалардан пайдаланамыз.

Web Page Maker

Microsoft Frontpage

Webbuilder

Homesite

Macromedia Dreamweaver тағы басқалар

Web Page Maker программасын мына сілтеме арқылы жүктеп алыға болады.

5. Web парақтар дайын болған соң, олардағы қазақ әріптерін кодировкасын жасау керек. Ол үшін Kazfont программасынан пайдалануға болады. Kazfont программасын мына сілтеме арқылы жүктеп алыға болады.

6. Дайын болған Web парақтарды серверге жүктеу үшін filezilla программасынан пайдалануға болады. Filezilla программасын мына сілтеме арқылы жүктеп алыға болады.

HTML тілі элементтері. Веб-сайт құру жолдары.

Web-беттің негізгі қызметі – қажетті ақпаратты іздеу, жинастыру және оны экранға шығаруды ұйымдастыру. Web-беттер түрінде дайындалып сақталған электрондық құжаттарға – мәліметтер, графиктер, фотосуреттер жатады. Электрондық құжаттың қарапайым құжаттан айырмашылығы – оның жазылу форматында. Интернетте электрондық құжат құру үшін HTML арнайы тілі пайдаланылады және олар HTML форматында сақталады.

HTML (HyperText Markup Language-гипермәтіндік белгілеу тілі) – қатаң ережелері бар компьютерлік тіл. HTML тілінде құжаттың авторы өз мәтінін тегтер деп аталатын символдар көмегімен арнайы файлға – Web-бетке айналдырады. Web-беттің мазмұны әртүрлі болуы мүмкін, бірақ барлығы да арнаулы HTML тілінде жазылғандықтан бұл құжаттардың кеңейтілмесі .htm немесе .html болып келеді.

HTML тіліндегі құжат – құжаттың негізгі мәтінінен және тегтерден тұрады. Бұл файлды құру үшін қарапайым мәтіндік редактор Блокнотты қолдансақ та болады.

Барлық тегтер «кіші» () символынан басталады да «үлкен» () символымен аяқталады. Бұл символдар жұбын бұрыштық жақшалар деп те атайды. Ашылған бұрыштық символдан кейін тегті анықтайтын өзекті сөздер орналасады. HTML тілінің тегтері құжаттың арнаулы бөлігіне ғана, мысалы, абзацқа ғана әсер етеді. Сондықтан да ашылатын және жабылатын – жұп тегтер қолданылады. Ашылатын тег құжаттың бөлігіне қандай да бір әсер береді, ал жабылатын тег осы әсерді доғарады. Жабылатын тегтер – «/» - символымен басталады.

HTML құжатының құрылымы:

1)барлық құжат <HTML> тегімен басталады да, </HTML> сәйкес тегімен аяқталады. Бұл тегтер жұбы – броузерге HTML құжаты екендігін хабарлайды;

2)HTML құжаты тақырыптар бөлімінен және құжаттың денесінен тұрады. Тақырыптар бөлімі <HEAD> және </HEAD> - тегтерінен тұрады, мұнда құжат туралы мәлімет көрстеіледі;

3)<TITLE> және </TITLE> тегтері тақырыптар бөлімінің ішінде орналасады және мұнда құжаттың арнайы тақырыбы орналасады;

4)Негізгі мәтін құжаттың денесінде көрсетіледі және ол <BODY>, </BODY> тегтерінің аралығында орналасады.

Осы төрт тег – HTML құжатының негізгі құрылымын білдіреді және бұл тегтер HTML тіліндегі барлық құжатта міндетті түрде көрсетіледі.

Мысалы:

1)Блокнот программасын жүктеңіз;

2)Шыққан сұхбаттық терезеде мына қатарларды теріңіз (1-сурет):

<HTML>

<HEAD>

<TITLE> Моя первая Web – страница </TITLE>

<HEAD>

<BODY>

Это – моя первая Web-страница

</BODY>

</HTML>

1-сурет. Блокнот программасының терезесі.

3)құрылған құжатты сақтаңыз (файл аты көрсетілетін қатарда 1.htm деп жазамыз) (2-сурет);

2-сурет. Құжатты сақтау терезесі.

4)сақталған файлды Internet Explorer броузерінің көмегімен ашатын болсақ 3-суреттегідей сұхбаттық терезе ашылады.

3-сурет. Internet Explorer броузерінің көмегімен ашылған Web-құжат.

5)HTML тілінде құжаттың ішкі тақырыбын алты түрлі тәсілмен беруге болады және олар <H1>, </H1>, <H6>, </H6> тегтерінің көмегімен жазылады;

6)<P> , </P> тегтері абзацтың басы және соңы екендігін білдіреді;

7)<HR> - тегі көлденең сызық сызады және ол парсыз тег болып табылады;

8)<BR /> - қатардың аяқталуы. Келесі қатар жаңа азат жолдан басталады;

9)<I>, </I> - мәтін курсивпен жазылады;

10)<STRONG>, </STRONG> немесе <B>, </B> - жартылай қалыңдатыла жазылған шрифт;

11)<SUB>, </SUB> - төменгі индекс;

12)<SUP>, </SUP> - жоғарғы индекс;

13)егер абзацсыз жаңа қатарға өту қажет болса <BR> тегі қолданылады;

14)<A HREF= “...”>, </A> тегтері гиперсілтеме орнату үшін қажет. Гиперсілтеме орнату барысында сілтеме жасалатын URL адрес көрсетіледі. Егер сілтеме көрсетілген құжат басқа Web-бетте болса, атрибуттағы тырнақша ішінде міндетті түрде құжаттың URL адресі толық көрсетілуі керек. Мұндай сілтеме сыртқы сілтеме деп аталады.

Егер сілтеме осы құжаттың басқа бетінде болса, бұл кезде сілтеме ішкі сілтеме құрылады;

15)Гипермәтіндік сілтемелер бет ішінде арнаулы орынды да көрсетеді. Ол үшін алдын-ала якорь енгізу керек. Бұл кезде <A NAME= «...» ID= “…”>, </A> тегтері қолданылады. Берілген якорға сілтеме жасау үшін URL адрестің соңында якордың атын құжат атынан «#» символы арқылы ажырата отырып көрсету керек.

Мысалы: Блокнот терезесінде сілтемелерді қолданып мына қатарларды терейік (4-сурет):

4-сурет. Сілтемені қолдану терезесі.

Ал осы терезені электрондық құжат ретінде ашайық (5-сурет):

5-сурет.Internet Explorer броузерінің көмегімен файлды ашу.

16)<DL>, </DL> - көпсатылы тізім құратын дескриптор;

17)<LI>, </LI> - тізім элементі. Бұл дескриптор <ol> және <ul> дескрипторларының аралығында жүреді;

18)<dt>, </dt> - бірінші деңгейлік тізім элементі және бұл <dl> дескрипторының аралығында жүреді;

19)<dd>, </dd> - екінші деңгейлік тізім элементі және бұл <dl> дескрипторының аралығында жүреді;

20)<ol>, </ol> - нөмірленген (ретке келтірілген) тізім;

21)<ul>, </ul> - маркіленген тізім:

Мысалы:

6-сурет. Тізім құру қатары.

7-сурет. Тізім құрылған файлды Internet Explorer

броузерінің көмегімен ашу.

22)HTML де кесте құру <table>, </table> - дескрипторларының көмегімен орындалады. Кесте ішіндегі мәлімет арнаулы тегтер көмегімен белгіленеді (тақырыбы, қатар және ұяшықтар саны). Осы тегтер арасында бір рет қана <CAPTION>, </CAPTION> – кестенің тақырыбын білдіретін тегтер кездесуі мүмкін;

23)<td>, </td> - қатардағы ұяшық мәндерін анықтайтын дескриптор;

24)<th>, </th> - кестедегі баған мен қатар тақырыптарын анықтайтын дескриптор;

25)<tr>, </tr> - кестенің қатар санын анықтайтын дескриптор (<td>-бірнеше ұяшықты) , (<th>-кестенің тақырыбын білдіреді).

Мысалы: Үш қатар және екі бағаннан тұратын HTML кестесін тұрғызу кодын қарастырайық (8-сурет):

8-сурет. Үш қатар және екі бағаннан тұратын HTML кестесі.

26)HTML-кестесінің стилін өзгертетін атрибуттар тізімі:

Атрибуттар	Үнсіздік бойынша	Қолданылуы	Мағынасы
align	left	Кестенің барлық дескрипторларына қолданылады	Ұяшық ішіндегі мәліметті көлденең туралау. Мүмкін мәндері: Left, right, center және char (арнаулы символ бойынша туралау)
bdcolor		Кестенің барлық дескрипторларына қолданылады	Кесте фонының түсін білдіреді
border	0	<table>	Пиксел бойынша кесте шекарасы
cellpadding	0	<td>, <th>	Ұяшықтағы мән мен шекара арасындағы ара қашықтық
Cellspace	0	<td>, <th>	Пиксел бойынша ұяшықтар ара қашықтығы
colspan	1	<td>, <th>	Бір бағанға біріктірілетін бағандар саны
rowspan	1	<td>, <th>	Бір қатарға біріктірілетін қатарлар саны
rules	none	<table>	Кесте ұяшықтары арасындағы сызықтар. Мүмкін мәндері: rows, cols және all
valign	center	<tr>, <td>, <th>	Ұяшық ішіндегі мәнді тік бағытта туралау. Мүмкін мәндері: top, bottom және baseline
width	Бет ені бойынша	Кестенің барлық дескрипторларына қолданылады	Анықталған ұяшықтар немесе кесте ені (бет еніне байланысты пикселмен немесе пайызбен беріледі)

Осы атрибуттарды қолдана отырып 8-суреттегі кестені өзгертетін болсақ төмендегі 9-суреттегідей өзгерістер орындалады::

9-сурет. Атрибуттары өзгертілген кесте.

Егер кесте құру барысында қатарларды немесе бағаналарды біріктіретін болсақ, онда rowspan және colspan атрибуттарын қолданамыз. Осы екі атрибутты қолдана отырып 10-суреттегідей кесте алуымызға болады:

10-сурет. Rowspan және Colspan атрибуттарын

қолданғаннан кейінгі күрделі кесте.

HTML тілін қолдана отырып төмендегі іс-әрекеттерді орындауға болады:

1)тақырып көрінісін әр түрлі деңгейлерде көрсету және экранда тақырыптарды өз қалауымызша орналастыруға;

2)мәтінді абзацтарға бөлуге;

3)мәтінде басқа Web-құжатқа немесе осы құжаттың басқа бөлімдеріне гиперсілтеме құруға;

4)мәтінге суреттер, алтернативті суреттер кірістіруге;

5)шрифтің түрін, түсін және гарнитурасын өзгертуге;

6)берілген мәтінде қажетті белгілеулер орнатуға;

7)әр түрлі деңгейдегі тізімдер құруға;

8)кестелер, күрделі кестелер құруға;

9)бірнеше құжатты бір Web-бетті орналастыруға;

10)мәтінге мультимедиялық объектіні кірістіруге және т,б, әрекеттерді орындауға болады.

Web-құжатты ұйымдастыру – бұл қолданушынының талабын, мүмкіндігін және іс-тәжірибе деңгейін анықтайтын шығармашылық еңбек.

HTML-бетке SWF-роликтерін орналастыру

HTML-бетке SWF-роликтерін орналастыру үшін төмендегі әрекеттерді орындаймыз

1. Adobe Flash бағдарламасында Flash-ролик жаратамыз.

2. Сохраните созданный Flash-ролик, используя пункт Export Movie (File->Export->Export Movie) в той же папке, где хранятся HTML-страницы вашего сайта и назовите ролик, к примеру, demomovie.swf.

3. Откройте HTML-страницу, в которую вы хотите вставить Flash-ролик.

4. Добавьте в код HTML-страницы следующий код:

<object width="550" height="400">

<param name="movie" value="demomovie.swf">

<embed src="demomovie.swf" width="550" height="400">

</embed>

</object>

5. Сохраните изменения.

Попробуйте открыть HTML-страницу, в которую вы вставили SWF файл и вы увидите в ней Flash-ролик.