Adobe Flash CS6 видео уроки

Adobe Flash
Автор темы, Ефрейтор
Ефрейтор
Аватара
Adobe Flash
Автор темы, Ефрейтор
Ефрейтор
Сообщения: 17
Зарегистрирован: 9 апреля 2013
С нами: 10 лет 11 месяцев

#1 Adobe Flash » 3 ноября 2015, 11:28

Уроки постоянно добавляются

Анимация

1. Временная шкала | 3:11
Adobe_Flash_CS4_временная_шкала.mp4 (3.5 МБ) 826 просмотров
:tuta: - полноэкранный режим

Как работает анимация?


Прежде, чем рассказать, как создавать сайт на флэш, нужно сначала освоить и понять принципы работы в программе Adobe® Flash® CS4. Сначала рассмотрим принципы создания анимации во флэш, затем рассмотрим ActionScript® 3.0, а уж потом рассмотрим создание простого Flash сайта.

Чтобы понять, как работает анимация, нужно понять, как работает временная шкала, которая содержит слои. Эти слои можно создавать, удалять, объединять в группы и перемещать их относительно друг друга. Также Вы видите, что линия времени состоит из последовательности кадров, по которым можно перемещаться, передвигая маленький вертикальный прямоугольник красного цвета, расположенный над слоями.

Данный прямоугольник является воспроизводящей головкой, перемещая которую, Вы можете перемещаться по своей анимации. Временная шкала – это последовательность пронумерованных кадров. У каждого кадра есть порядковый номер, который проставлен над каждым пятым кадром.

Если воспроизводящая головка находится на непронумерованном кадре и нужно узнать номер текущего кадра, то можно, либо просчитать его самостоятельно по отрезкам временной шкалы, либо проверить текущий кадр в нижней части временной шкалы. Здесь же можно быстро перейти к нужному кадру, изменив значение на искомый номер кадра.

Просмотреть результат созданной анимации можно при нажатии горячих клавиш CTRL + ENTER или, воспользовавшись верхним меню – управление – тестировать ролик.

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

Анимация – это набор статических кадров, в каждом из которых объект занимает другое положение. И когда Вы перемещаете воспроизводящую головку с, достаточно большой скоростью, Вы получаете иллюзию анимации, хотя на самом же деле, анимации никакой нет. Следует отметить еще и скорость перемещения воспроизводящей головки по кадрам. По умолчанию, данная скорость равна 24-рём кадрам в секунду. Скорость показывается в нижней части временной шкалы. Текущую скорость можно в любой момент изменить, достаточно лишь ввести нужное значение в ячейку.

Данная скорость означает, сколько кадров показывается за одну секунду времени. Чуть правее от значения скорости в нижней части временной шкалы отображается текущий промежуток времени. В нижней части линии времени расположены и другие иконки, облегчающие работу с анимацией, но о них расскажем в следующих уроках.
2. Кадры и ключевые кадры 1 часть | 3:11
Кадры и ключевые кадры 1ч.mp4 (3.19 МБ) 694 просмотра
:tuta: - полноэкранный режим

Создание простой Флеш анимации


В этом уроке Вы узнаете о кадрах и ключевых кадрах, а также научитесь создавать анимацию мигающего квадрата на сцене.

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

Теперь, создадим простую анимацию – мигание нарисованного квадрата. Для создания такой анимации, вы должны сначала задать себе вопрос «сколько данная анимация будет длиться по времени». Например, Вы хотите, чтобы данный квадрат оставался на сцене одну секунду, а затем исчезал. Одна секунда – это 24 кадра.

Это можно узнать из скорости перемещения воспроизводящей головки по временной шкале. В результате, нужно сделать так, чтобы квадрат оставался на сцене 24 кадра, а затем пропадал. Для этого, выделите 25-й кадр, в котором квадрат должен исчезнуть. О выделении свидетельствует, окрашенный в голубой цвет, прямоугольник.

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

В результате, 24-кадра, то есть одну секунду, квадрат находится на сцене, а 25-тый кадр становится пустым, т.к. квадрат в текущий момент удален.

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

В результате тестирования анимации видно как, квадрат одну секунду находится на сцене, затем исчезает ровно на одну секунду.
3. Кадры и ключевые кадры 2 часть | 2:01
Кадры и ключевые кадры 2ч.mp4 (2.25 МБ) 701 просмотр
:tuta: - полноэкранный режим

Как сделать Флеш анимацию?


Теперь попробуем сделать анимацию посложнее. Например, нужно сделать так, чтобы квадрат, сначала находился в левой части сцены, потом в правой, а затем исчез. Сначала определите, какое количество времени квадрат должен находиться в левой части сцены. Например, полсекунды. Полсекунды – это 12 кадров, следовательно, нужно выделить 12й кадр, а затем вставить ключевой кадр. «Меню»-«вставка»-«временная шкала»-«ключевой кадр». После чего переместите квадрат в правую часть сцены. Затем выделите первый ключевой кадр и переместите квадрат в левую часть сцены.

В результате, полсекунды квадрат сначала располагается в левой части сцены, затем полсекунды – в правой части сцены, а потом целую секунду, отсутствует.

Если вдруг необходимо изменить положение квадрата на другое, то нужно поставить воспроизводящую головку между ключевыми кадрами, а затем поменять положение объекта. Поясним, что за первое положение квадрата, отвечает первый ключевой кадр, следовательно, чтобы изменить положение квадрата, нужно поставить воспроизводящую головку между первым и 12-тым кадром. Для изменения второго положения квадрата, воспроизводящую головку нужно поставить между 12-тым и 24-тым кадром.

При тестировании ролика, вы видите другую анимацию, поскольку положения квадрата поменяли.
4. Как сделать покадровую анимацию в Adobe Flash CS6 | 3:24
Как_сделать_покадровую_анимацию_в_Adobe_Flash_CS6.mp4 (4.41 МБ) 739 просмотров
:tuta: - полноэкранный режим

Как создать покадровую анимацию?


Бывают случаи, когда необходимо сделать анимацию движения губ персонажа или движения каких-либо объектов на сцене и для этого иногда удобно пользоваться покадровой анимацией, то есть объект анимировать покадрово. Например, стоит такая задача, как сделать покадровую анимацию объекта, взлетающего вверх и падающего вниз.

Пусть это будет, некий мяч, поэтому выберите инструмент «Овал» и нарисуйте на сцене мячик, удерживая клавишу «Шифт».

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

