Animation-Part II

Animation using a DragDrop Procedure

Drag and drop is a common windows application where you can drag and drop an object such as a file into a folder or into a recycle bin. This capability can be easily programmed in visual basic. In the following example, I am creating a simulation of dragging the objects into a recycle bin, then drop a fire and burn them away.

In this program, I put 6 images on the form, one of them is a recycle bin, another is a burning recycle bin , one more is the fire, and three more images. In addition, set  the property dragmode of all the images( including the fire) that are to be dragged to  1(Automatic) so that dragging is enabled, and set the visible property of  burning recycle bin to false at start-up. Besides, label the tag of fire as fire in its properties windows. If you want to have better dragging effects, you need to load an appropriate icon under the dragIcon properties for those images to be dragged, preferably the icon should be the same as the image so that when you drag the image, it is like you are dragging the image along.

The essential event procedure  in this program is as follows:

Private Sub Image4_DragDrop(Source As Control, X As Single, Y As Single)

Source.Visible = False
If Source.Tag = "Fire" Then
Image4.Picture = Image5.Picture
End If

End Sub

Source refer to the image to be dragged. Using the code Source.Visible=False means it will disappear after being dragged into the recycle bin(Image4).If  the source is Fire, then the recycle bin will changed into a burning recycle bin , which is accomplished by using the code  Image4.Picture = Image5.Picture, where Image 5 is the burning recycle bin.

For details of this program, please refer to my game and fun programming page or click this link, Recycle Bin.

 

Animation for a complete motion

So far those examples of animation shown in lesson 23 only involve movement of static images. In this lesson, you will be able to create true animation where an action finish in a complete cycle, for example, a butterfly flapping its wings. In the following example, I used eight picture frames of a butterfly which display a butterfly flapping its wing at different stages.

You can actually copy the above images and use them in your program. You need to put all the above images overlapping one another,  make image1 visible while all other images invisible at start-up. Next, insert a command button and label it as Animate. Click on the command button and key in the statements that make the images appear and disappear successively by using the properties image.visible=true and image.visible=false. I use If..... Then and Elseif to control the program flow. When you run the program, you should be able to get the following animation.

The Interface

 

The Code

Private Sub Command1_Click()

If Image1.Visible = True Then
Image1.Visible = False
 Image2.Visible = True
ElseIf Image2.Visible = True Then
Image2.Visible = False
Image3.Visible = True
ElseIf Image3.Visible = True Then
Image3.Visible = False
Image4.Visible = True
ElseIf Image4.Visible = True Then
Image4.Visible = False
Image5.Visible = True
ElseIf Image5.Visible = True Then
Image5.Visible = False
Image6.Visible = True
ElseIf Image6.Visible = True Then
Image6.Visible = False
Image7.Visible = True
ElseIf Image7.Visible = True Then
Image7.Visible = False
Image8.Visible = True
ElseIf Image8.Visible = True Then
Image8.Visible = False
Image1.Visible = True
End If

End Sub

If you wish to create the effect of the butterfly flapping its wing and flying at the same time, then you could use the Left and Top properties of an object, such as the one used in the examples of lesson 23. Below is an example of a subroutine where the butterfly will flap its wing and move up at the same time. You can also write subroutines that move the butterfly to the left, to the right and to the bottom.

Sub move_up( )

If Image1.Visible = True Then
Image1.Visible = False
Image2.Visible = True
Image2.Top = Image2.Top - 100

ElseIf Image2.Visible = True Then
Image2.Visible = False
Image3.Visible = True
Image3.Top = Image3.Top - 100

ElseIf Image3.Visible = True Then
Image3.Visible = False
Image4.Visible = True
Image4.Top = Image4.Top - 100
ElseIf Image4.Visible = True Then
Image4.Visible = False
Image5.Visible = True
Image5.Top = Image5.Top - 100
ElseIf Image5.Visible = True Then
Image5.Visible = False
Image6.Visible = True
Image6.Top = Image6.Top - 100

ElseIf Image6.Visible = True Then
Image6.Visible = False
Image7.Visible = True
Image7.Top = Image7.Top - 100

