• Авторизация
Дневник Нэллочка Лента друзей - Дневник - Полная версия


Урок. Sothink SWF Quicker 5.0 25-10-2011 19:51 к комментариям - к полной версии - понравилось!

Это цитата сообщения MissKcu Оригинальное сообщение



 

Урок по созданию секундомера.

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

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

И так приступим.

Откроем программу Sothink SWF Quicker, и зададим следующие параметры: ширина 300 пикселей, высота 100 пикселей, Frame Rate = 12. Цвет фона можете выбрать любой. Я выбрал #FFFFE7.

1. Для изготовления секундомера и кнопок нам потребуется 6 слоев.

Добавьте на временной шкале 5 слоев к имеющемуся первому.

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

2. Нам необходимо создать три кнопки например вот такого вида:

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

3. Подробно в этом уроке мы не будем рассматривать как создаются кнопки. Кому необходимо вспомнить, или просмотреть их создание смотрите уроки здесь.

4.Созданные три кнопки размещаем на сцене примерно так как вы видите на рисунке ниже:

Каждой кнопке на панели свойств присваиваеи соответствующее имя:

На рисунке выше Вы видите, что кнопке «Старт» присвоено имя play_btn. Соответственно кнопкам «Стоп» и «Сброс» присваиваем имена: stop_btn и  reset_btn.

5. В следующем, четвертом слое мы зададим какой-либо фон для отображения цифр секундомера. Можно нарисовать любой, с линейным стилем заливки. Я например выбрал такой:

6. Переходим в первый кадр пятого слоя, выбираем инструмент «Текст» (T), тип – динамический, шрифт можете выбрать любой. Я выбрал Arial, черного цвета, размером 38. См. рисунок ниже:

Задаем в поле Name имя display_txt. И вводим с клавиатуры нули и разделяющие их двоеточия, так как на рисунке ниже.

Подготовительная работа на этом закончена.

7. Переходим в слой Action Layer и в первый кадр вставляем такой код:

Timer = function (start)
{
this.reset(start);
};
Timer.prototype.start = function ()
{
var _loc1 = this;
if (_loc1._pauseTime)
{
_loc1._startTime = _loc1._startTime + (getTimer() - _loc1._pauseTime);
_loc1._pauseTime = 0;
return;
} // end if
_loc1.reset(true);
};
Timer.prototype.stop = function ()
{
if (!this._pauseTime)
{
this._pauseTime = getTimer();
} // end if
};
Timer.prototype.reset = function (restart)
{
var _loc1 = this;
_loc1._startTime = getTimer();
if (!_loc1._startTime)
{
_loc1._startTime = 1;
} // end if
if (restart)
{
_loc1._pauseTime = 0;
return;
} // end if
_loc1._pauseTime = _loc1._startTime;
};
Timer.prototype.getTime = function ()
{
var _loc2 = this;
if (_loc2._pauseTime)
{
return (_loc2._pauseTime - _loc2._startTime);
} // end if
var _loc1 = getTimer();
if (!_loc1)
{
_loc1 = 1;
} // end if
return (_loc1 - _loc2._startTime);
};
Timer.prototype.setTime = function (t)
{
this._startTime = getTimer() - t;
};
Timer.prototype.addProperty("time", Timer.prototype.getTime, Timer.prototype.setTime);
Timer.prototype.getPaused = function ()
{
return (this._pauseTime ? (true) : (false));
};
Timer.prototype.setPaused = function (p)
{
var _loc1 = this;
if (p == Boolean(_loc1._pauseTime))
{
return (false);
} // end if
if (p)
{
_loc1.stop();
}
else
{
_loc1.start();
} // end else if
return (function (p)
{
});
};
Timer.prototype.addProperty("paused", Timer.prototype.getPaused, Timer.prototype.setPaused);
function formatTime(milliseconds)
{
var _loc1 = Math.floor(milliseconds / 10);
var _loc2 = Math.floor(_loc1 / 100);
var _loc3 = Math.floor(_loc2 / 60);
_loc1 = _loc1 % 100;
_loc2 = _loc2 % 60;
_loc3 = _loc3 % 60;
if (_loc1 < 10)
{
_loc1 = "0" + _loc1;
} // end if
if (_loc2 < 10)
{
_loc2 = "0" + _loc2;
} // end if
if (_loc3 < 10)
{
_loc3 = "0" + _loc3;
} // end if
return (_loc3 + ":" + _loc2 + ":" + _loc1);
} // End of the function
var clock_timer = new Timer();
this.onEnterFrame = function ()
{
display_txt.text = formatTime(clock_timer.time);
};
stop_btn.onRelease = function ()
{
clock_timer.stop();
};
play_btn.onRelease = function ()
{
if (clock_timer.paused)
{
clock_timer.start();
} // end if
};
reset_btn.onRelease = function ()
{
clock_timer.reset(!clock_timer.paused);

};

Всё! На этом работа по созданию секундомера, и нужных кнопок закончена. Нажимаем Ctrl + Enter и тестируем что у нас получилось.

вверх^ к полной версии понравилось! в evernote


Вы сейчас не можете прокомментировать это сообщение.

Дневник Урок. Sothink SWF Quicker 5.0 | Нэллочка - Дневник Нэллочка | Лента друзей Нэллочка / Полная версия Добавить в друзья Страницы: раньше»