Итак, сначала удалим созданные кадры, для этого выделите все кадры кроме первого и нажмите комбинацию горячих клавиш «Шифт + ЭФ5». Затем заблокируем первый слой, создадим второй слой и нарисуем на сцене прямую линию с помощью инструмента «линия».

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

Теперь второй слой заблокируем, а первый разблокируем. Обратите внимание, чтобы привязка к объектам была включена. Чтобы привязать объект к направляющей линии, достаточно выделить его и центр объекта переместить на линию, тем самым центр объекта автоматически будет присоединяться к линии.

Затем выберите первый кадр и нажмите F6, после чего измените положение объекта, привязывая его к линии. Затем снова нажимаем F6 и снова меняем положение, и так до тех пор, пока объект не пройдет весь заданный путь. В результате получится более естественная анимация объекта.
5. Режим многослойной структуры | 3:36
Режим многослойной структуры.mp4 (3.68 МБ) 699 просмотров
:tuta: - полноэкранный режим

Как анимировать объект в режиме многослойные структуры?


В этом уроке рассмотрим создание покадровой анимации в режиме многослойной структуры. Для этого сначала нужно нарисовать объект, который будете анимировать.

Пусть это будет тот же мячик или шарик, например. Задача такая, чтобы данный объект, взлетел, затем упал вниз.

Нарисовав объект, создадим второй слой, на котором нарисуем направляющую линию и искривим ее. После чего, второй слой заблокируем. Затем нужно определить, сколько кадров будет длиться анимация, например – 10 кадров. Значит, выделим 10-тый кадр на втором слое и нажмем F5. Тем самым продлили длительность направляющей линии.

Теперь, выделим 10-ый кадр на первом слое и вставим ключевой кадр, нажав F6. В результате получится два кадра. Начало и конец анимации. Находясь на 10-том кадре, с помощью инструмента привязки, переместим объект в конечную точку и привяжем объект к линии.

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

Как видно, на сцене появилось два объекта с разной прозрачностью. Многослойная структура показывает предыдущее положение, текущее положение и последующие положения вашего объекта.

Итак, выберите пятый кадр и вставьте ключевой кадр, и в этом ключевом кадре поменяйте положение объекта, например, переместив его на середину пути. В результате, видим визуальную подсказку, где объект находился в предыдущем кадре, где находится сейчас, и где он будет находиться в следующем кадре. Данный режим облегчает создание покадровой анимации, потому что вы видите и представляете всю создаваемую анимацию.

Теперь проделайте ту же процедуру, которую уже сделали. Выберите средний кадр, между пятым и 10-тым, нажмите F6, чтобы вставить ключевой кадр, затем разместите объект между предыдущим и следующим объектом. Повторяйте данную процедуру многократно до тех пор, пока не создадите требуемую анимацию.

Когда создание анимации завершено, отключаем режим многослойной структуры и, нажав клавиши CTRL + Enter, тестируем результат ролика.

Также стоит отметить, что у данного режима есть его разновидность, которая активируется по соответствующей иконке внизу временной шкалы. «Контуры многослойной структуры» – в данном режиме показывается не прозрачная заливка размещаемых элементов, а их контуры.
6. Редактирование нескольких кадров | 1:07
Редактирование нескольких кадров.mp4 (1.54 МБ) 597 просмотров
:tuta: - полноэкранный режим

Настройки анимации – редактирование нескольких кадров


В этом уроке рассмотрим настройку анимации – режим редактирования нескольких кадров. Продолжая создавать анимацию, допустим, стоит такая задача, чтобы переместить анимацию к нижнему краю сцены.

Обратите внимание, что, прежде всего, слой с направляющей линией должен быть удален, а режим многослойной структуры должен быть отключен. Затем включите режим редактирования нескольких кадров.

В результате, на сцене должны появиться все объекты. После чего, выделим все созданные кадры и отредактируем положение всех объектов на сцене, переместив их чуть ниже.

После редактирования положения объектов, обязательно отключите данный режим, иначе можно нарушить всю структуру созданной анимации.

В итоге, анимация объектов смещена к нижнему краю сцены.
7. Анимация движения | 1:52
Анимация движения.mp4 (2.27 МБ) 707 просмотров
:tuta: - полноэкранный режим

Создание анимации движения


Поскольку, создание покадровой анимации является, достаточно, долгим процессом, в этом уроке рассмотрим создание анимации движения с помощью встроенных методов во Flash.

Сначала нарисуем на сцене объект, например звезду, с помощью инструмента «многоугольник». Затем выделим данный объект и, нажав правую кнопку мыши, выберем действие «создать анимацию движения».

Поскольку, можно анимировать только символы, программа спросит разрешение о том, чтобы нарисованный объект превратить в символ. Ответив утвердительно, анимация кадра автоматически расширится на 24 кадра, то есть на одну секунду. При этом воспроизводящая головка будет находиться на 24-том кадре. Теперь нужно указать конечное положение объекта, переместив его в нужную область на сцене.

Тем самым, автоматически будет создан вспомогательный путь движения, на котором отмечены точки положения объекта в определенном кадре.

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

В результате тестирования ролика, видна только анимация движения объекта, а вспомогательный путь движения виден только при редактировании анимации.
8. Сглаживание анимации | 0:57
Сглаживание анимации.mp4 (1.51 МБ) 611 просмотров
:tuta: - полноэкранный режим

Плавная анимация


Рассмотрим создание более естественной и плавной анимации. Для этого нарисуем объект и добавим анимацию движения, как это делали в прошлом уроке.

Затем выделим слой, на котором анимируется объект и раскроем панель «свойства». На данной панели присутствует такая опция, как «замедление». Если значение выставить на «минус сто», то движение объекта будет плавно ускоряться. Если же в значении выставить цифру «сто», то движение объекта будет плавно замедляться.

Чтобы визуально просмотреть анимацию объекта, протестируем ролик, нажав клавиши CTRL + Enter
9. Создание собственного анимационного пути | 2:06
Создание собственного анимационного пути.mp4 (2.77 МБ) 621 просмотр
:tuta: - полноэкранный режим

Как создать анимацию движения?


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

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

Чтобы создать анимацию движения по тому контуру, который скопировали в буфер обмена, нужно переместить воспроизводящую головку между первым и конечным кадром, а затем нажать сочетание клавиш «CTRL + V».

