Создать flash маску

Сегодня будем учиться создавать flash маску. Она позволит вам создавать объекты через которые будет видно нижележащий слой. Такой подход часто используется в создании рекламы в Интернете.

Пример:
Перетащи мышью звезду...

Шаг 1 

Найди рисунок который будет использоваться на фоне.

Шаг 2

Создай новый документ flash. Нажми в новом документе комбинацию клавиш Ctrl + J и выбери произвольный размер ролика, цвет фона черный, скорость ролика 34 и жми ОК.

Шаг 3

Дважды щелкни на названии слоя Layer 1 который находится в панели Time Line и измени имя на удобное для тебя.

Шаг 4

Теперь импортируй фоновый рисунок в наш слой. Для этого выбери File > Import > Import to stage (Ctrl+R) и найди подходящую картинку.

Шаг 5

Не снимая выделения с картинки нажми F8, что бы преобразовать рисунок в Movie Clip. Делаем как на рисунке и жмем ОК.

 

Шаг 6

Теперь выровняем наш рисунок на сцене. Для этого воспользуемся выравниванием. Жмем сочетание клавиш (Ctrl + K), смотрим что бы to stage был включен. И затем нажимаем на остальные показанные кнопки в любом порядке.

Шаг 7

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

Шаг 8

Создайте новый слой на панели Time Line, он должен быть выше слоя с картинкой. Нарисуй форму звезды как показано на картинке.

Шаг 9

Теперь преобразуем нашу звезду в Movie Clip. Для этого выделяем её, нажимаем F8 и делаем так, как показано на рисунке.

Шаг 10

Даём название нашей звезде star_mc это делаем в панели Properties.

 Шаг 11

Создайте ещё один слой, который будет выше всех предыдущих слоёв. Назовите его например, action script. После этого выдели первый кадр слоя нажми клавишу F9. В появившееся поле вставь этот код:

image_mc.setMask(star_mc);
star_mc.onPress = function() {
startDrag(this);
}
star_mc.onRelease = function() {
stopDrag();
}

Вот и весь урок!

Для проверки результата нажмите комбинацию клавиш (Ctrl + Enter).

Flash исходник урока.

Вставка курсора во Flash

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

Пример:


Шаг 1

Начинаем урок как всегда, с создания нового flash документа. Создаем наш документ и нажимаем на клавиатуре Ctrl + J. В появившемся окне свойств документа выбираем любой фон и размер нашего документа, частоту кадров ставим 26 и жмем ОК.

Шаг 2


Используя flash инструменты, нарисуйте курсор будущего курсора.

Шаг 3

Выделяем получившийся курсор и жмем F8. Появиться окно по преобразованию объекта. В нем мы преобразуем наш курсор в объект Movie Clip. Делаем как показано на рисунке и жмем ОК.

Шаг 4

Не снимая выделения с нашего курсора, заходим в нижнюю панель Properties. Называем наш курсор cursor_mc, в дальнейшем к этому имени будет привязан Action Script.

Шаг 5

Теперь создай новый слой, который будет выше слоя Layer 1 и назови его action. Как понятно из названия, тут будет располагаться наш скрипт вызывающий курсор.

Шаг 6
Выдели первый кадр слоя action и нажми на клавиатуре F9. Появиться панель для ввода Action Script, туда скопируй данный код:

Mouse.hide();
cursor_mc.startDrag(true);

Наш flash ролик со встроенным курсором готов! Неправда ли просто?

Скачать исходник урока.

Прыгающая Flash картинка

Сейчас мы с тобой создадим эффект прыгающего изображения на flash. При наведении на объект flash, наша картинка будет “выпрыгивать” вверх и пружинить. Выглядит эффект красиво и вполне может применяться в различных баннерах и рекламных объявлениях на твоём проекте.

Пример:

Наведите курсор мыши на фотографию, чтобы увидеть эффект...

Шаг 1

