-Поиск по дневнику

Поиск сообщений в FLASH_MX

 -Подписка по e-mail

 

 -Постоянные читатели

 -Статистика

Статистика LiveInternet.ru: показано количество хитов и посетителей
Создан: 18.02.2004
Записей:
Комментариев:
Написано: 19


структура. кнопки.

Пятница, 20 Февраля 2004 г. 14:22 + в цитатник
немножко про структуру объектов во флеше.

придуманы т.н. символы (Symbol), которые попадают в библиотеку и там хранятся, например, для многократного использования в одном мультике.

чтобы из какого-то рисунка (ну круг, например) сделать символ - нужно его выделить, и нажать F8.
символы бывают 3 видов.
- муви-клипы.
- кнопки.
- графика.

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

нарисуй круг, выдели его и нажми F8. выбери тип символа - Button (кнопка), напиши какое-нить название. Ок. теперь этот символ попал в библиотеку, и редактировать его в основной сцене нельзя - только внутри самого себя. нажми Ctrl+L - откроется окошко библиотеки. и там ты видишь свою кнопку.
вот.
окей, дальше. нажимаешь на круг. он выделяется голубой рамкой, это значит что это не просто кривые, а уже символ. дави на него 2 раза - попадаешь внутрь этого символа. в нашем случае, Button, внутри есть только 4 кадра (широких). для кнопки больше и не нужно.
первый "Up" - это состояние кнопки, когда мышка находится не над ней. второй - "Over" - это когда мышка пролетает над нашей кнопкой. третий - "Down" - это то, что происходит с кнопкой в момент нажатия. и последний, "Hit", - это область, которая будет считаться областью кнопки. обычно в инете всеразличные кнопки бывают только прямоугольные. во флеше кнопка может быть и кругом, и чем угодно.
итак, в первос кадре, который Up, у нас есть наш круг. нажимай на второй кадр, Down, жим F6, и крась кружок в какой-нить другой цвет (как ты помнишь, это "ведерко" слева, под панелькой tools). если покрасила - то же самое делай в 3м кадре (создавай ключевой, перекрашивай). а в 4м кадре, где только область нажатия должна быть, просто создавай ключевой кадр с тем же кружком (F6). давай теперь жми Ctrl+Enter.
должно получиться вот что. когда мыш не над кружком - он одного цвета. когда над ним - другого. когда нажимаешь - третьего. если не получилось - попробуй еще раз.
когда получится - попробуй во втором кадре (Over) изменить форму этого круга, сделай его овалом, например. тогда при наведении мыши кнопка будет менять и свой цвет, и форму ;)

немного про слои

Пятница, 20 Февраля 2004 г. 13:36 + в цитатник
флеш, как и, например, Фотошоп, программа, работающая со слоями. представь себе, что есть 2 больших празрачных прямоугольных стекла. на одном нарисован круг, на другом - квадрат. оба эти стекла лежат на столе, предположим.
ты можешь двигать одно из них влево, а другое в то же время - вправо. тогда получится, что круг и квадрат двигаются в разные стороны. на одном стекле так сделать нельзя, согласись. а на разных - можно.
вот эти стекла - это и есть слои ;) и таких слоев во флеше может быть очень много. и еще. если 2 (или больше) фигни двигаются (или деформируются) по разному - это должно происходить в разных слоях.
управление слоями - в той же панельке Timeline, слева от кадров. сейчас у нас есть Layer1 - это название слоя. под ним - 3 значка, нас сейчас интересует самый первый - New Layer. нажимаем - и слоев становится 2. видишь, где кадры показаны - тоже стало 2 ряда этих кадров.

давай новый документ создаем, рисуем круг. на 10 кадре жмем F7 (пустой ключевой кадр) - и рисуем квадрат. снова идем в первый кадр, выбираем Tween - Shape.
теперь делаем новый слой, и там делаем все то же самое, только сначала - квадрат, потом в 10м кадре - F7 и рисуем круг, потом в первом кадре (уже ВТОРОГО слоя) - Tween - Shape.
давим контрол-энтер. должно получиться...

анимация.