В результате, анимация движения будет повторять тот контур, который Вы нарисовали. Если одной секунды для данной анимации Вам мало, то увеличьте ее. Для этого, наведите курсор мыши на последний кадр, затем нажав и удерживая левую кнопку мыши, переместите курсор вправо. Тем самым, расширив длительность анимации. Для просмотра итогового результата, протестируйте ролик.
10. Ориентация объекта по анимационному пути | 2:10
Ориентация объекта по анимационному пути.mp4 (2.75 МБ) 497 просмотров
:tuta: - полноэкранный режим

Анимация по траектории движения


В этом уроке рассмотрим создание анимации таким образом, чтобы ориентация объекта изменялась по анимационному пути.

Сначала нарисуем контур будущей траектории, а затем сглаживаем, копируем его в буфер обмена и удаляем со сцены. Подробно данные действия описывать не будем, поскольку, их рассматривали в предыдущих уроках.

Теперь нарисуем, например, стрелку, которая будет двигаться по заготовленному анимационному пути. После чего, выделим объект, и создадим анимацию движения. Затем, переместив воспроизводящую головку между начальным и конечным кадром, вставим заранее заготовленный контур траектории движения. В результате, объект будет перемещаться по данному анимационному пути. Теперь нужно сделать так, чтобы при перемещении, менялась и ориентация объекта, то есть нужно, чтобы кончик стрелки двигался параллельно заданному пути.

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

В результате, программа автоматически создаст ключевые кадры, которые показывают новое положение объекта с учетом его вращения по траектории.
11. Анимация формы | 1:41
Анимация формы.mp4 (2.46 МБ) 658 просмотров
:tuta: - полноэкранный режим

Создание анимация формы


В этом уроке рассмотрим создание анимации формы. Сначала, нарисуем на сцене объект, например, треугольник. Затем, определив длительность анимации, выделим нужный кадр, например, 24-й и нажмем клавишу F6, чтобы вставить ключевой кадр. После чего, трансформируем форму, или удаляем ее и рисуем другую, например, квадрат. Потом, на шкале анимации нажимаем правую кнопку мыши и выбираем «создать анимацию формы». В результате получается анимация, где треугольник превращается в квадрат.

Создать анимацию формы можно и другим способом. Для этого, нарисовав фигуру, выделите ее и нажмите правую кнопку мыши, а затем, выберите действие «создать анимацию формы». В результате, ничего не изменится. Но стоит выбрать другой кадр, нажать клавишу «F6 или F7 и вставить новую форму или трансформировать существующую, то объект будет анимироваться, превращаясь из треугольника в новую форму. Данную операцию можно проделывать многократно, тем самым, добиваясь желаемых результатов.
12. Подсказки формы | 3:34
Подсказки формы.mp4 (4.56 МБ) 614 просмотров
:tuta: - полноэкранный режим

Подсказки формы


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

После чего, выделяем объект, нажимаем правую кнопку мыши и выбираем «разделить», чтобы превратить объект, в простую форму. Далее, выбираем 24-й кадр и нажимаем «F7». В пустом кадре, аналогичным образом, напишем латинскую букву «T». Для удобства, включим режим многослойной структуры, чтобы видеть то, что происходит на сцене.

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

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

Для этого, обратимся к верхнему меню и выберем «модификация» - «Фигура» - «Добавить хинт кривой». И сразу запомним комбинацию горячих клавиш «CTRL+SHIFT+H». Данная команда добавляет на сцену красную точку, пронумерованную латинской буквой. Поскольку нужно сделать так, чтобы габаритные углы, нарисованных букв, оставались на своих местах, то переместим красную точку в левый верхний угол буквы «V». Затем выделим второй ключевой кадр, добавим подсказку формы, нажав «CTRL + SHIFT + H» и переместим красную точку в левый верхний угол буквы «T». Если точка меняет свой цвет на зеленый, то это означает, что программа правильно Вас «поняла», и знает, какую анимацию хотите создать.

Проделаем аналогичные действия и с правой частью букв.

В результате, видим именно тот результат, который нужно было достичь.
13. Анимация маски | 1:52
Анимация маски.mp4 (2.48 МБ) 592 просмотра
:tuta: - полноэкранный режим

Как анимировать маску?


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

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

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

Для завершения создания анимации маски, выделите слой «mask», и, нажав правую кнопку мыши, выберите «Маска».

В результате, Вы видите, как текст, плавно появляется. Таким образом, Вы научились создавать анимацию маски.
Изображение


Adobe Flash
Автор темы, Ефрейтор
Ефрейтор
Аватара
Adobe Flash
Автор темы, Ефрейтор
Ефрейтор
Сообщения: 17
Зарегистрирован: 9 апреля 2013
С нами: 10 лет 11 месяцев

Символы

#2 Adobe Flash » 5 ноября 2015, 11:42

Символы


1. Что такое символ | 1:09
Что такое символ.mp4 (1.59 МБ) 568 просмотров
:tuta: - полноэкранный режим
2. Создание символа | 2:05
Создание символа.mp4 (2.14 МБ) 506 просмотров
:tuta: - полноэкранный режим
3. Редактирование символов | 1:45
Редактирование символов.mp4 (2.03 МБ) 582 просмотра
:tuta: - полноэкранный режим
4. Точка регистрации | 1:55
Точка регистрации.mp4 (2.05 МБ) 563 просмотра
:tuta: - полноэкранный режим
5. Графические символы и фрагменты ролика 1 часть | 3:24
Графические символы и фрагменты ролика 1часть.mp4 (3.87 МБ) 461 просмотр
:tuta: - полноэкранный режим
6. Графические символы и фрагменты ролика 2 часть | 2:09
Графические символы и фрагменты ролика 2часть.mp4 (2.55 МБ) 509 просмотров
:tuta: - полноэкранный режим
7. Символ «кнопка» | 3:26
Символ «кнопка».mp4 (3.17 МБ) 599 просмотров
:tuta: - полноэкранный режим
Изображение

Adobe Flash
Автор темы, Ефрейтор
Ефрейтор
Аватара
Adobe Flash
Автор темы, Ефрейтор
Ефрейтор
Сообщения: 17
Зарегистрирован: 9 апреля 2013
С нами: 10 лет 11 месяцев

Фильтры

#3 Adobe Flash » 10 ноября 2015, 10:34

Фильтры

1. Работа с фильтрами 1 часть | 2:14
Работа с фильтрами 1 часть.mp4 (2.39 МБ) 574 просмотра
:tuta: - полноэкранный режим

