Тема 11. Створення анімації в Delphi

Анімація – це комп’ютерне виконання еффекту руху або видозміна об’єктів в часі. Алгоритм програми, як правило, складається з наступних кроків:

• прорисовка об’єкту

• відрахунок інтервалу часу

• заповнення об’єкту фоновою заливкою

• малювання нового зображення із зміною положення або форми

П

Виклик процедури обробки події тіка таймера виконується через команду інспектора об’єктів: Events/OnTimer для компоненту Timer1.

Код програми данної процедури буде виконуватись кожен раз через рівні проміжки часу лічильника таймеру, задані у властивості Interval.

риклад

// по формі рухається поморанчевий кулька

procedure TForm1.Timer1Timer(Sender: TObject);

begin // малюємо коло кольором фону форми

with Canvas do

begin

Pen.Color:=Form1.Color;

Brush.Color:=Form1.Color;

Ellipse(kx-kr,ky-kr,kx+kr,ky+kr);

end;

inc(kx); // сдвигаємо координату по осі Х на 1 малюємо коло довільним

// кольором на новому місці

with Canvas do

begin

Pen.Color:=4227327;

Brush.Color:= 4227327;

Ellipse(kx-kr,ky-kr,kx+kr,ky+kr);

end; end;

Лабораторна робота № 14 «Створення проекту «Графічний конструктор»»

Мета: 1. Навчитися створювати графічні малюнки з використанням ефектів анімації.

2. Познайомитися з засобами середовища Delphi, які забезпечують виведення стандартних зображень впродовж певного інтервалу часу.

Завдання. Створити програму, за допомогою якої користувач зміг би із запропонованого набору фігур зібрати та розфарбувати машин­ку, повантажити на неї мишку та відправити її у дорогу. «Урочисту» подію старту відзначити святковим салютом.

Аналіз проекту. Для створення графічного конструктора необхід­но познайомитись із засобами середовища Delphi, які забезпечують виве­дення анімованих стандартних зображень впродовж певного інтервалу часу, причому користувач повинен мати змогу спостерігти за ходом цьо­го процесу.

Для розробки цього проекту скористаємось такими компонентами Delphi:

• Animate (вкладка Win32 палітри компонентів) - анімація, що ви­користовується для виведення стандартних відеокліпів ОС Windows та «німих» відеофайлів *.avi;

• Timer (вкладка System палітри компонентів) - таймер. Використо­вується для відліку інтервалів реального часу;

• ProgressBar (вкладка Win32 палітри компонентів) - індикатор процесу, задопомогою якого можна відображати перебіг виконання певного процесу, наприклад копіювання даних на дискету.

• Для збирання машинки основне поле форми відведемо під компонент Panel, але в цьому проекті компонент Panel використовуватиметься для об'єднан­ня кількох компонентів.

На цьому компоненті будемо розміщувати деталі конструктора: різні види компонента Shape (вкладка Additional палітри компонентів) - фігу­ра, компонент Image та компонент Label. Для того, щоб ці компоненти були «прив'язані» до компонента Panel, необхідно спочатку розмістити на формі цей компонент, а потім з палітри компонентів розміщувати дочірні компоненти.

Для організації перетягування фігур скористаємось комбінацією об­робки подій: «кнопка миші натиснута», «кнопка миші утримується», «кноп­ка миші відпущена».

Як відомо, до складу ОС Windows входять типові діалогові вікна (вікна вибору: файла, шрифту, кольору, настройки принтера тощо). У цьому проекті ми використаємо засіб Delphi, який дає змогу організувати вик­лик стандартних вікон Windows (додати до проекту невізуальні компонен­ти вкладки Dialogs).

Робота зі стандартним діалоговий вікном відбувається у 3 етапи:

1. Розміщення на формі відповідного компонента з палітри Dialogs, наприклад ColorDialogl - діалогове вікно вибору кольору.

