Adding Art-Effects

? Adding Art-effects

Adding artwork and special effects to an application is the most exciting and addicting
part of programming. Creating impressive and useful graphical effects with Visual Basic
is very simple. Here we will discuss

? Use the line and shape controls to add artwork to a form.

? Use of Image control to create graphical command buttons.
? Add drag-and-drop support to a program.
? Change a shape of mouse pointer.
? Create special effects with animation

The Line Control

The line control is used to draw a straight line on the form. The
appearance of a line can be changed by changing the object properties of a line like
BorderWidth, BorderStyle, BorderColor and Visible.

BorderWidth - Adjusts the thichness of line.

BorderStyle - Makes line solid, dotted, or dashed.
BorderColor - Sets the color of a line.
Visible – Makes the line visible or hidden.

The Shape Control

The shape Control is used to create a rectangles, squares, circles and
ovals to the form. Set the object properties like Shape, FillColor, Fillstyle, and Visible to
change the appearance of the image.

Use of Line and Shape Controls

? Open a new form and create labels, line, shapes and buttons having the following
properties.

Object Property Setting

Label1 Caption Northwest Window Screens
Font Times New Roman, Bold, 26 points
Forecolor darkblue

Line1 BorderWidth 5
Bordercolor Dark Blue

Shape1 shape 0-Rectangle

Fillcolor Darkpurple
Fillstyle 6-Cross
Bordercolor Darkyellow
BorderStyle 1-Solid
Borderwidth 5

Training Division, NIC, New Delhi

O 1
 Adding Art-Effects

Shape2 Shape 4-rounded rectangle

FillColor DarkBlue

Fillstyle 7- diagonal cross

Bordercolor Darkblue
Borderwidth 4

Command1 Caption “Quit”

Command2 Caption “Continue”

? Double-click the Quit Command Button and type End in the cammand1_click
event procedure, and then close the code window.
? Click the start button on the toolbar and the will appear as:

? Creating Graphical Command Buttons

As an alternative to creating text-based buttons, the Image control can be used to

create graphical buttons in a program. A Graphical button contains artwork that is visual
representation of the command executed by the button. For example, a button containing
the floppy disk icon represents a commands that saves the information to a floppy.

The following example uses three graphical command buttons (Bold, Italic, and
Underline) to format the text on the form.

Training Division, NIC, New Delhi

O 2
 Adding Art-Effects

Label1

Image3
Image2
Image1

Label2

? Open New form in your project by clicking Project>>Add form, then selecting the
form option.
? Create the following objects in the blank form.

Object Property Value

Label1 Caption Click the buttons to practice formatting the sample text
Label2 Caption Simple text
Font Times New Roman, 28 points
Form1 Caption Graphical Buttons
Image1 Picture C:\Program files\Microsoft Visual
Studio\Common\Graphics\Bitmaps\TIBr_W95\bld.bmp
Tag “Up”
Image2 Picture C:\Program files\Microsoft Visual
Studio\Common\Graphics\Bitmaps\TIBr_W95\itl.bmp
Tag “Up”
Image3 Picture C:\Program files\Microsoft Visual
Studio\Common\Graphics\Bitmaps\TIBr_W95\ulin.bmp
Tag “Up”

? Write the following event procedure for Image1 command button.

Private Sub Image1_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As

Single)
If Image1.Tag = "up" Then
Label2.FontBold = True
Image1.Appearance = 0
Image1.Tag = "down"
Else
Label2.FontBold = False
Image1.Appearance = 1
Image1.Tag = "up"
End If
End Sub

Training Division, NIC, New Delhi

O 3
 Adding Art-Effects

? Write the following event procedure for Image2 command button.

Private Sub Image2_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As

Single)
If Image2.Tag = "up" Then
Label2.FontItalic = True
Image2.Appearance = 0
Image2.Tag = "down"
Else
Label2.FontItalic = False
Image2.Appearance = 1
Image2.Tag = "up"
End If
End Sub

? Write the following event procedure for Image3 command button.

Private Sub Image3_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As

Single)
If Image3.Tag = "up" Then
Label2.FontUnderline = True
Image3.Appearance = 0
Image3.Tag = "down"
Else
Label2.FontUnderline = False
Image3.Appearance = 1
Image3.Tag = "up"
End If
End Sub

? Click Start command from the toolbar to run the program. When the command
buttons are clicked , this program will change the font type of the text.

? Adding Drag-and-Drop Features

In drag-and-drop features, user can drag the object from one location to another by
pressing the mouse button, and then releases the mouse button to relocate the object or to
issue a command.

To add Drag and Drop support to a program the following three steps are required:

Enable Drag and Drop object. To add drag and drop support to an object, it is required
to set DragMode property to 1 by using program code or the property window.

Select a drag icon. By default rectangle is used to represent an object being dragged. But
it can be substituted by setting DragIcon property of the object to the Bitmap or icon by
using program code or the property window.

Training Division, NIC, New Delhi

O 4
 Adding Art-Effects

Write DragDrop or DragOver event procedure for the target object. Event procedure
should be written for the object that is the target, or destination, object of the dragging
motion.

Write the following code for the form_load() and Image2_DragDrop events.

Private Sub Form_Load()