Текст урока
Flash фильтры


С помощью фильтров можно наложить некий эффект на какой-либо объект. В Adobe® Flash® CS4есть четыре основных фильтра. Это: тень, размытие, свечение и фаска. Стоит отметить, что фильтры применяются к текстовым полям, фрагментам ролика и кнопкам.

Рассмотрим пример. Выберите какой-либо объект, находящийся на сцене и отобразите панель «свойства».

Раскройте область «Фильтры». Чтобы применить фильтр к выбранному объекту, нужно нажать на иконку, расположенную в левом нижнем углу текущей области, «добавить фильтр». Раскроется список, в котором доступны некоторые настройки.

Можно удалить все фильтры, которые были применены к объекту, отключить фильтры, не удаляя их и заново включить фильтры. Выберите из списка, например, первый фильтр «Тень». К объекту сразу будет применен фильтр и появится тень. У каждого фильтра есть ряд настроек, которые можно редактировать на свое усмотрение. У фильтра «тень», можно изменять настройки размытия, интенсивности, качества тени, угла поворота и расстояния от объекта. А также можно удалить фон, применить внутреннюю тень, скрыть объект и поменять цвет тени. Подробно на настройках останавливаться не будем, поскольку с ними можно легко разобраться самостоятельно и поэкспериментировать над ними.

Также, стоит отметить, что настройки эффектов можно сохранять, а в дальнейшем, сохраненные настройки эффектов можно применять к другим объектам.
2. Работа с фильтрами 2 часть | 2:15
Работа с фильтрами 2 часть.mp4 (3.96 МБ) 552 просмотра
:tuta: - полноэкранный режим

Текст урока
Как создать эффект размытия и выпуклости краев?


После того, как настройки фильтра готовы, нажмите на иконку, расположенную в нижнем левом углу, «наборы настроек», затем выберите пункт «сохранить как».

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

Удалим фильтр с настройками, выбрав команду «удалить все» и рассмотрим другой фильтр – «размытие». С помощью данного фильтра можно размывать края объектов, придавая специальный эффект. Например, с помощью данного фильтра создать облако. Для этого, с помощью инструмента «кисть» нужно нарисовать произвольные кривые линии. После чего форму превратить в символ и применить фильтр «размытие». На панели «свойства» можно изменить настройки размытия по оси икс и игрек. Также можно изменить качество размытия. Если отключить связь значения свойств X и Y, то можно будет регулировать размытие по X и Y, не зависимо друг от друга.

Также доступны и другие фильтры, это «фаска», - с помощью которого можно придать выпуклость объекту. Это свечение, свечение по градиенту и свечение – фаска: данные фильтры придают свечение выбранному объекту. Если выбрать «настроить цвет», то можно изменить цвет объекта, контрастность, насыщенность и прочие параметры.
3. Копирование анимации | 1:46
Копирование анимации.mp4 (2.33 МБ) 478 просмотров
:tuta: - полноэкранный режим

Текст урока
Как скопировать и добавить анимацию?


В этом уроке рассмотрим применение скопированной анимации к другим объектам.

Допустим, что в библиотеке находится пять различных символов, на которых и будем рассматривать наглядный пример создания, копирования и изменения анимации.

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

После того, как анимация готова, попробуем ее применить к другим объектам. Для этого, выделим кадры анимации, нажмем правую кнопку мыши и выберем «копировать движение». Затем, удалим все кадры, нажав клавиши «Шифт + Ф5». И выделив первый кадр, нажмем «ЭФ6», чтобы добавить кадр.

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

Если в данный момент, из библиотеки переместить на сцену другой символ, то программа спросит о том, заменить ли объект анимации? Если ответим «да», то находящийся на сцене объект замениться на другой объект из библиотеки.
Изображение

Adobe Flash
Автор темы, Ефрейтор
Ефрейтор
Аватара
Adobe Flash
Автор темы, Ефрейтор
Ефрейтор
Сообщения: 17
Зарегистрирован: 9 апреля 2013
С нами: 10 лет 11 месяцев

Программные инструменты

#4 Adobe Flash » 11 ноября 2015, 11:56

Программные инструменты

1. 3D Инструменты | 2:45
3D Инструменты.mp4 (3.09 МБ) 578 просмотров
:tuta: - полноэкранный режим
Инструменты 3D анимации


В Adobe® Flash® CS4 существует возможность помещать плоские объекты в трехмерное пространство. Для примера, нарисуйте на сцене форму и преобразуйте ее в символ, выбрав тип «фрагмент ролика». По умолчанию, объект на сцене располагается на плоскости, поскольку координата точки по оси Z равна нулю. Как только измените данную координату на любое другое значение, в центре объекта отобразится пиктограмма, показывающая направление осей X, Y и Z.

Рассмотрим инструменты 3D анимации, позволяющие работать с трехмерными объектами.

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

Попробуйте нажать на маркер левой кнопкой мыши и, удерживая, перемещайте курсор в разное направление. Тем самым, объект будет вращаться вокруг оси X.

То же самое и с зеленым маркером будет происходить, только вращаться он будет вдоль оси Y.
Синий маркер отвечает за вращение объекта вокруг оси Z.
Оранжевый маркер отвечает за вращение всех координат сразу. Кроме этого, круг с маркерами можно перемещать в любое положение на сцене.

Теперь рассмотрим инструмент «перемещение 3D-объекта», который позволяет перемещать объект вдоль осей.

Зеленый маркер – отвечает за перемещение объекта по оси Y,
Красный маркер отвечает за перемещение объекта по оси X,
А черная точка отвечает за перемещение объекта вдоль оси Z.

Выделив объект, на панели свойств в опции «3D позиция и вид», можно вручную задавать координаты объекта.
2. Инструмент «Аэрограф» | 1:35
Инструмент «Аэрограф».mp4 (2.39 МБ) 486 просмотров
:tuta: - полноэкранный режим
Инструмент «Аэрограф»


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

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

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

В настройках «Аэрографа», также можно изменить ширину, высоту и угол кисти. Чем больше значение, тем бо́льшая область на сцене будет закрашиваться.
3. Инструмент «Декор» | 3:58
Инструмент «Декор».mp4 (6.42 МБ) 583 просмотра
:tuta: - полноэкранный режим
Создание эффекта узора


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

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

  • Заполнение «Виноградная лоза»
  • Заполнение сетки
  • Кисть симметрии.