Пятница, 20 Февраля 2004 г. 13:19 + в цитатник
новый мультик. в первом кадре рисуем линию.
нажимаем на 10 кадр, жмем F6 (создаем ключевой кадр с тем же, что и в предыдущем ключевом). теперь снова выделяем на timeline этот десятый кадр, и изменяем линию, поворачиваем, искривляем, переносим в другое место - что хочешь.
что получается? 1 кадр - ключевой. наша изначальная линия. 2-9 кадры - промежуточные. все та же линия. 10 кадр - нашалиния, только измененная.
теперь нажимаем на 1й кадр, и внизу в панельке Properties появляется маленькое меню Tween - это и есть управление движением, т.е. анимацией. выбираем тип движения - Shape (еще там есть Motion, о этом чуть позже). Видишь, на временной шкале между 1 и 10 кадром появилась стрелка на бледном таком фоне? значит наша линия из первого состояния за 10 кадров плавно превратится в свое состояние в 10м кадре.
проверим. Ctrl+Enter. получается?
теперь вот что. нажимай на первый кадр и жми Delete (удаляем все, что в нем нарисовано). рисуй там квадрат где-нить справа. теперь нажимай на 10 кадр, снова стирай все что там есть и рисуй круг где-нить слева. и - Ctrl+Enter.
квадрат плавно превращается в круг, да? и еще отъезжает влево. если получается - молодец.

кадры

Пятница, 20 Февраля 2004 г. 13:08 + в цитатник
любой флеш-мультик, как и вообще любое видео, состоит из кадров.
кадры во флеше бывают 3 видов: ключевые кадры, пустые ключевые кадры и промежуточные кадры.
любое движение происходит между двумя ключевыми кадрами. ключевых кадров может быть несколько подряд, тогда движение происходит сначала от первого ключевого кадра ко второму, затем от второго к третьему и так далее.
на верху есть панелька timeline, в правой ее части ты видишь цифры 1 5 10 15 20 и т.д. это и есть шкала кадров. под ними прямоугольники - это сами кадры. сначала у нас есть только один пустой ключевой кадр, самый первый (пустой ключевой кадр - это прямоугольничек и пустым кружком. видишь? если это не пустой ключевой кадр - тогда он будет показан прямоугольником с черным кружком. промежуточный кадр - совсем без кружка.)

попробуем.

нажми на первый кадр (изначально - пустой ключевой, то есть с белым кружком). нарисуй, например, линию. видишь, кадр перестал быть пустым, кружочек окрасился в черный цвет. теперь создадим еще один ключевой кадр (F6). появился наверху второй прямоугольничек с черным кружком. да? теперь нажми на этот прямоугольник (должно выделиться все, что нарисовано в этом кадре), а дальше - нарисуй еще одну линию. что получилось? в первом кадре есть 1 линия, во втором их уже 2. простейшая анимация (и самая сложная по трудоемкости) - как ты помнишь, покадровая, когда каждый кадр рисуется отдельно. у нас теперь - мультфильм из 2 кадров ;)
чтобы посмотреть, что получилось - нажми Ctrl+Enter. одна линия остается неподвижной (она есть в обоих кадрах), вторая - мигает (в первом ее нет, во втором - есть).
закрывай окно просмотра (только не всю программу - верхний крестик наверху справа - а одно это окно - нижний крестик наверху справа)
помнишь, как изменить частоту кадров? под линией кадров надпись 12.0 fps - нажимай туда 2 раза, и в открывшемся окошке и ячейке Frame Rate напиши 1
закрывай - и снова Ctrl+Enter. теперь кадры меняются с частотой 1 кадр в секунду. получилось?
теперь. перетащи второй ключевой кадр (в панельке timeline) под цифру 5. что получилось?
первый кадр - ключевой, с одной нарисованной линией. 2, 3 и 4 кадры - промежуточные, в них ничего пока не происходит (но линия эта остается на месте!). и в пятом ключевом - появляется вторая линия. посмотри, что получилось. по идее, 4 секунды должна быть только 1 линия, затем 1 секунду - 2 линии. и - заново.
теперь нажимаешь на 3 кадр, давишь F6 (создание ключевого кадра) - и рисуешь там еще одну линию.

1-2 кадры - одна линия, 3-4 - та же + еще одна, 5 - та же, из первого кадра + другая.

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

панелька tools - продолжение

