Windows Controls: The Animation Control

	Windows Controls: The Animation Control

Introduction to the Animation Control

Overview

An animation is a series of pictures put together to produce a video clip. It can be used to display the evolution of an ongoing task to the user. This makes such tasks less boring. For example, making a copy of a CD is usually a long process that can take minutes. To let the user know when such a task is being performed, you can display an animation.

Microsoft Windows provides a few small animations you can use for your applications. If you need an animation other than those supplied, you may have to create it. Microsoft Visual C++ is not the place to create an animation. You may need a graphics software to do this.

To use a regular animation, the video must be a standard Microsoft Windows audio/video format: Audio Video Interleaved or AVI. Therefore, it must be a file with the avi extension. If the file has both audio and video, only the video part would be considered.

Practical Learning: Introducing Animations

To create a new application, press Ctrl + N
Select MFC Application
Set the Name to Video1
Click OK
In the first page of the wizard, click Next
In the second page of the wizard, click Dialog Based and click Next
In the third page of the wizard, click set the Title to Video Animation
Click Finish
Click TODO and press Delete
Click the OK button and press Delete
Change the caption of the Cancel button to &Close

Getting an Animation Control

An animation first originates from an avi file created by an external application. Therefore, you must already have the video you want to play in your application. To provide an animation for your application, at design time, from the Toolbox, click the Animation Control and click the desired area on the host.

The animator control is based on the CAnimatorCtrl class. Therefore, if you want to programmatically create an animation, you must first declare a variable of type, or a pointer to, CAnimationCtrl. You can do this in the source code of the dialog class. After declaring the variable or pointer, to initialize the object, call its Create() member function. Here is an example:

class CControlsDlg : public CDialog
{
// Construction
public:
    CControlsDlg(CWnd* pParent = NULL); // standard constructor
    ~CControlsDlg();

    . . .

private:
    CAnimateCtrl *Player;
};

CControlsDlg::CControlsDlg(CWnd* pParent /*=NULL*/)
	: CDialog(CControlsDlg::IDD, pParent)
{
    //{{AFX_DATA_INIT(CControlsDlg)
    // NOTE: the ClassWizard will add member initialization here
    //}}AFX_DATA_INIT

    Player = new CAnimateCtrl;
}

CControlsDlg::~CControlsDlg()
{
    delete Player;
}

. . .

BOOL CControlsDlg::OnInitDialog() 
{
    CDialog::OnInitDialog();

    // TODO: Add extra initialization here
    RECT Recto = { 5, 5, 360, 360 };

    Player->Create(WS_CHILD | WS_VISIBLE,
		  Recto, this, 0x1884);

    return TRUE; // return TRUE unless you set the focus to a control
    // EXCEPTION: OCX Property Pages should return FALSE
}

Characteristics of the Animation Control

Opening an Animation

After creating the control, you must provide a video to play. This is done by opening a video file using the CAnimateCtrl::Open() member function. It is overloaded with two versions as follows:

BOOL Open(LPCTSTR lpszFileName);
BOOL Open(UINT nID);

The first version expects the path of the video file. Alternatively, you can first add the file as a resource to your project and use its identifier as argument to the second version. Here is an example:

BOOL CControlsDlg::OnInitDialog() 
{
    CDialog::OnInitDialog();

    // TODO: Add extra initialization here
    RECT Recto = { 5, 5, 360, 360 };

    Player->Create(WS_CHILD | WS_VISIBLE | ACS_TRANSPARENT,
		   Recto, this, 0x1884);
		   Player->Open("res\\clock.AVI");

    return TRUE; // return TRUE unless you set the focus to a control
    // EXCEPTION: OCX Property Pages should return FALSE
}

The Transparency of an Animation

In this case, the center of the video would match the center of your rectangle, even though the animation may still not exactly match the dimensions of your rectangle.

When playing the video, you have the option of displaying the original background color of the video or seeing through. When creating a video, its author can do it with transparency to allow seeing the color of the host. In this case, to display the color of the host while the video is playing, set the Transparent property to True. If you are creating the control programmatically, add the ACS_TRANSPARENT style:

BOOL CControlsDlg::OnInitDialog() 
{
    CDialog::OnInitDialog();

    // TODO: Add extra initialization here
    RECT Recto = { 5, 5, 360, 360 };

    Player->Create(WS_CHILD | WS_VISIBLE |
    		  ACS_TRANSPARENT | ACS_AUTOPLAY,
		  Recto, this, 0x1884);

    return TRUE; // return TRUE unless you set the focus to a control
    // EXCEPTION: OCX Property Pages should return FALSE
}

Practical Learning: Show an Animation