В режиме «Виноградная лоза» можно использовать для рисования узоров как стандартные листики с цветочками, так и свои, созданные вручную.

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

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

Естественно, Вы можете изменять и цвет листа, ветви, цветка, выбирая его на соответствующей палитре цветов.

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

С инструментом «декорирование» не так легко работать, как кажется, здесь нужно постоянно экспериментировать и пробовать подбирать настройки таким образом, чтобы получился желаемый результат.

Теперь рассмотрим другой эффект рисования – «Заполнение сетки», который позволяет рисовать узоры по сетке. Изменив в настройках, ширину и высоту интервала, а также масштаб узора, кликаем по сцене в данном режиме и в результате, начинают закрашиваться области по сетке. Второй клик мышкой по сцене, останавливает заполнение узора.

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

  • Вращать вокруг точки – режим позволяет рисовать симметричные узоры.
  • Отразить за точкой – режим позволяет отразить нарисованные узоры вдоль центральной точки.

Преобразование сетки – режим позволяет рисовать сетку, трансформируя ее с помощью специального маркера.
4. Инструмент инверсивной кинематики «Кость» | 2:35
Инструмент инверсивной кинематики «Кость».mp4 (3.87 МБ) 1353 просмотра
:tuta: - полноэкранный режим
Инструмент «Кость»



Инструмент «Кость» позволяет создавать внутренний, либо внешний 3D каркас структуры и соединять с помощью этого каркаса объекты. Двигая один объект, двигаются и остальные объекты.

Для примера, нарисуем произвольную форму на сцене, и превратим ее в символ. Потом выделим ее, и, удерживая клавишу ALT, создадим копии данного объекта. Создадим несколько копий объекта, которые разместим в разных местах сцены.

Затем выберем инструмент «Кость» и соединим объекты между собой через их центр. Обратите внимание, чтобы привязка к объектам была включена. В результате, будет создана структура, похожая на скелет. Если обратить внимание на временную шкалу, то можно заметить, что автоматически создался новый слой «каркас», на который и переместились все объекты, находящиеся на первом слое. А первый слой стал пустым. На слое «каркас» можно создавать анимацию и различные эффекты.

Если выбрать инструмент выделения и попробовать переместить один объект, то вместе с ним будут перемещаться и другие объекты, то есть вся структура целиком. Инструмент «кость» может сохранить массу времени при анимации персонажей, например.

На панели свойств у данного инструмента есть дополнительные настройки. Выделите первый кадр слоя «каркас» и на панели свойств выберите тип «время выполнения». В таком случае, при тестировании ролика, можно будет перемещать объекты каркаса.

Также можно создавать внутреннюю структуру формы. Для этого, внутри предварительно нарисованной формы, нужно создать каркас с помощью инструмента «кость». В дальнейшем можно изменять каркас формы на свое усмотрение.
5. Инструмент «Связывание» | 1:56
Инструмент «Связывание».mp4 (2.5 МБ) 445 просмотров
:tuta: - полноэкранный режим
Инструмент «Связывание»


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

Теперь, если с помощью выбранного инструмента выделить одну из маркерных точек, то точка окрасится в красный цвет, а между предыдущей и последующей костью будет проведена желтая линия, которая означает, что выделенная точка связана с этими костями. Если выделить саму кость, то увидим, какие точки связаны с выбранной костью. С помощью данного инструмента можно связать выбранную маркерную точку с какой-либо костью. Тем самым можно изменить связь между сегментом и маркерной точкой.

В результате, если изменить форму, то она будет меняться совсем по-другому. И изменения будут зависеть напрямую с тем, как связаны сегменты кости с маркерной точкой.
6. Редактор движения | 2:20
Редактор движения.mp4 (2.94 МБ) 529 просмотров
:tuta: - полноэкранный режим

Анимация движения


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

Для наглядности, приведем практический пример. Допустим, поставлена такая задача, чтобы объект резко влетал на сцену, затем в центре замедлялся, а затем быстро вылетал со сцены. Например, нужно, чтобы замедление объекта происходило в промежуток с 20-го по 30-й кадр. Для этого, выделим 20-й кадр и сделаем его ключевым, нажав клавишу «F6». На графике сразу появится маленькая черная точка, которую можно перемещать. Также, создадим ключевой кадр в 30-том кадре. В итоге получилось два ключевых кадра.

Теперь, выделите точку на втором ключевом кадре и переместите ее в 35-й кадр. Затем выделите точку на первом ключевом кадре и переместите ее в 15-й кадр. Протестируем ролик. В результате, объект вылетает, замедляется в центре, затем улетает со сцены. Задача выполнена.

С помощью редактора движения можно анимировать и другие свойства объекта, такие как, искажение вокруг осей икс и игрек. Также можно регулировать масштаб объекта и изменять его цвет. Кроме того, можно добавлять и анимировать различные эффекты.
Изображение

Adobe Flash
Автор темы, Ефрейтор
Ефрейтор
Аватара
Adobe Flash
Автор темы, Ефрейтор
Ефрейтор
Сообщения: 17
Зарегистрирован: 9 апреля 2013
С нами: 10 лет 11 месяцев

ActionScript 3.0

#5 Adobe Flash » 16 ноября 2015, 18:35

ActionScript 3.0


1. Введение в ActionScript | 2:27
Введение в ActionScript.mp4 (3.21 МБ) 477 просмотров
:tuta: - полноэкранный режим

Как работать в ActionScript 3.0?


С помощью ActionScript®, Вы сможете добавить своим работам интерактивности, сможете делать Flash – сайты, программы, интерактивные приложения, и многое другое.

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

В результате, отобразится область для ввода ActionScript 3.0, После чего, нужно раскрыть выпадающее меню, кликнув в верхнем правом углу данного окна и отметить пункты «номера строк», «переносить по словам», которые позволяют автоматически нумеровать строки и переносить слова на новую строку соответственно.

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

Панель «Экшн скрипт» состоит из трех областей.

Первая область – предназначена для тех, кто программирует с использованием встроенного помощника.

Вторая область – предназначена для отслеживания тех мест, где присутствует ActionScript.

В третьей области – прописываются различные команды и скрипты.

Теперь перейдем к практике и в следующем уроке напишем Экшн скрипт.
2. Команда «Стоп». Останавливаем анимацию 1часть | 2:14
Команда «Стоп». Останавливаем анимацию 1часть.mp4 (2.68 МБ) 393 просмотра
:tuta: - полноэкранный режим