Среда, 18 Февраля 2004 г. 16:09 + в цитатник
белая стрелка
нарисуй овал. выбери белую стрелку (первый ряд, 2я). нажми на контур нашего овала. видишь, появилась та самая бесконечно тонкая кривая, что на самом деде представляет из себя контур. на ней, синей тонкой линии, несколько белых точек. у меня их 8 штук.
вот можно сказать, что для рисования овала есть не одна кривая, в 8 таких кривых, лежащие между 8 парами точек.
если нарисуешь прямоугольник - таких линий будет всего 4. соответственно, и 4 точки.
если счватить за какую-нить точку, и потащить - будет вопервых двигаться эта точка, а во вторых - будут изгибаться выходящие из нее кривые. получается? и еще, можно тут же менять кривизну этих линий, не меняя положение точки. если нажать на точку, видишь - появились как-бы 4 "уса", 2 из самой точки и по одному - из соседних? на концах этих усиков - синие точки. подвигай их. кривая меняется ;) можно менять только крутизну изгиба, увеличивая этот "усик", можно и направление, с которого кривая подходит к точке, поворачивая его. получается?

лассо (2 строчка панельки tools, 2й инструмент)
это просто выделение областей, контуров и т.п. по произвольной кривой. нарисуй что-нибудь, потом выбери лассо и очерти то, что хочешь выделить. теперь, когда оно выделилось, ее можно, скажем, удалить, или перекрасить, или подвинуть, или залить другом цветом.




э-э. утомился я печатать. продолжим завтра.

2 вида кривых. области.

Среда, 18 Февраля 2004 г. 15:51 + в цитатник
(и чего я называю их областями? не могу русское слово вспомнить...)

итак, для рисования областей можно использовать все те же овал и прямоугольник (постирая контуры), а так же - Brush tool, 5 ряд, вторая. Кисточка.
В панельке properties - всего одна настройка. Цвет нашей кисточки.
Внизу панельки tools в разделе options появляются 4 настройки:

- brush mode - способ рисования. если уже есть какая-то область, можно рисовать "за ней", не наезжаа на нее, можно поверх нее, не выходя за ее границы, можно наплевав на нее рисовать над ней, иожно рисовать только внутри какой-либо выделенной области. нужно пока запомнить только 1 пункт (обычное рисование), 3й (рисовать "за"), 4й (рисовать внутри выделения) и 5й (рисовать "внутри").
попробуй нарисуй что-нибудь одним цветом, побольше ;) потом выбери другой цвет и порисуй, используя 1й brush mode. разноцветные области просто пересекаются. если рисовать 3й brush mode, и начать рисовать за границей первой нашей области, тогда при пересечении с ней она останется не тронутой. если 5й brush mode, а рисовать начать внутри первой области - тогда за ее границы выйти не получится. ню, получается?

- brush type - это форма нашей кисточки. тут вроде все понятно ;)

- brush size - размер кисточки. тоже очень просто все ;)

-lock fill - это "замочек". используется, если заливка не одного цвета, а, скажем, градиентная. об этом тоже можно чуть позже, когда посмотрим на правые панельки более внимательно ;)


тут же есть инструмент для стирания областей или их частей - ластик (8 ряд, второй).
первая настройка (в панельке tools в разделе options) - как у кисточки. или стирать внутри, или только наруже, или и там и там, или внутри какой-то выделенной области. справа от этой штуки - "кран". выбираешь его, потом нажимаешь на какую-то часть какой-нибудь области - и она вся стирается ;)
чуток ниже - можно выбрать форму нашего ластика.


7я строчка панельки tools - управление заливкой областей.
нарисуй область. выбери первый инструмент в 7 строчке - ink bottle.
чуток ниже есть раздел меню tools - называется colors. там можно выбрать 2 цвета, первый для контура (кстати, его ширину и форму можно менять внизу, как всегда - в properties), второй - для области. поменяй эти цвета, и нажми в любое место нарисованой тобою области. видишь, поменялись цвета? причем раньше контура не было, а теперь появился ;) это кажется единственный способ добавить области контур, если его нету.
выбери второй инструмент в 7 строчке - paint bucket. это то же самое, что ink bottle, только БЕЗ контуров.

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

2 вида кривых. линии.