From the Toolbox, click Animation Control
Draw a rectangle from the upper left section of the dialog box to the right-middle
In the Properties window, change the following characteristics:
Auto Play: True
Center: True
Client Edge: False
ID: IDC_ANIMATOR
Transparent: True
On the dialog box, right-click the animator control and click Add Variable
In the Category combo box, make sure Control is selected.
In the Variable Name, type m_Animator
Click Finish

Playing an Animation

If you want the video to start displaying immediately once its host (the dialog box or form) comes up, set its Auto Play property to True. If you are dynamically creating the control and you want its video to play as soon as its parent comes up, add the ACS_AUTOPLAY style:

BOOL CControlsDlg::OnInitDialog() 
{
    CDialog::OnInitDialog();

    // TODO: Add extra initialization here
    RECT Recto = { 5, 5, 360, 360 };

    Player->Create(WS_CHILD | WS_VISIBLE |
    		  ACS_TRANSPARENT | ACS_AUTOPLAY,
		  Recto, this, 0x1884);

    return TRUE; // return TRUE unless you set the focus to a control
    // EXCEPTION: OCX Property Pages should return FALSE
}

As mentioned already, an animation is made of various pictures. Each picture is called a frame. The number of frames that make up an animation can influence its length. A video to play as animation is a file that puts these pictures together. Once you have the video, you can play it in an animation. If you want the animation to start playing as soon as its parent window comes up, you can create it with the ACS_AUTOPLAY style. Otherwise, to play the animation, you can call the CAnimateCtrl::Play() member function. Its syntax is:

BOOL Play(UINT nFrom, UINT nTo, UINT nRep);

The nFrom argument specifies the index number of the first frame to play. The frames are stored as a zero-based array. The first frame is 0, the second is 1, etc
The nTo argument is the last frame to play from the list of frames. If you want to play the video to the end, pass this argument with a value of -1
The nRep is the number of times the video should be played before stopping. If you want the video to play until you explicitly decide to stop it, pass this argument as -1

Suppose you have a long video or one made of various special pictures, if you want to display just one particular frame of the video, you can call the CAnimateCtrl::Seek() member function whose syntax is:

BOOL Seek(UINT nTo);

This member function allows the animation to just straight to the nTo frame number.

At any time, you can stop the video playing by calling the CAnimateCtrl::Stop() member function. Its syntax is:

BOOL Stop();

This member function simply stops the animation.

If you had added your Animator control at design time to the dialog box or form or other parent window, when the parent goes out of scope, it takes the Animator control with it. If you dynamically created the control, you should make sure that the control is destroyed when its parent also is. This is usually taken care of with the delete operator as done above. Furthermore, when it comes to the Animator control, after using it, to free the memory space it space, you should call the CAnimateCtrl::Close() member function. Its syntax is:

BOOL Close();

Practical Learning: Playing a Video File

From the resources that accompany these lessons, copy the basketball.avi file and paste it in the video1 sub-folder of the current project
In the Solution Explorer, double-click Video1Dlg.cpp

In the OnInitDialog() event, load the video with the following line of code:

BOOL CVideo1Dlg::OnInitDialog()
{
    CDialogEx::OnInitDialog();

    // Set the icon for this dialog.  The framework does this automatically
    //  when the application's main window is not a dialog
    SetIcon(m_hIcon, TRUE);			// Set big icon
    SetIcon(m_hIcon, FALSE);		// Set small icon

    // TODO: Add extra initialization here
    m_Animator.Open(L"basketball.avi");

    return TRUE;  // return TRUE  unless you set the focus to a control
}

Display the dialog box
On the main menu, click Project -> Class Wizard...
In the Class Name combo box, select CVideo1Dlg
Click the Messages tab and, in the Messages list, double-click WM_CLOSE
Click Edit Code

To close and destroy the animation when the user closes, implement the event as follows:

void CVideo1Dlg::OnClose()
{
	// TODO: Add your message handler code here and/or call default
    m_Animator.Stop();
    m_Animator.Close();

	CDialogEx::OnClose();
}

To test the application, press F5
Return to your programming environment
Change the design of the dialog box as follows:

Button: ID Caption

IDC_START Start

IDC_STOP Stop
Double-click the Start button
To give the user the ability to start the animation, implement the event as follows:
```
void CVideo1Dlg::OnBnClickedStart()
{
    m_Animator.Play(0, -1, -1);
}
```
Return to the dialog box and double-click the Stop button
To allow the user to resume playing the video, implement the event as follows:
```
void CVideo1Dlg::OnBnClickedStop()
{
    m_Animator.Stop();
}
```
To test the application, press F5
Close the dialog box and return to your programming environment