Команда «Стоп»


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

Затем продлите анимацию, выделив 15-й кадр на временной шкале, и нажав клавишу F6. После чего еще раз продлите анимацию до 30-го кадра. С 16-го по 30-й кадр будет другая анимация, поэтому данные кадры удалите. Выделите16-й кадр и нарисуйте правильный круг, затем выровняйте его по центру.

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

Потом, на панели свойств, измените стиль цветового эффекта на «альфа-канал» для первого кадра. Также измените значение на 0%.

Теперь выделите 15-й кадр и измените значение «альфа-канала» на 100%, что в результате, получится эффект плавного появления объекта.

Выделите 16-й кадр и повторите ту же самую процедуру, но с кругом. Выделяем объект, нажав правую кнопку мыши, выбираем «создать анимацию движения». Затем на панели свойств изменяем тип цветового эффекта на «альфа-канал», и значение ставим 0%.
3. Команда «Стоп». Останавливаем анимацию 2часть | 2:20
Команда «Стоп». Останавливаем анимацию 2часть.mp4 (2.65 МБ) 358 просмотров
:tuta: - полноэкранный режим

Остановка видео


Потом выделяем 30-й кадр, и значение «альфа-канала» ставим 100%. В результате тестирования ролика, сначала одна фигура плавно появляется, затем другая. Данная анимация бесконечно повторяется. Попробуем ее остановить.

Для этого, создайте новый слой и задайте ему имя «Экшн». Поскольку нужно, чтобы анимация остановилась, например в 14-том кадре, то выберите 14й кадр на слое «Экшн» и нажмите клавишу «F7», чтобы вставить пустой ключевой кадр. Именно в данный ключевой кадр будет вставлен Экшн скрипт.

Отобразим панель «действия» с помощью клавиши «F9». Теперь приступаем к написанию скрипта.

Сначала пишем «stop();» - это встроенный метод, который останавливает анимацию в том месте, где это необходимо. Если сейчас протестируем ролик, нажав CTRL + ENTER, то анимация будет остановлена именно в том месте, где указали.

Теперь попробуйте остановить видео на 29-том кадре. Для этого выделите его, нажмите F6, отобразите панель «действия» и пропишите ранее рассмотренный скрипт.

В результате тестирования видео ролика, кадр будет останавливаться на 14-том кадре, а не на 29-том, потому что скрипт на 14-том кадре нужно удалить. Для этого, на панели «действия» в левой нижней области, где отображается структурированный список созданных скриптов, найдите соответствующий слой и кадр, а затем удалите скрипт.
4. Вывод данных 1 часть | 2:30
Вывод данных 1 часть.mp4 (2.76 МБ) 459 просмотров
:tuta: - полноэкранный режим

Как писать комментарии?


После изучения данного урока, Вы научитесь писать комментарии на панели «ActionScript» и выводить данные в окно для вывода данных. Это нужно для диагностирования ActionScript и поиска в нем ошибок. Рассмотренную в этом уроке команду «trace» (трэйс), Вы будете использовать очень часто.

Сначала, создайте новый файл, выберите первый кадр на временной шкале и отобразите панель «действия-кадр».

Теперь напишите команду «trace». Синтаксис у данной команды такой же, как и команды «stop». Сначала Вы пишите, зарезервированное в программе Flash, слово, которое «говорит» программе, что Вы хотите что-то вывести. Далее, ставите круглые скобки, а затем точку с запятой. Точка с запятой заканчивают строку. После чего Вы сможете писать новые команды без ошибок.

Чтобы протестировать работу данной функции, поставьте курсор мыши между круглых скобок и напишите то, что хотите вывести. Например, напишите цифру «100». Потом нажмите CTRL + Enter, чтобы увидеть результат. В итоге, сгенерировался swf – файл и вместе с ним открылось окно вывода данных, в котором вывелось число «100».

Теперь, закройте открывшиеся окна и протестируем другие функции, так как рассматриваемый метод может выводить любые данные.

На новой строке, снова напишите команду «trace» и в круглых скобках напишите любой текст. Как правило, текст заключается в кавычки. После чего протестируем ролик. В результате отобразились оба значения.

Напомним, что данный метод используется в диагностических целях, для поиска ошибок, вывода переменных и тестирования работы скрипта. Экшн скрипт позволяет получить мгновенно-обратную связь от того кода, который Вы пишите.
5. Вывод данных 2 часть | 2:14
Вывод данных 2 часть.mp4 (2.62 МБ) 501 просмотр
:tuta: - полноэкранный режим

Тестирование видео ролика


Продемонстрируем еще несколько примеров с командой «trace». Напишем команду с новой строки и в круглых скобках напишем: 5+5 (пять плюс пять). В результате будет выведена сумма чисел, то есть , 10 (десять). Таким образом, команду «trace» можно использовать в качестве калькулятора и применять сложение, вычитание, умножение, деление.

Например, нужно сделать так, чтобы некоторые команды не выполняли свое действие, для этого нужно поставить курсор мыши в самое начало строки и поставить две наклонные черты вправо. При этом строка окрасится в серый цвет. Это означает, что данная команда выполняться не будет.

Чтобы закомментировать целый параграф, который объясняет, как работает код, нужно после двух наклонных черт поставить звездочку. А в конце последнего слова поставить звездочку и две наклонные черты вправо. После чего можете писать другие команды.

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

Следующий момент. При тестировании ролика, воспроизводящая головка находится в циклической анимации, которая повторяется снова и снова. Но экшн скрипт, в ключевом кадре выполняется один раз на одно обновление кадра. Сто́ит продлить линию времени на пять кадров, как скрипт будет выполняться множество раз.
6. Переменные в ActionScript 3.0 | 2:26
Переменные в ActionScript.mp4 (2.5 МБ) 420 просмотров
:tuta: - полноэкранный режим

Переменные в ActionScript 3.0


В этом уроке рассмотрим переменные в ActionScript 3.0. Переменная создается с помощью ключевого слова «var», которое сообщает программе, что пишется переменная.

После того, как написали «var», следует написать имя переменной и указать ее тип после двоеточия. Зачем это нужно? Просто если Вы одной переменной присвоите строковое значение, а затем, в дальнейшем этой переменной будете присваивать цифру, то программа сообщит, что нашлась какая-то ошибка, что Вы пытаетесь присвоить текстовой переменной число. Поэтому в данный момент выберите тип «string». Это будет являться строковой переменной. Затем, после знака «равно» напишем значение, которое будет храниться в этой переменной.

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

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