Создайте новый документ Flash. Нажмите Ctrl + J клавишу на клавиатуре (Свойства документа) и установи размер твоего документа (размеры укажи произвольно). Выберите любой цвет фона. Установи скорость Flash фильма 35 и нажмите кнопку ОК.

Шаг 2

Выберите сейчас File > Import > Import to stage (Ctrl+R) и выбери любое фото над которым хочешь поэкспериментировать.

Шаг 3

Пока вставленное вами фото ещё выделено, нажмите клавишу F8 (преобразуем его в Movie Clip). Называем наш клип так как показано на фото и жмем ОК.

Шаг 4

Не снимая выделения с получившегося клипа, заходим в свойства нашего объекта, для этого открываем нижнюю панель с названием Properties. С левой стороны, ты найдешь поле для ввода названия клипа. Назовем его photo_mc.

Шаг 5

Выбери первый кадр слоя Layer 1, перейдите на панель Action Script (F9) и введи этот код:

import fl.transitions.*;  
import fl.transitions.easing.*;  

photo_mc.addEventListener(MouseEvent.MOUSE_OVER, doMouseOver);  
photo_mc.addEventListener(MouseEvent.MOUSE_OUT, doMouseOut);  
function doMouseOver(event:MouseEvent):void {  
var xT:Tween = new Tween(photo_mc, "scaleX", Bounce.easeOut, photo_mc.scaleX, 1, 2, true);  

var yT:Tween = new Tween(photo_mc, "scaleY", Bounce.easeOut, photo_mc.scaleY, 1, 2, true);  
}  
function doMouseOut(event:MouseEvent):void {  

var xT:Tween = new Tween(photo_mc, "scaleX", Bounce.easeOut, photo_mc.scaleX, .5, 2, true);  

var yT:Tween = new Tween(photo_mc, "scaleY", Bounce.easeOut, photo_mc.scaleY, .5, 2, true);  
}

Вот и весь урок, для скачивания flash исходника жми сюда.

Сделать Flash рисовалку

Сегодня мы создадим рисовалку на Flash. Flash ролик будет представлять рабочее поле, на котором можно будет рисовать мышью. Ни каких дополнительных наворотов мы делать не будем. Всё будет быстро и просто.

Пример:
Нарисуй что-нибудь...

Шаг 1

