mark dixon, socce soft 131page 1 16 – visual basic 6.0

Mark Dixon, SoCCE SOFT 131

16 – Visual BASIC 6.0


Session Aims & Objectives• Aims

– introduce you to the fundamentals of:• VB6 development environment• sound, and• graphics

• Objectives, by end of this week’s sessions, you should be able to:

– develop 'stand alone' applications– put bitmap (raster) graphics into your applications– draw simple vector graphics in your applications– play MP3 and WAV files in your applications


VB6 IDE

• Microsoft Visual BASIC 6.0IDE: Integrated Development Environment– Screen (form) designer– Code editor– Debugger– Help

• Start menu, Programs, University Software, M, Microsoft Visual Studio 6.0


VB6 IDE: Save Project (properly)

1. Click Save button

2. Create New Folder

3. Save:– project file (.vbp)– form files (.frm)


VB6 IDE: Screen (Form) Designer

• Drag and Drop Controls from the ToolBox onto the Form, & change properties


VB6 IDE: Code Editor

• Type code into the code window


• Run your program (F5), or

• Step through line by line (F8)• Immediate

Window:codeexecutedimmediately

VB6 IDE: DebuggerRun

Pause

Stop


Version Control: Copy Folder• At regular intervals use Windows Explorer to

copy whole folder to create new version– drag the folder and hold down CTRL key


Version Control: Rename Folder• Rename the copy of the folder, using the date

and time it was created:


Software Development Cycle

• Software development follows this pattern:– analyse problem– design solution– implement (code) solution– test & debug solution (code)

• However, it is:– cyclic/iterative (not linear)


Example: PicView - AnalysisSPECIFICATION

• User Requirements – display photos quickly and easily one after another

• Software Requirements– Functional:

–change current folder and drive–display list of picture files in current folder–display picture (*.jpg, *.bmp, and *.gif) from files

in current folder– Non-functional

should be quick and easy to use PicView


Types of Graphics: Raster

• Raster graphics – made of dots (pixels – picture elements)– stored in .jpg, .bmp, and .gif files (picture property)– suitable for complex, static pictures (e.g. photos)– difficult to change programmatically– loses quality when enlarged:


Types of Graphics: Vector

• Vector graphics – made of objects (lines, circles, etc.)– not available in VB Script or HTML– suitable for simple, dynamic pictures (diagrams)– No loss of quality

when enlarged


Controls

• Picture Box: display pictures

• Drive List Box: allow user to select disk drive

• Directory List Box: allow user to select folder

• File List Box: allow user to select file


Controls' Properties• Picture Box (pic)

– Picture: allows display of bitmap (raster graphic) as background

• Drive List Box (drv)– Drive: the currently selected disk drive

• Directory List Box (dir)– Path: the currently selected directory (folder)

• File List Box (fil)– Path: the currently selected folder/directory– Pattern: only display this type of file (e.g. .jpg)– FileName: the currently selected file


Example: PicView - Design

• User interface design:

• Functional design:

Trigger (when) Actions (what)click event of Drive Box make drive current (directory box

points to this drive)

click event of Directory Box make folder current (file box points to this folder)

click event of File Box display selected picture in picture box


Example: PicView - Code

Option Explicit

Private Sub drvMain_Change() dirMain.Path = drvMain.DriveEnd Sub

Private Sub dirMain_Change() filMain.Path = dirMain.PathEnd Sub

Private Sub filMain_Click() picMain.Picture = LoadPicture(filMain.Path & "\" & filMain.FileName)End Sub

drvMain

dirMain

picMain

filMain


Vector Graphics: Grid System

• the origin (position 0,0) is at top left– in mathematics it is always bottom left

200010000

0

1000


Picture Box: Drawing Methods

• Methods (vector graphics)– Line: draws a straight line between 2 points– Circle: draws a circle– PSet: draws a dot (point)– Cls: clears (screen) drawing area


Example: Shapes

• Form and Picture Box control support graphics methods:

0 200010000

1000

picDisplayArea.Line (500, 200)-(1900, 800)picDisplayArea.Line -(2600, 600)picDisplayArea.Line -Step(-600, -400)

picDisplayArea.PSet (1500, 1000)picDisplayArea.Circle (700, 900), 300

Shapes


Example: StickMan

• Enabled property (true or false)

StickMan

200010000

0

1000


Example: Face

Face


Example: Music Player - Analysis

• User Requirement: – to play different music for long time without

interruption, at same location (while working or at party)

• Software Requirements Specificationsoftware should:– allow user to:

• select track (MP3 file) from folder on disk• play selected track

– automatically• move to next track in folder• go back to first after last has played

later lecture


Additional Controls

• VB has hundreds of controls

• To include additional controls in your project:– Project menu– Components item

• Multimedia Control– plays

MP3 & WAV files


Multimedia Controls' Properties

• Multi-media Control– FileName: name of file to play– Command: controls playback


Example: Music Player - Design

• Compare the following User Interface Designs:

V0 V1


Example: Music Player - CodeOption Explicit

Private Sub drvMain_Change() dirMain.Path = drvMain.DriveEnd Sub

Private Sub dirMain_Change() filMain.Path = dirMain.PathEnd Sub

Private Sub filMain_Click() mmcMain.Command = "Close" mmcMain.FileName = filMain.Path & "\" & filMain.FileName mmcMain.Command = "Open"End Sub

drvMain dirMain

filMainmmcMain


Example: Face v2

Face


Tutorial Exercise: PicView• Task 1: Get the PicView example (from the lecture)

working.• Task 2: Get the StickMan example (from the lecture)

working.• Task 3: Get the Music Player example (from the

lecture) working.• Task 4: Modify your program to automatically go the

next track after the current one ends.• Task 5: Modify your program to automatically go the

first track after the last one ends.• Task 6: Get the Face v2 example (from the lecture

working).

mark dixon, socce soft 131page 1 16 – visual basic 6.0

Documents