Теперь создадим другую переменную и зададим числовой тип. Пишем: «var (вар) secondVariable (сэконд вэрайбл) двоеточие, Number (набр) равно 20»

Затем пишем команду «trace», чтобы убедится, что все работает. В результате тестирования ролика отображается число «20».
7. Функции в ActionScript 3.0 | 2:17
Функции в ActionScript 3.0.mp4 (2.18 МБ) 467 просмотров
:tuta: - полноэкранный режим

Как создать функцию в ActionScript 3.0?


Функция – это часть кода, которая выполняет некоторые действия. Чтобы функция выполнила эти действия, ее нужно выбрать. Прежде, чем написать свою собственную функцию, обратим внимание на то, из каких частей функция состоит.

Чтобы создать функцию, Вам нужно начать писать код с, зарезервированного в программе, слова «function (фанкшн)». С помощью данного слова, Вы сообщаете программе, что собираетесь создать функцию. Далее пишется уникальное имя функции. При этом действуют правила: имя функции не должно начинаться с цифры. Можно использовать знак доллара, нижнего подчеркивания и латинские буквы. После уникального имени обязательно пишутся круглые скобки, внутри которых пишутся аргументы с указанием типа данных, находящихся внутри функции. Переменные данных аргументов пишутся внутри функции и заключаются в фигурные скобки, после которых ставится двоеточие. Затем пишется слово «void», которое означает, что функция не возвращает никаких переменных. Если нужно, чтобы эта функция возвращала какую-либо переменную, например сумму, либо умножение, то указывается, что функция возвращает числовой тип.

Это нужно для компилятора, который проверяет экшн-скрипт на простые ошибки. После того, как указан тип данных, который возвращает данная функция, нужно поставить фигурные скобки. Внутри скобок пишется действие, которое должно выполнить данная функция.

Чтобы функция выполнила, внутри написанные, действия, нужно эту функцию вызвать с помощью команды «trace».
8. Пишем функцию | 3:02
Пишем функцию.mp4 (2.84 МБ) 489 просмотров
:tuta: - полноэкранный режим

Как написать функцию в ActionScript 3.0?


Теперь, самостоятельно напишем собственную функцию.

Сначала, пишем зарезервированное слово «function», которое сообщает программе, что хотим написать функцию.

Затем пишем имя функции. Желательно, чтобы имя было осознанным, например, «Calculate Sum», что значить, посчитать сумму. Ставим круглые скобки, где укажем некоторые аргументы.

Аргумент «а». Тип переменной – «Number».

Далее, через запятую создаем другие аргументы, которые понадобятся.

Аргумент «b» - тоже будет числового типа. Данная функция будет возвращать переменную, тоже числового типа.

Когда все написали, переходим на новую строку, открываем фигурную скобку, спускаемся на две строчки ниже, закрываем фигурную скобку и поднимаемся на строчку выше.

В этой строке напишем те действия, которые данная функция будет выполнять. Например, нужно, чтобы данная функция посчитала сумму и вернула ее.

Пишем: sum – это переменная, равно, a +b (а плюс бэ), точка с запятой.

Теперь, чтобы функция вернула сумму, пишем: return, что значит, вернуть, и пишем то, что нужно вернуть: sum, точка с запятой.

В результате получается, что складываем два числа, sum – это число, затем возвращаем число.

Ошибки отсутствуют, за исключением той, что не создали переменную сумм. Ставим курсор перед функцией и создаем данную переменную числового типа, не присваивая ей никакого значения.

Теперь вызовем эту функцию и пошлем в нее некоторые переменные. Ставим круглые скобки, точку с запятой, и в круглых скобках через запятую пишем те цифры, которые хотим послать в функцию.

В завершение нужно вывести то значение функции, которое она возвращает. Пишем команду «trace» и заключаем значение в круглые скобки.

Теперь, если протестируем ролик, то команда «trace» выведет то значение, которое вернула функция.

В результате Вы научились тому, как использовать функции при программировании ActionScript 3.0
9. События мыши | 2:32
События мыши.mp4 (2.66 МБ) 556 просмотров
:tuta: - полноэкранный режим

События мыши в ActionScript 3.0


В этом уроке рассмотрим, как Flash обрабатывает и реагирует на события мыши. Например, на движения мыши, клик мыши, нажатие клавиши, окончание анимации. Все это является событием.

Рассмотрим пример.

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

Прежде, чем заставить кнопку реагировать на события, зададим ей имя. Теперь создадим новый слой и отобразим панель «действия – кадр».

В появившемся окне начинаем писать код. Сначала пишем имя кнопки, чтобы к ней обратиться, ставим точку, из раскрывающегося списка выбираем метод «add Event Listener», который обучает кнопку реагировать на определенные события. Внутри круглых скобок пишем категорию «Mouse Event», после чего ставим точку. В раскрывающемся списке выбираем конкретное событие «CLICK», ставим запятую. И после запятой пишем название функции, которую собираемся запустить.

Теперь нужно функцию создать с помощью зарезервированного слова «function», после чего пишем название функции и после двоеточия, пишем параметр, который сюда передается. Затем пишем «void», так как данная функция не возвращает никаких переменных.

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

При тестировании ролика, если кликнуть на кнопку, то произойдет событие мыши и вызовется функция.
Изображение

Adobe Flash
Автор темы, Ефрейтор
Ефрейтор
Аватара
Adobe Flash
Автор темы, Ефрейтор
Ефрейтор
Сообщения: 17
Зарегистрирован: 9 апреля 2013
С нами: 10 лет 11 месяцев

Создание простого flash сайта

#6 Adobe Flash » 20 ноября 2015, 20:53

Создание простого flash сайта


1. Начало создания флэш-сайта 1 часть | 2:30
Начало создания флэш-сайта 1 часть.mp4 (2.67 МБ) 475 просмотров
:tuta: - полноэкранный режим

Как создать простой Flash сайт?


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

Прежде, чем начать создавать Flash-сайт, нужно заранее подготовить весь тот контент, который на нем будет размещаться. Это страницы, кнопки, текст, графика, видео, аудио и прочее. Естественно, большинство элементов сайта должно быть в символах, то есть, если это анимируемая кнопка, то она должна быть преобразована в символ. Как уже было сказано, использование символов позволяет значительно уменьшить объем файла.