Создайте новый документ и назначьте цвет фона - черный (#000000)

Шаг 2

Назначьте подходящее имя слою которое сейчас называется Layer 1

Шаг 3

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

var drawing:Boolean = false;
this.graphics.lineStyle(1, 0xFFFFFF);
this.graphics.moveTo(mouseX, mouseY);
this.addEventListener(Event.ENTER_FRAME, onLoop, false, 0, true);
stage.addEventListener(MouseEvent.MOUSE_DOWN, onDown, false, 0,
true);
stage.addEventListener(MouseEvent.MOUSE_UP, onUp, false, 0, true);
function onDown(evt:MouseEvent):void {
drawing = true;
}
function onUp(evt:MouseEvent):void {
drawing = false;
}
function onLoop(evt:Event):void {
if (drawing) {
this.graphics.lineTo(mouseX, mouseY);
} else {
this.graphics.moveTo(mouseX, mouseY);
}
}

Наша рисовалка готова, для ленивых выкладываю flash исходник.

Flash слайдер

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

Пример:

Шаг 1 Скачиваем картинки-исходники от сюда

Шаг 2 Создаем в программе новый Flash документ. В документе редактируем его свойства, нажав Ctrl + J. Учтанавливаем ширину нашего документа равной 250 (width) и высотой 250 (height). Цвет фона выбираем #999999, а скорость ролика 32 и жмем ОК.

Шаг 3 На временной шкале проигрывания ролика, меняем название слоя (Layer 1), на любое понравившееся вам название (это не обязательно, просто приучайтесь к порядку).

Шаг 4 Добавляем в библиотеку наши рисунки для дальнейшей работы с ними. Заходим File > Import > Import to Library, в появившемся окне выделяем все фотографии (используя клавишу schift). Теперь открываем flash библиотеку (нажимаем комбинацию кнопок Ctrl + L) и видим там наши импортированные рисунки.

Шаг 5 Выбери инструмент Selection Tool (V) и перетащи файл за файлом на рабочий стол так, как показано на рисунке.

Шаг 6 Выделяем все фотографии и нажимаем клавишу F8. Преобразовываем таким образом объект в Movie Clip. Не забудте указать регистрацию так, как показано на рисунке, по середине вверху.

Шаг 7 Не снимая выделения с объекта Movie Clip, заходим в нижнюю часть свойств объекта (Properties) и ставим название новоиспеченному клипу photos_mc.

Шаг 8 Создайте новый слой в нашей сцене и назовите его action script code. Судя по названию, ты уже догадался, что там будет располагаться код осуществляющий перемотку наших изображений.

Шаг 9 Выдели первый кадр недавно созданного слоя и нажми F9. Появиться панель для ввода кода, скопируй туда вот этот код.

var verticalCenter:Number = stage.stageHeight / 4;
var limit:Number = stage.stageHeight - photos_mc.height; 
var speed:Number = 0.1;
var scrollY:Number = 1;

addEventListener(Event.ENTER_FRAME, scrollphotos);

function scrollphotos(e:Event):void {
scrollY = - speed * ( mouseY - verticalCenter );
photos_mc.y+= scrollY;
if (photos_mc.y>0.8) { photos_mc.y= 0.8;}
else if (photos_mc.y< limit) { photos_mc.y= limit; }
}

Вот исходник для тех, кто не любит делать сам.

Приятных экспериментов.

Flash подсказки

Данная статья будет посвящена добавлению комментариев во Flash ролик. При наведении мышью на картинку, через пару секунд появиться подсказка, которая будет следовать за мышью. Через данный урок ты так же узнаешь, как добавлять фото в ролик, как преобразовывать фото в movie clip и многое другое.

Наведите курсор на миниатюру фотографии!

Шаг 1

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

Шаг 2

Создайте новый документ Flash. Нажмите Ctrl + J клавишу на клавиатуре (Свойства документа) и установите ширину вашего документа 450 пикселей и высотой 500 пикселей. Выберите затухающий цвет фона. Установите скорость проигрывания ролика 26.

Шаг 3

Выберите File > Import > Import to Library. В файле окно проводника, которое появится, найди 6 мини-картинок которые ты скачал(а) у меня, выдели все используя зажатую клавишу Shift. Затем нажми кнопку Открыть. Если сейчас открыть флэш библиотеку (Ctrl + L ), вы увидите шесть миниатюр автомобилей.

Шаг 4

Используя Selection Tool (V) перетащите миниатюры рисунков с флэш библиотеки, на рабочее поле и разместите их на позиции, как это показано на рисунке ниже!

Шаг 5

Выберите Selection Tool (V) и выделите первую миниатюру с автомобилем. После этого, нажмите клавишу F8 (Преобразовать в символ), чтобы превратить его в символ Movie Clip.

Шаг 6

Пока вновь созданный клип остается выделенным произведем некоторые действия. Внизу, на вкладке свойств объекта, есть поле для ввода имени для Movie Clip. Назовем его thumb1.

Шаг 7

Теперь повторим вышеописанные действия для всех миниатюр называя их thumb2, thumb3 и т.д

Шаг 8

Создайте новый слой, который будет выше слоя Layer1 и назовите его Tooltip (что переводиться как «подсказка»).

Шаг 9

Выберите слой Tooltip и создайте нашу будущую подсказку.

Шаг 10

Выберите Текст Tool (A) и перейдите к свойства панели (Ctrl + F3) которая находиться под рабочим полем программы.. Внесите изменения как показано на рисунке:

Затем размести текстовое поле так, как показано ниже.

Шаг 11

Сделайте так, как показано на рисунке. Отцентруйте текстовое поле, нажав на соответствующую иконку (на рисунке иконка уже нажата).

Шаг 12

Дайте название вашему динамическому текстовому полю, так как на рисунке.

Шаг 13

Выделите все подсказки и нажми на клавишу F8 (Преобразовать в символ), чтобы превратить его в символ Movie Clip.

Шаг 14

Затем назови получившиеся клипы так, как показано на рисунке.

Шаг 15

Создайте новый слой выше слоя подсказки и назовите его Action (с англ. «Действие»).

Шаг 16

Выберите первый кадр Action и перейдите к панели AS (F9). Затем введите этот код в панель действий:

tooltip._visible = false;







var tipInt;







thumb1.onRollOver = function() {



tipInt = setInterval(showTip,100,"Audi R8");



}







thumb1.onRollOut = function() {



hideTip();



}







thumb2.onRollOver = function() {



tipInt = setInterval(showTip,100,"Bentley");



}







thumb2.onRollOut = function() {



hideTip();



}







thumb3.onRollOver = function() {



tipInt = setInterval(showTip,100,"BMW");



}







thumb3.onRollOut = function() {



hideTip();



}







thumb4.onRollOver = function() {



tipInt = setInterval(showTip,100,"Lamborghini");



}







thumb4.onRollOut = function() {



hideTip();



}







thumb5.onRollOver = function() {



tipInt = setInterval(showTip,100,"Mercedes");



}







thumb5.onRollOut = function() {



hideTip();



}







thumb6.onRollOver = function() {



tipInt = setInterval(showTip,100,"VW Touareg");



}







thumb6.onRollOut = function() {



hideTip();



}







var count = 0;







function showTip(tiptext) {



if(count == 5) {



clearInterval(tipInt);



count = 0;



tooltip.tiptext.text = tiptext;



tooltip._x = _root._xmouse;



tooltip._y = _root._ymouse;



tooltip._visible = true;



_root.onMouseMove = function() {



tooltip._x = _root._xmouse;



tooltip._y = _root._ymouse;



updateAfterEvent();



}



}







else {



count++;



}



}







function hideTip() {



clearInterval(tipInt);



tooltip._visible = false;



delete _root.onMouseMove;



}

Скачать исходник

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

Вставить карту Google на сайт

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

1.Этот код ставим в "тело" страницы между тегами Body.

<body onload='load()' onunload='GUnload()'>
<div id='map' style='width: 100%; height: 200px'></div>
</body>

Ширину, как видно из кода, поставил 100% что бы карта подстраивалась под размер сайта. Высоту назначил 200 пикселей.

2.Эту часть кода вставляем в "шапку" сайта между тегами Heder

<script src='http://maps.google.com/maps?file=api&v=2&key=vash kly4 v GOOGLE' type='text/javascript'></script><script type='text/javascript'>
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById('map'));
GEvent.addListener(map, 'moveend', function() {
var center = map.getCenter();
document.getElementById('message').innerHTML = center.toString();
});
map.setCenter(new GLatLng(61.78, 34.36), 13);
}
}
//]]>
</script>

ВАШ КОД ПОЛУЧЕННЫЙ В GOOGLE - на это место нужно вставить ключ полученный в Google. Здесь получить ключ http://code.google.com/intl/ru/apis/maps/signup.html

map.setCenter(new GLatLng(61.78, 34.36), 13); - Здесь задается широта и долгота центра изображаемого фрагмента карты, а также параметр "увеличение" (сейчас 13), благодаря которому вы можете задавать степень детализации отображаемого фрагмента. Координаты своего города можете найти в поисковике. Сейчас стоит город Петрозаводск.

Творческих успехов.

Графики на jQuery

Подборка графиков на jQuery. Они очень пригодятся для разработки бизнес сайта и стильно украсят пустующее место. Графики связываются с таблицами, что позволяет изменять данные налету.  Все графики сделаны в стиле web 2.0.

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