2. Виклик методу Execute, який створює та відображує на екрані це діалогове вікно. Цей метод зазвичай викликається всередині обробки якоїсь події, наприклад, у процедурі опрацювання натискання на компоненті Shape правою кнопкою миші. Тільки після звернення до методу Execute на екрані з'являється відповідне діалогове вікно. Це вікно смодальним, тому одразу після звернення до методу Execute виконання програми припиняється доти, доки користувач не закриє вікно. Оскільки Execute — логічна функція, то вона повертає в програму значення True, якщо у вікні діалогу було натиснутоОК.

3. Аналіз результату роботи методу Execute та використання введе­них у діалоговому вікні даних - імені файла, вибраного кольору, вибра­ного шрифту тощо.

Алгоритм розробки проекту

1. Створити папку D:\Delphi\Pract_17.

2. Створити новий проект.

3. Розмістити на формі компоненти Labell, Panell, BitBtnl (рис. 1). Встановити цим компонентам властивості за табл. 1.

Рис.1

Таблиця 1

Компонент	Вкладка вікна Object Inspector	Properties / Events	Значення властивості/обробка події (тіло процедури обробки події)
Label1	Properties	AutoSize	False
		WordWrap	True
		Caption	Збери машинку. Повантаж мишку на машинку та натисни «Готово».
Panel1	Properties	Caption	<Чисте поле>
		AutoSize	False
		Ctl3D	False (відключення тривимірного зображення)
BitBtn1	Properties	Color	clBtnFase (колір об’єкта збігається з кольором форми)
		Kind	blAll
		Caption	Готово

Пояснення. Кнопка «Готово» запускатиме салют і відправлятиме миш­ку в дорогу.

4. Компоненту Рапеl1 надати такого розміру, щоб він зайняв всю фор­му від компонента Label1 до кнопки BitBtn1. На панелі Рапеl1 розміститигеометричні фігури Shapel-Shape3 (три прямокутника: кузов, кабіна,вікно кабіни) та Shape4, Shape5 — два кола (колеса). Для встановленнявиду фігури використати властивість Shape, для встановлення стилю такольору зафарбовування використати властивості Brush.Color,Brush.Style, для встановлення кольору та типу лінії контуру використативластивості Pen.Color, Pen. Style. На компоненті Рапеl1 розмістити такіоб'єкти, як на табл. 2.

Таблиця 2

Компонент	Вкладка вікна Object Inspector	Properties/Events	Значення властивості/обробка події (тіло процедури обробки події)
Label2	Properties	Caption	Миші (напис для кузова)
Image1	Properties	Picture	Відкрити графічний файл з зображенням миші

Зауваження. Якщо планується, що при конструюванні машинки одні об'єкти будуть накладатися на інші (наприклад, вікно кабіни на кабіну), то встановити порядок розташування об'єктів: активізувати об'єкт, виклика­ти правою кнопкою миші контекстне меню, вибрати Компонент. Зробити нижнім (верхнім).

5. Для всіх компонентів, розміщених на панелі Рапеl1, запрограмува­ти перетягування об'єктів по панелі. Для цього створити для цих компонентів процедури опрацювання подій OnMouseDown (кнопку натиснуто), OnMouseMove (кнопка миші утримується натиснутою), OnMouseUp(кнопку відпущено):

procedure TForml.Label2MouseUp(Sender: TObject; Button: TMouseButton;Shift: TShiftState; X, У: Integer) ;

begin

flag:=False;

end;

procedure TForml.Label2MouseDown(Sender: TObject; Button: TMouseButton; Shift: TShiftState; X, Y: Integer);

begin

xl:=x;yl:=y; flag:=True;

end;

procedure TForml.Label2MouseMove(Sender: TObject; Shift: TShiftState; X, Y: Integer);

begin

if flag then with TShape (sender) do begin Left:=Left+x-xl;Top:=Top+y-yl; end;

end;