В этом видео уроке не будем рассматривать рисование графики для флэш-сайта, а покажем базовые принципы создания простого сайта на флэш. Поэтому контент Вы должны подготовить самостоятельно.

После того, как все материалы подготовлены, можно приступать к созданию Flash – сайта. Первое, что нужно сделать, это заранее создать несколько новых слоев.

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

Теперь выделим слой «страницы» и создадим три ключевых кадра. Выбрав десятый кадр, нажмем клавишу «F6» чтобы создать ключевой кадр. Далее, сделаем ключевым кадром 15-й и 20-й кадры. После чего, выделим 29-й кадр на слое «кнопки» и нажмем клавишу «F5», чтобы продлить первый ключевой кадр.
2. Начало создания флэш-сайта 2 часть | 1:47
Начало создания флэш-сайта 2 часть.mp4 (2.36 МБ) 391 просмотр
:tuta: - полноэкранный режим

Создание кнопок для навигации по сайту


Таким же образом, создадим три ключевых кадра на слое «метки»…

Слой «экшн-скрипт» продляем до 29-го кадра, с помощью клавиши «F5».

Выделим первый кадр на слое «кнопки» и разместим на сцене, заранее подготовленные, кнопки, с помощью которых будет осуществляться навигация по сайту.

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

Аналогичным образом, разместим контент, который будет соответствовать разделу «О компании». Для этого, выделим 9-й кадр и разместим контент на сцене. Потом выделим 29-й кадр и так же разместим контент, который будет соответствовать разделу «Контакты».

Чтобы быстро ориентироваться на временной шкале и переходить на нужные страницы сайта, создадим метки на соответствующем слое.

Выбрав первый кадр, на панели свойств задаем имя кадра, так же присваиваем имена для 11го и 21го кадров.
3. Навигация по сайту | 3:51
Навигация по сайту.mp4 (4.14 МБ) 441 просмотр
:tuta: - полноэкранный режим

Как написать Flash скрипт для навигации по сайту?


В этом уроке напишем экшн скрипт, который будет управлять навигацией по сайту. Рассмотрим наглядный пример. Прежде всего, чтобы установить связь между нажатием на кнопку и определенными действиями, нужно дать имя этой кнопке. Через присвоенное имя будем обращаться к кнопке с помощью ActionScript.

Выбрав первую кнопку, на панели свойств задаем ей имя «HOME_btn». Второй кнопке будет соответствовать имя «ABOUT_btn», а третью кнопку именуем «CONTACTS_btn»/

Теперь, выбрав первый кадр на слое «экшн скрипт», отобразим панель «действия-кадр».

В появившемся окне, будем писать Flash скрипт.

Сначала пишем: stop(); (стоп), чтобы остановить непрерывное воспроизведение анимации и начать управлять ей самостоятельно.

Далее пишем: home_btn.addEventListener (хоум битиэн, эд эвэнт листэнэр). Тем самым учим выбранную кнопку «слушать» клик мыши.

В круглых скобках пишем два аргумента. Первым аргументом является событие, которое слушаем:

MouseEvent.CLICK, ставим запятую и следующим пишем аргумент, который будет происходить, когда событие случится – onClickHome (он клик хоум).

Таким же образом создаем связь между кликом мыши и функции для других кнопок, только теперь нужно изменить название самой кнопки и название функции. В результате, научили каждую кнопку слушать клик мыши. И когда этот клик случается, будет происходить событие.

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

Внутри круглых скобок нужно принять передаваемое событие в какой-либо аргумент и написать тип этого аргумента: Mouse Event (маус эве́нт). Теперь, в фигурных скобках пишем действие, которое нужно совершить.

Пишем: gotoAndStop (готоэндстоп) и в скобках пишем название метки, куда нужно перейти при нажатии на кнопку «Главная»: home (хоум). Как правило, метки пишутся в кавычках. На этом закончили создание первой функции, которая будет направлять на метку «хоум».

Скопируем данную функцию, вставим ее текст два раза и изменим название функции. Затем, в каждой функции изменим название меток.

Теперь протестируем получившийся результат… Нажимая на кнопку «О компании», попадаем на страницу с текстом о компании. Нажав на кнопку «контакты», попадаем на страницу с контактными данными. Навигация по сайту работает.
4. Переходы на флэш сайте | 3:14
Переходы на флэш сайте.mp4 (4.71 МБ) 432 просмотра
:tuta: - полноэкранный режим

Создание анимационных эффектов


В этом уроке рассмотрим принцип создания анимационных эффектов для контентной области сайта.

Сначала, включим режим редактирования множества кадров и расширим его на временной шкале. Затем выделяем контент на всех кадрах. После чего, перемещаем весь контент за пределы сцены и отключаем режим редактирования множества кадров.

Потом, выделяем первый кадр на слое «страницы», затем, выбрав контент главной страницы, нажимаем правую кнопку мыши и выбираем пункт «создать анимацию движения». Теперь, выделим последний кадр данной анимации и переместим объект на сцене в нужное положение.

Те же самые действия проделываем и с остальным контентом….. (пауза 7 секунд)

Теперь нужно изменить экшн скрипт. Отобразив панель «кадр-действия», меняем название «gotoAndStop» на «gotoAndPlay».

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

Выделив 9-й кадр, пишем команду «стоп», затем пишем данную команду в 19-том кадре и 29-том кадре.

Тестируя ролик, хорошо видно, как переходы страниц анимируются. Но анимация происходит слишком быстро. Поэтому, чтобы ее замедлить, выделим два кадра первой анимации и нажмем три раза клавишу «F5». Затем повторим эту же операцию на второй анимации и на третьей анимации.

В завершение, выделим первый кадр на слое «экшн скрипт», отобразим панель скриптов и удалим первую команду «стоп».

В результате, получим анимированные переходы с одной страницы на другую.

Теперь, Вы научились делать анимационные эффекты с контентом. В уроке был рассмотрен простейший эффект, а вы можете, поняв принцип, создавать и более сложные. Не стоит забывать, что анимировать можно как свойства объектов, так и фильтры, которые были применены к объектам. Экспериментируйте, и у Вас все получится!
Изображение

Adob
Аватара
Adob

#7 Adob » 13 октября 2016, 15:50

Очень даже доходчиво. Полезные уроки.


  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «Adobe Flash»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 2 гостя