Среда, 18 Февраля 2004 г. 15:00 + в цитатник
короче, бывает 2 вида кривых. линия и область.
для рисования линий в панельке tools:
line tool - второй ряд, первая. рисует просто прямые линии.
pen tool - третий ряд, первая. рисует кривые безье (по контрольным точкам, с направляющими всякими, об этом тоже чуток позже)
pensil tool - пятый раз, тож первая. обычный карандаш.
ну и овал и прямоугольник, если удалить все, что внутри контура.

про line все понятно - просто рисует прямую линию.
pensil, карандаш - тут есть 3 типа. нажимай на карандаш, внизу панельки tools появилось слово options, там одна кнопка. нажимаешь на нее - вот тебе 3 вида карандашей.
- straighten - это умный карандашь, который угадывает, что ты хочешь нарисовать. попробуй, выбери его и нарисуй круг, пусть и кривой. по идее он должен превратиться в нормальный овал. получилось? та же фигня будет и с многоугольниками, и с прямыми линиями, и с кривыми линиями. редко использую, честно говоря. потому что не угадаешь, что получится ;)
- smooth - это уже лучше. мой любимый. если рисовать им кривую - сделает минимум острых углов. сглаживает тряску рук ;) хорошая штука.
- ink - карандаш as is. что рисуешь, то и получается ;)

так, вроде все понятно с этим. попробуй разными карандашами рисовать разные линии. да, при выболе любого инструмента для рисования линий (line tool, pen tool, pensil tool, овалы и прямоугольники) ты можешь менять ее цвет, ширину и начертание - все на панельке Properties внизу.

фуф....... курить. и - про области поговорим.

панелька tools и панелька properties (2)

Среда, 18 Февраля 2004 г. 14:38 + в цитатник
да, нужно отметить, что когда ты рисуешь этот самый прямоугольник, ну или овал, у тебя рисуются одновременно 2 фигуры. первая - это контур, вторая - то, что внутри контура, "область". изначально они прикреплены друг к другу, но их можно расцепить, растащить друг от друга, например. или одну из них удалить, а вторая останется. контур - это линия бесконечно тонкая линия, у которой, как известно, площадь равна нулю, и какой бы она ширины и формы не была на твоем рисунке показана, векторно она описывается как бесконечно тонкая линия. вот, а область - это вторая фигура, у которой уже есть площадь.

окей. на панельке tools выбери черную стрелочку, теперь выдели все что у тебя нарисовано и нажми delete ;)
снова рисуй прямоугольник.
снова выбирай черную стрелку. что она может делать?
во-первых, это выделялка для какой-нибудь области на рисунке или выделялка кривой контура. если один раз кликнешь ей в центр твоего прямоугольника - выделится вся площадь этого прямоугольника, кроме контура. (если нажмешь delete - удалится все, кроме контура, только он и останется. если че - отмена, как всегда, Ctrl+Z). Если нажать 1 раз на контуре - выделится кусочек этого контура, одна сторона твоего прямоугольника. если 2 раза - выделится весь контур. опять же, если удалить - то останется только область, уже без контура. можно попробовать выделить область и перетащить ее куда-нибудь в другое место.

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

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

короче, 3 функции. перетаскивание крывых или областей, выделение и модификация кривых. фуф.
если че не понятно - спрашивай.

панелька tools и панелька properties

Среда, 18 Февраля 2004 г. 14:03 + в цитатник
слева висит панель tools - там собраны основные инструменты рисования.
внизу - панелька properties, содержимое которой меняется в зависимости от выбранного инструмента.
Если ничего в tools не выбрано, или выбраны 2 верхние стрелки, в properties показаны настройки для всего документа флеш. размер (550*400), формат публикования (Flash Player 6), цвет фона и частота кадров в секунду. Ой, забыл сказать. То, что по центру экрана - белый прямоугольник - это рабочая область нашего будущего мультика, то, что будет видно. (договоримся, всякое творение во флеш быдем называть мультиком, пускай даже это просто картинка, без анимации).
Так вот, нажимаем внизу на панельке Properties на кнопку size. тут важны 3 настройки. во-первых, размер мультика в пикселях, во-вторых - цвет фона, и, наконец, частота смены кадров. (цвет и частоту можно задать сразу на панели properties, можно и ту - не важно). если хочешь ты нарисовать баннер 468*60, ставишь ширину 468, высоту 60. ну и фон, какой надо. Жмешь ОК, и белый прямоугольник в центре экрана стал поход по размеру на баннер ;) (да, фпс можно пока не трогать, пусть будет 12)