Image1.Picture = LoadPicture("c:\program files\microsoft visual
studio\common\graphics\icons\misc\face03.ico")
Image2.Picture = LoadPicture("c:\program files\microsoft visual
studio\common\graphics\icons\misc\house.ico")
Image1.DragMode = 1
Image1.DragIcon = LoadPicture("c:\program files\microsoft visual
studio\common\graphics\icons\misc\face01.ico")
End Sub

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

Image1.Visible = False
End Sub

? Changing the mouse pointer

Visual basic uses the MouseIcon property to set the pointer shape.

Mouse pointer Description

Setting
2 crosshairs pointer for drawing
3 Insertion pointer for text-based application
Sizing pointer (pointer whose arrows point in other
directions are available.
11 Hourglass pointer, which indicates that the user
needs to wait.
12 No-drop pointer, which indicates that the action the
User attempting to perform can’t be performed.

Training Division, NIC, New Delhi

O 5
 Adding Art-Effects

? Adding Animation

Animation is the simulation of movement procedure by rapidly displaying a series of

related images on the screen.

Objective: animating a rocket.

? Open new form in your project by clicking Project>>Add form. Then selecting the
form option.
? Create the following objects in the blank form.

Object Property Value Code

Image1 Picture c:\program
files\microsoft
visual studio \
common\graphics\i
cons\arrows\point1
0.ico

Visible True
Timer1 Enabled True Private Sub Timer1_Timer()
Interval 65 Image1.Move Image1.Left - 50, Image1.Top - 75
End Sub

? Click Start button to run the program. A rocket is moving from one point to other
point in the output window.

Training Division, NIC, New Delhi

O 6
 Adding Art-Effects

? Few Examples

Example 1 : Use drag and drop to create a burn barrel.

Image5
Image2 Image4

Image1

Image3
Image6

Steps for designing the above form

Open the new form in your project by clicking the Project>>Add form.
Create the following objects in the blank form.

Object Property Value

Label1 Caption Throw everything away, and then drop the match.
Font Times New Ro man, Bold, 12 point
Form1 Caption Burn Barrel
Image1 Stretch True
Picture C:\program files\Microsoft visual studio \common \graphics\
icons\computer\trash02a.ico
Image2 Picture C:\program files\Microsoft visual studio \common \graphics\
icons\computer\tcdrom02.ico
DragIcon C:\program files\Microsoft visual studio \common \graphics\
icons\computer\cdrom02.ico
DragMode 1-Automatic

Training Division, NIC, New Delhi

O 7
 Adding Art-Effects

Image3 Picture C:\program files\Microsoft visual studio \common \graphics\

icons\elements\fire.ico
DragIcon program files\Microsoft visual studio\common \graphics\
icons\elements\fire.ico
Dragmode 1-Automatic
Tag “Fire”
Image4 Picture C:\program files\Microsoft visual studio \common \graphics\
icons\Industry\gaspump.ico
DragIcon C:\program files\Microsoft visual studio \common \graphics\
icons\Industry\gaspump.ico
Dragmode
Image5 Picture C:\program files\Microsoft visual studio \common \graphics\
icons\arrows\point11.ico
DragIcon C:\program files\Microsoft visual studio \common \graphics\
icons\arrows\point11.ico
Dragmode 1-Automatic
Image6 Stretch True
Picture C:\program files\Microsoft visual studio \common \graphics\
icons\computer\trash02b.ico
Visible False

In the Image1_DragDrop event procedure , write the code written below.

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

Source.Visible = False
If Source.Tag = "fire" Then
Image1.Picture = Image6.Picture
End If
End Sub

Training Division, NIC, New Delhi

O 8
 Adding Art-Effects

Example 2: Adding a smoke cloud with animation effect to the above program.

In the previous form add picture of cloud and timer to it as shown above.

Set the following properties for the picture box and timer
Object Property value
Picture1 Appearance 3D
BackColor Lightgray
BorderStyle 0-None
Picture C:\program files\Microsoft visual studio \common
Visible \graphics\ icons\Elements\Cloud.ico
False
Timer1 Enabled False
Interval 65

In the Image1_DragDrop event procedure , write the code written below.

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

Source.Visible = False
If Source.Tag = "fire" Then
Image1.Picture = Image6.Picture
Picture1.Visible = True
Timer1.Enabled = True
End If
End Sub

Training Division, NIC, New Delhi

O 9
 Adding Art-Effects

Write the following code in the Timer1_timer event procedure.

Private Sub Timer1_Timer()
If Picture1.Top > 0 Then
Picture1.Move Picture1.Left - 50, Picture1.Top - 75
Else
Picture1.Visible = False
Timer1.Enabled = False
End If
End sub

Example 3: Expand picture at the runtime.

Steps for designing the above form

? Open the new form in your project by clicking the Project>>Add form.
? Create the following objects in the blank form.

Object Property Value

Form1 Caption Approaching Earth
Image1 Stretch True
Picture C:\program files\Microsoft visual studio \common \
graphics\ icons\Elements\Earth.ico
Write the following code in the event procedure of Image1.
Private Sub Image1_Click()
Image1.Height = Image1.Height + 200
Image1.Width = Image1.Width + 200
End Sub

? Run the program by clicking Start button. The earth icon will appear alone on the
form.
? Click the Earth icon several times to expand it on the screen.

Training Division, NIC, New Delhi

O 10