ElseIf Image7.Visible = True Then
Image7.Visible = False
Image8.Visible = True
Image8.Top = Image8.Top - 100
ElseIf Image8.Visible = True Then
Image8.Visible = False
Image1.Visible = True
Image1.Top = Image1.Top - 100
End If

End Sub

Readmore...

Animation-Part III

Animation using Timer

All preceding examples of animation that you have learn in lesson 23 and lesson 24 only involve manual animation, which means you need to keep on clicking a certain command button or pressing a key to make an object animate. In order to make it move automatically, you need to use a timer. The first step in creating automatic animation is to drag the timer from the toolbox into the form and set its interval to a certain value other than 0. A value of 1 is 1 milliseconds which means a value of 1000 represents 1 second. The value of the timer interval will determine the speed on an animation.
In the following example, I use a very simple technique to show animation by using the properties Visible=False and Visible=true to show and hide two images alternately. When you click on the program, you should see the following animation.

The Code Private Sub Timer1_Timer() If Image1.Visible = True Then Image1.Visible = False Image2.Visible = True ElseIf Image2.Visible = True Then Image2.Visible = False Image1.Visible = True End If End Sub

Next example shows a complete cycle of a motion such as the butterfly flapping its wing. Previous examples show only manual animation while this example will display an automatic animation once you start the program or by clicking a command button. Similar to the example under lesson 24.2, you need to insert a group of eight images of a butterfly flapping its wings at different stages. Next, insert a timer into the form and set the interval to 10 or any value you like. Remember to make image1 visible while other images invisible at start-up. Finally, insert a command button, rename its caption  as Animate and key in the following statements by double clicking on this button. Bear in mind that you should enter the statements for hiding and showing the images under the timer1_timer subroutine otherwise the animation would work. Clicking on the animate button make timer start ticking and the event will run after every interval of 10 milliseconds or whatever interval you have set at design time. In future lesson, I will show you how to adjust the interval at runtime by using a slider bar or a scroll bar. When you run the program, you should see the following animation:

Private Sub Form_Load() Image1.Visible = True x = 0 End Sub Private Sub Command1_Click() Timer1.Enabled = True End Sub Private Sub Timer1_Timer() If Image1.Visible = True Then Image1.Visible = False Image2.Visible = True ElseIf Image2.Visible = True Then Image2.Visible = False Image3.Visible = True

ElseIf Image3.Visible = True Then Image3.Visible = False Image4.Visible = True ElseIf Image4.Visible = True Then Image4.Visible = False Image5.Visible = True ElseIf Image5.Visible = True Then Image5.Visible = False Image6.Visible = True ElseIf Image6.Visible = True Then Image6.Visible = False Image7.Visible = True ElseIf Image7.Visible = True Then Image7.Visible = False Image8.Visible = True ElseIf Image8.Visible = True Then Image8.Visible = False Image1.Visible = True End If End Sub

Readmore...

Animation-Part I

Animation is always an interesting and exciting part of programming. Although visual basic is not designed to handle advance animations, you can still create some interesting animated effects if you put  in some hard thinking. There are many ways to create animated effects in VB6, but for a start we will focus on some easy methods.

The simplest way to create animation is to set the VISIBLE property of a group of images or pictures or texts and labels to true or false by triggering a set of events such as clicking a button. Let's examine the following example:

This is a program that create the illusion of moving the jet plane in four directions, North, South ,East, West. In order to do this, insert five images of the same picture into the form. Set the visible property of the image in the center to be true while the rest set to false. On start-up, a user will only be able to see the image in the center. Next, insert four command buttons into the form and change the labels to Move North, Move East, Move West and Move South respectively. Double click on the move north button and key in the following procedure:

Sub Command1_click( )

Image1.Visible = False
Image3.Visible = True
Image2.Visible = False
Image4.Visible = False
Image5.Visible = False

End Sub

By clicking on the move north button, only image 3 is displayed. This will give an illusion that the jet plane has moved north. Key in similar procedures by double clicking other command buttons. You can also insert an addition command button and label it as Reset and key in the following codes:

Image1.Visible = True
Image3.Visible = False
Image2.Visible = False
Image4.Visible = False
Image5.Visible = False

Clicking on the reset button will make the image in the center visible again while other images become invisible, this will give the false impression that the jet plane has move back to the original position.

You can also issue the commands using a textbox, this idea actually came from my son Liew Xun (10 years old). His program is shown below: Private Sub Command1_Click() If Text1.Text = "n" Then Image1.Visible = False Image3.Visible = True Image2.Visible = False Image4.Visible = False Image5.Visible = False ElseIf Text1.Text = "e" Then Image1.Visible = False Image4.Visible = True Image2.Visible = False Image3.Visible = False Image5.Visible = False ElseIf Text1.Text = "w" Then Image1.Visible = False Image3.Visible = False Image2.Visible = False Image4.Visible = False Image5.Visible = True ElseIf Text1.Text = "s" Then Image1.Visible = False Image3.Visible = False Image2.Visible = True Image4.Visible = False Image5.Visible = False End If End Sub	Another simple way to simulate animation in VB6 is by using the Left and Top properties of an object. Image.Left give the distance of the image in twips from the left border of the screen, and Image.Top give the distance of the image in twips from the top border of the screen, where 1 twip is equivalent to 1/1440 inch. Using a statement such as Image.Left-100 will move the image 100 twips to the left, Image.Left+100 will move the image 100 twip away from the left(or 100 twips to the right), Image.Top-100 will move the image 100 twips to the top and Image.Top+100 will move the image 100 twips away from the top border (or 100 twips down).Below is a program that can move an object up, down. left, and right every time you click on a relevant command button.   The Code Private Sub Command1_Click() Image1.Top = Image1.Top + 100 End Sub Private Sub Command2_Click() Image1.Top = Image1.Top - 100 End Sub Private Sub Command3_Click() Image1.Left = Image1.Left + 100 End Sub Private Sub Command4_Click() Image1.Left = Image1.Left - 100 End Sub
The fourth example let user magnify and diminish an object by changing the height and width properties of an object. It is quite similar to the previous example. The statements  Image1.Height = Image1.Height + 100  and Image1.Width = Image1.Width + 100 will increase the height and the width of an object by 100 twips each time a user click on the relevant command button. On the other hand, The statements  Image1.Height = Image1.Height - 100  and Image1.Width = Image1.Width -100 will decrease the height and the width of an object by 100 twips each time a user click on the relevant command button	The Code Private Sub Command1_Click() Image1.Height = Image1.Height + 100 Image1.Width = Image1.Width + 100 End Sub Private Sub Command2_Click() Image1.Height = Image1.Height - 100 Image1.Width = Image1.Width - 100 End Sub You can try to combine both programs above and make an object move and increases or decreases in size each time a user click a command button.

Readmore...

Add 3D Line Under The Menu

'Add 1 Frame and 1 Menu to your Form.
'Insert the following code to your form:
Private Sub Form_Load()
Frame1.Caption = ""
Frame1.Height = 30
Frame1.Width = Screen.Width + 100
Frame1.Move -50, 0
End Sub

Readmore...

Disable Text Box Pop Up Menu

'Add a module to your project (In the menu choose Project -> Add Module, Then click Open)
'Add 1 Text Box to your form.
'Insert this code to the module :
Declare Function CallWindowProc Lib "user32" Alias "CallWindowProcA" _
(ByVal lpPrevWndFunc As Long, ByVal hWnd As Long, ByVal Msg As Long, _
ByVal wParam As Long, ByVal lParam As Long) As Long
Declare Function SetWindowLong Lib "user32" Alias "SetWindowLongA" _
(ByVal hWnd As Long, ByVal nIndex As Long, ByVal dwNewLong As Long) As Long
Public Const GWL_WNDPROC = -4
Public Const WM_RBUTTONUP = &H205
Public lpPrevWndProc As Long
Private lngHWnd As Long

Public Sub Hook(hWnd As Long)
lngHWnd = hWnd
lpPrevWndProc = SetWindowLong(lngHWnd, GWL_WNDPROC, _
AddressOf WindowProc)
End Sub