вот. начнем с простого. на панельке tools выбираем кружок (1й в 4м ряду), это, как можно догадаться, инструмент для рисования овалов. видишь, изменилось содержимое панель Properties? Что мы там видим? цвет контура нашего овала, под ним - цвет заливки нашего овала, дальше - ширину контура, и тип линии, которой этот контур будет нарисован.
выбери какие-нибудь (РАЗНЫЕ) цвета для контура и заливки, ширину например 4, и тип линии какой-нибудь по-заковыристей. теперь на каком-нибудь месте рабочей области (та, которая 468*60, если рисуем баннер), и не отпуская веди в какую-нибудь другую точку. теперь отпускай.
получится овал, с заданными параметрами, цветами, шириной и т.п.
на панельке tools рядом с овалом - квадрат. это инструмент для рисования прямоугольников. все то же самое, что и для овала ;) попробуй.

анимация.

Среда, 18 Февраля 2004 г. 13:48 + в цитатник
флеш - это анимация. во флеше анимация бывает 2 видов.
покадровая анимация (как раньше мультики рисовали в "союзмультфильме") - это когда рисуешь каждый кадр отдельно. а потом эти кадры просто часто-часто сменяют друг друга.
и еще - анимация по "ключевым кадрам". например, нужно, чтобы круг превратился в квадрат за 10 кадров. для этого не нужно рисовать все 10 кадров, постепенно превращая наш круг в квадрат. для этого в первом кадре рисуется круг, а в последнем, десятом - квадрат. и флеш сам дорисовывает недостающие, промежуточные кадры. Такая анимация во флеше тоже бывает 2 видов, но об этом - позже.
вот еще что. fps, или Frame Rate - это скорость проигрывания анимации (количество кадров в секунду, frames per second). скажем, для кино или телевидения принятый стандарт - 24 кадра в секунду.

чуток теории.

Среда, 18 Февраля 2004 г. 13:26 + в цитатник
думаю, ты знаешь, что любая графика в интернете бывает 2 видов - векторная и растровая. растровая графика (упрощенно говоря) - это когда каждая точка, например, линии на рисунке, описывается отдельно. векторная - это когда вся эта линия задается формулой.
скажем, нужно нам нарисовать окружность с центром в какой-то точке и с заданным радиусом. на растровой картинке нужно будет каждую точку этой окружности описывать. Поскольку таких точек в окружности очень и очень много, файл с картинкой получится достаточно большой. в векторном же рисунке достаточно только указать координаты центра окружности, и ее радиус. вот...

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

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

шаг первый. настройка.

Среда, 18 Февраля 2004 г. 13:04 + в цитатник
для простоты предположим, что программа у тебя уже установлена.
я пользуюсь английской версией программы, чего и тебе рекомендую.
поехали, начинаем настраивать оболочку программы, чтобы творить было удобней. Да, желательно иметь разрешение монитора не менее 1024*768 и мышку ;)

Верхнее меню:
Window -> Panel sets -> Designer (1024*768). выбираем.
видишь справа несколько т.н. панелей: Info, Align, Transform и т.п.? по всем по ним пройдемся подробно чуток позже, сейчас развернем нужные, и свернем ненужные.
самая нижняя, Answers, нам нафиг не нужна. справа от названия "Answers" - с самого края белая хрень, похожая на список. нажимаем туда мышью, и выбираем "Close Panel". То же самое - с панелькой Components. закрываем ее.
остается 5 панелек справа (чтобы открыть какую-нибудь из них, один раз нажимаем на ее название, чтобы закрыть - снова нажимаем на название ;) все просто!) и одна панелька внизу - Properties.
вот, теперь в верхнем же меню Window -> Save Panel Layout. Пишешь имя настройки (ну например твой ник на ЛиРу) и сохраняешь. Теперь при включении программы у тебя панельки эти будут именно в таком виде, как надо.
уфф... покурим, и продолжим.

Первая запись

Среда, 18 Февраля 2004 г. 12:49 + в цитатник
Хочу рассказать, как пользоваться программой MacroMedia Flash MX для создания баннеров, мультиков, кнопочек и прочей лабуды. за одно и сам глядишь вспомню кой-чего ;)


Поиск сообщений в FLASH_MX
Страницы: [1] Календарь