Пояснення. Якщо під час виконання програми кнопка миші буде натиснута в той час, коли її курсор знаходиться в області компонента Label2, змінні х1 і х2 запам'ятають координати розміщення фігури, а прапорець flag отримає значення True, що означатиме «перетягу­вання почалось». Якщо кнопку миші не відпускати й рухатись, то пра­цюватиме процедура TForm1. Label2MouseMove, в якій відбувати­меться перерахування координат об'єкта Label1 стосовно системи ко­ординат форми.

Після того, як кнопка миші буде відпущена, спрацює процедура TForm1. Label2MouseUp, де прапорець flag отримає значення False —перетягування закінчилось.

6. Зберегти проект.

7. Запустити проект та перевірити правильність його виконання: перетягуючи об'єкти на панелі — зібрати машинку та повантажити мишку на машинку. Кнопка «Готово» поки не працює.

8. Розмістити на формі об'єкт Animate1 (праворуч або ліворуч від компонента Label1) — для відображення відеокліпу. Розмістити в будь-якому місці форми об'єкт Timer1 —для відліку інтервалів часу.Таймер включається при присвоєнні значення True його властивості Enabled і виключається, коли виконується Timer1.Enabled:=False;

9. Поруч з кнопкою «Готово» розмістити об'єкт ProgressBar1 — для відображення процесу анімації. Цей об'єкт використовується для відображення виконання тривалого процесу, який починається з мо­менту включення таймера. Його властивості Міп та Мах — значення діапазону зміни. Властивість Position містить поточне значення вели­чини (рис. 22).

10. Встановити об'єктам такі властивості (табл. 3).

Компонент	Вкладка вікна Object Inspector	Properties / Events	Значення властивості/обробка події (тіло процедури обробки події)
Animate1	Properties	Active	False
		AutoSize	True
		Visible	False
Timer1	Properties	Interval	500
		Enabled	False
ProgressBar1	Properties	Visible	False–на початку роботи програми компонент невидимий
		Max	10

11. Для кнопки «Готово» створити процедуру обробки події OnClick:

Label1.Font.Color:=clblue;

Label1.Caption:='Щасливої дороги!';

Animate1.FileName:=’C:\Program Files\MicrosoftOffice\media\officel0\MMEDIA\Firework.avi';

Animatel.Active:=True;

Animate1.visible:=True;

Timer1.Enabled:=True;

ProgressBar1.Visible:=True;

ProgressBar1.show;