Public Sub UnHook()
Dim lngReturnValue As Long
lngReturnValue = SetWindowLong(lngHWnd, GWL_WNDPROC, lpPrevWndProc)
End Sub

Function WindowProc(ByVal hw As Long, ByVal uMsg As Long, ByVal wParam _
As Long, ByVal lParam As Long) As Long
Select Case uMsg
Case WM_RBUTTONUP
'You can put here your own popup menu.
Case Else
WindowProc = CallWindowProc(lpPrevWndProc, hw, uMsg, wParam, lParam)
End Select
End Function

'Insert the following code to your form:
Private Sub Form_Load()
'Replace 'Text1' with the name of your Text Box
Call Hook(Text1.hWnd)
End Sub

Private Sub Form_Unload(Cancel As Integer)
Call UnHook
End Sub

Readmore...

Add Pop Up Menu To Text Box

'Add 1 Text Box to your form. Add 1 Menu (Name it MyMenu) and at least 1 Sub Menu.
'Insert the following code to your form:
Private Const WM_RBUTTONDOWN = &H204
Private Declare Function SendMessage Lib "user32" Alias "SendMessageA" (ByVal hwnd As Long, ByVal wMsg As Long, ByVal wParam As Long, lParam As Any) As Long

Public Sub OpenContextMenu(FormName As Form, MenuName As Menu)
Call SendMessage(FormName.hwnd, WM_RBUTTONDOWN, 0, 0&)
FormName.PopupMenu MenuName
End Sub

Private Sub Text1_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
'Replace 'MyMenu' with the menu you want to pop up.
If Button = vbRightButton Then Call OpenContextMenu(Me, Me.MyMenu)
End Sub

Readmore...

Align Menu To Right

'Add a module to your project (In the menu choose Project -> Add Module, Then click Open)
'Add 1 Command Button and 1 Menu to your form.
'Insert this code to the module :
Declare Function GetMenu Lib "user32" (ByVal hwnd As Long) As Long
Declare Function DrawMenuBar Lib "user32" (ByVal hwnd As Long) As Long
Public Const MIIM_TYPE = &H10
Public Const MFT_RIGHTJUSTIFY = &H4000
Public Const MFT_STRING = &H0&
Declare Function GetMenuItemInfo Lib "user32" Alias "GetMenuItemInfoA" _
(ByVal hMenu As Long, ByVal un As Long, ByVal b As Boolean, lpMenuItemInfo _
As MENUITEMINFO) As Long
Declare Function SetMenuItemInfo Lib "user32" Alias "SetMenuItemInfoA" _
(ByVal hMenu As Long, ByVal un As Long, ByVal bool As Boolean, _
lpcMenuItemInfo As MENUITEMINFO) As Long
Type MENUITEMINFO
cbSize As Long
fMask As Long
fType As Long
fState As Long
wID As Long
hSubMenu As Long
hbmpChecked As Long
hbmpUnchecked As Long
dwItemData As Long
dwTypeData As String
cch As Long
End Type

'Insert this code to your form:
Private Sub Command1_Click()
Dim MnuInfo As MENUITEMINFO
mnuH& = GetMenu(Me.hwnd)
MnuInfo.cbSize = Len(MnuInfo)
MnuInfo.fMask = MIIM_TYPE
'If you want to align to right only few menus, and leave the rest in left side,
'Replace the '0' below and the '0' two lines above the 'End Sub' with the number
'of menus you want to leave in the left side.
myTemp& = GetMenuItemInfo(mnuH&, 0, True, MnuInfo)
MnuInfo.fType = MFT_RIGHTJUSTIFY Or MFT_STRING
'Replace all 'MenuCaption' below with the caption of the first menu from left.
MnuInfo.cch = Len("MenuCaption")
MnuInfo.dwTypeData = "MenuCaption"
MnuInfo.cbSize = Len(MnuInfo)
myTemp& = SetMenuItemInfo(mnuH&, 0, True, MnuInfo)
myTemp& = DrawMenuBar(Me.hwnd)
End Sub

Readmore...