12. Для таймера створити процедуру обробки події OnTimer (для цього у вікні Інспектор об'єктів на вкладці Events (Події) двічі клікнути у полі праворуч від події OnTimer):

ProgressBar1.Position:=ProgressBar1.Position+1;

if ProgressBar1.Position>=ProgressBar1.max then

begin

Timer1.enabled:=False;

ProgressBar1.Position:=0;

ProgressBar1.hide;

Animate1.Stop;

end;

13. Зберегти проект в папці D:\Delphi\Pract_17.

14. Запустити проект та перевірити правильність його виконання (рис. 22).

Завдання для самостійного виконання

1. Помістити на форму кнопку «Повторити», натискання на яку за­безпечувало б нове розміщення фігур та можливість повторного конст­руювання малюнка.

Підказка. Для форми Forml створити процедуру опрацювання події OnCreate, що містила б процедуру: Randomize;

Для кнопки «Повторити» створити процедуру опрацювання події OnClick, в якій для компонентів, що пересуваються, установити нові зна­чення властивостям Left і Тор, використавши при цьому функцію Random.

2. Доповнити програму можливістю розфарбовувати фігурки, з яких складається машинка.

Підказка. Розмістити на формі компонент ColorDialog1 (вкладка палітри компонентів Dialogs). Для всіх деталей машини Shapel- Shape5 ство­рити свою процедуру опрацювання події OnConTextPopup — виклик пра­ною кнопкою миші контекстного меню. В цій процедурі розмістити опе­ратори по роботі зі стандартним діалоговим вікном вибору кольору:

procedure TForml.ShapelConTextPopup(Sender: TObject; MousePos: TPoint;

var Handled: Boolean);

begin

if ColorDialogl.Execute then Shapel.Brush.Color:= ColorDialogl.Color;

end;

3. Доповнити програму рухом машинки за натисканням на кнопку «Готово».

Підказка. Розмістити в процедурі TForm1. Timer1Timer зміну значення властивості Left компонента Panel1.

Лістинг програми:

unit Unitl;

interface

uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialogs, ExtCtrls, jpeg, StdCtrls, Buttons, ComCtrls;

type

private

public

end;

var

Forml: TForml;

x1,y1:integer;

flag:boolean=False;

implementation {$R *.dfm}

procedure TForm1.ShapeIMouseDown(Sender: TObject; Button: TMouseButton;

Shift: TShiftState; X, Y: Integer);

begin

x1:=x;у1:=y; flag:=True;

end;

procedure TForml.ShapelMouseMove(Sender: TObject; Shift: TShiftState; X,

Y: Integer);

begin

if flag then with TShape (sender) do begin Left:=Left+x-x1; Top:=Top+y-y1; end;

end;

procedure TForml.Shape1MouseUp(Sender: TObject; Button: TMouseButton;

Shift: TShiftState; X, Y: Integer);

begin

flag:=False; end; {процедури для пересування компонентів Shape2-Shape5, Image1, Label2}

procedure TForm1.BitBtn1Click(Sender: TObject);

begin

Label1.Font.Color:=clblue;

Label1.Caption: = ‘Щасливої дороги!';

Animate1.FileName:=’С:\ProgramFiles\MicrosoftOffice\media\office10\MMEDIA\Firework.avi';

Animate1.Active:=True;

Animate1.visible:=True;

Timer1.Enabled:=True;

ProgressBar1.Visible:=True;

ProgressBar1.show;

end;

procedure TForm1.TimerlTimer(Sender: TObject);

var

h:integer;

begin

ProgressBar1.Position:=ProgressBar1.Position+1;

h:=round(Panel1.Width/ProgressBar1.Max);

If Shape1.Left<Shape2.Left then Panel1.Left:=Panel1.Left-h {рух машинки}

else Panel1.Left:=Panel1.Left+h;

if ProgressBarl.Position>=ProgressBar1.max then

begin

Timer1.enabled:=False;

ProgressBar1.Position:=0;

ProgressBar1.hide;

Animate1.Stop;

end;end;

procedure TForm1.BitBtn2Click(Sender: TObject); {натискання на кнопку «Повторити»}

begin

Label1.Caption:='Збери і розфарбуй машинку. Завантаж мишку на машинку та натисни "Готово"';

PanelI.Left:=0;

Image1.Top:=random(Panel1.Height)+10; Image1.Left:=random(Panel1.Width)+10;

Label2.Top:=random(Panel1.Height)+10; Label2.Left:=random(Panel1.Width)+10;

Shape1.Top:=random(Panel1.Height)+10; Shape1.Left:=random(Panel1.Width)+10;

Shape2.Top:=random(Panel1.Height)+10; Shape2.Left:=random(Panel1.Width)+10;

Shape3.Top:=random(Panel1.Height)+10; Shape3.Left:=random(Panel1.Width)+10;

Shape4.Top:=random(Panel1.Height)+10; Shape4.Left:=random(Panel1.Width)+10 ;

Shape5.Top:=random(Panel1 . Height)+10; Shape5.Left:=random(Panel1.Width)+10;

end;

procedure TForml1.Shape1ConTextPopup(Sender: TObject; MousePos: TPoint; var Handled: Boolean); {виклик правою кнопкою мишки стандартного діалогового вікна вибору кольору для Shape1}

begin

if ColorDialog1.Execute then Shape1.Brush.Color:= ColorDialog1.Color;

end; {виклик стандартного діалогового вікна вибору кольору для Shape2-Shape5}

procedure TForm1.FormCreate(Sender: TObject); begin

randomize;

end; end.

4. Створити проект, у якому з набору будівельних елементів користувач може побудувати будинок, потяг, комп'ютер, шпаківню тощо.