3.4   events and interactivity
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
455
On Slideshare
455
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
5
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Code:Sub keyupIf GraphicsWindow.LastKey = return thenShapes.Rotate(shape1, 0)EndIfEndSubSub keydownIf GraphicsWindow.LastKey = return thenShapes.Rotate(shape1, 90)EndIfEndSub
  • Notes:In this example, you use the Return key on the keyboard to rotate a rectangle shape in the graphics window. When you press the Return key, the rectangle rotates, and on releasing the Return key, the rectangle returns to its original state. In the editor window, you first enter the code to add a rectangle by using the AddRectangle operation of the Shapes object. Next, you set the location of the rectangle by using the Move operation.Then, you identify the key with which the rectangle can be rotated. You declare the key and assign it a suitable variable name.After that, you use the KeyDown event of the GraphicsWindow object and declare a subroutine to rotate the shape when the key is pressed.Similarly, you use the KeyUp event and declare a subroutine to rotate the shape when the key is released.On clicking Run, your program gets executed. Agraphics window is displayed with a rectangle in the center. When you press the Return key the rectangle rotates; when you release the Return key, the rectangle rotates back to its original position.Code:GraphicsWindow.Height = 300GraphicsWindow.Width = 300GraphicsWindow.Title = "Graphics Window"shape1 = Shapes.AddRectangle(100, 50)Shapes.Move(shape1, 100, 125)return = "Return"GraphicsWindow.KeyDown = keydownGraphicsWindow.KeyUp = keyupSub keydownIf GraphicsWindow.LastKey = return thenShapes.Rotate(shape1, 90)EndIfEndSubSub keyupIf GraphicsWindow.LastKey = return thenShapes.Rotate(shape1, 0)EndIfEndSub
  •  Solution:GraphicsWindow.Hide()w = 620h = 450GraphicsWindow.CanResize = "False"GraphicsWindow.Width = wGraphicsWindow.Height = hGraphicsWindow.Top = (Desktop.Height-h) / 2GraphicsWindow.Left = (Desktop.Width-w) / 2GraphicsWindow.Show()GraphicsWindow.Title = "Events and interactivity"GUI()Controls.ButtonClicked = MouseActionSub GUI GraphicsWindow.DrawRectangle(10, 10, 600, 320) GraphicsWindow.DrawRectangle(10, 340, 200, 100)GraphicsWindow.DrawRectangle(10, 340, 600, 100)GraphicsWindow.DrawRectangle(370, 340, 150, 100) Triangle = Controls.AddButton("Triangle", 40, 345)Controls.SetSize(Triangle, 120, 30) Rectangle = Controls.AddButton("Rectangle",40,375)Controls.SetSize(Rectangle, 120, 30) Circle = Controls.AddButton("Circle", 40, 405)Controls.SetSize(Circle, 120, 30) Rotate = Controls.AddButton("Rotate", 230, 360)Controls.SetSize(Rotate, 60, 60) Zoom = Controls.AddButton("Zoom", 290, 360)Controls.SetSize(Zoom, 60, 60) FreeHand = Controls.AddButton("Draw", 390, 360)Controls.SetSize(FreeHand, 60, 60) Clear = Controls.AddButton("Clear", 450, 360)Controls.SetSize(Clear, 60, 60) Exit = Controls.AddButton("Exit", 530, 360)Controls.SetSize(Exit, 60, 60) EndSubSub MouseAction x = GraphicsWindow.MouseX y = GraphicsWindow.MouseYGraphicsWindow.PenWidth = 1 If x > 40 And x < 160 Then GraphicsWindow.BrushColor = GraphicsWindow.GetRandomColor() If y > 345 And y < 375 Then draw = 0 j = 0 z = 1 tri = Shapes.AddTriangle(20, 20, 100, 100, 150, 20)Shapes.Move(tri, 80, 100)EndIfIf y > 375 And y < 405 Then draw = 0 j = 0 z = 2 rect = Shapes.AddRectangle(100, 100)Shapes.Move(rect, 250, 150)EndIfIf y > 405 And y < 435 Then draw = 0 j = 0 z = 3 circ = Shapes.AddEllipse(100, 100)Shapes.Move(circ, 400, 150)EndIfEndIfIf y > 360 And y < 420 Then If x > 230 And x < 290 Then draw = 0 If z = 1 Then Shapes.Rotate(tri, 30 + m)ElseIf z = 2 Then Shapes.Rotate(rect,30 + m) ElseIf z = 3 Then Shapes.Rotate(circ, 30 + m) EndifEndifEndif m = m + 30 EndIfIf x > 290 And x < 390 Then draw = 0 i = 0.1 + jIf i < 0.4 Then If z = 1 Then Shapes.Zoom(tri, 1 + i, 1 + i)ElseIf z = 2 Then Shapes.Zoom(rect, 1 + i, 1 + i)ElseIf z = 3 Then Shapes.Zoom(circ, 1 + i, 1 + i) EndIfEndIfEndIf j = j + 0.1EndIfEndIfIf x > 390 And x < 450 Then draw = 1 Paint()EndIfIf x > 450 And x < 510 Then draw = 0 j = 0GraphicsWindow.Clear() GraphicsWindow.BrushColor = "Blue" GUI() draw = 0EndIfIf x > 530 And x < 590 Then draw = 0Program.End()EndIfEndIfEndSubSub PaintIf draw = 1 Then GraphicsWindow.MouseMove = MouseDragElseIf Mouse.IsLeftButtonDown Then MouseAction() EndIfEndIfEndSubSub MouseDragIf draw = 1 then x = GraphicsWindow.MouseX y = GraphicsWindow.MouseYIf x > 10 And x < 600 And y > 10 And y < 320 Then If Mouse.IsLeftButtonDown ThenGraphicsWindow.DrawLine(OrgX, OrgY, x, y)EndIfEndIfOrgX = xOrgY = yEndIfEndSub    

Transcript

  • 1. Microsoft® Small Basic
    Events and Interactivity
    Estimated time to complete this lesson: 1 hour
  • 2. Events and Interactivity
    In this lesson, you will learn about:
    Using keyboard events in your program.
    Using mouse events in your program.
  • 3. Introduction to Events
    In other words, you can create an interactive program in Small Basic by defining events that trigger an action in response to user inputs.
    This lesson introduces you to events and controls with which you can add interactivity to your Small Basic programs.
    Interactivity here also includes control events that trigger an
    action on the click of a button or when some text is entered
    in a text box.
  • 4. Keyboard Events
    Keyboard events produce an action when a certain key is pressed. There are two keyboard events—KeyDownand KeyUp. These events are defined as operations of the GraphicsWindow object.
    KeyUp raises an event when a key is released on the keyboard.
    KeyDown raises an event when a key is pressed down on the keyboard.
  • 5. Keyboard Events
    Let’s demonstrate keyboard events in Small Basic with a simple program that allows you to rotate a shape on the graphics window by pressing a key on the keyboard.
    In this example, you use the Return key on the keyboard to rotate a rectangle shape in the graphics window. When you press the Return key, the rectangle rotates, and on releasing the Return key, the rectangle returns to its original state.
  • 6. Mouse Events
    Let’s see how we can use these events in a program.
    MouseDown raises an event when the mouse button is clicked.
    MouseUp raises an event when the mouse button is released
    Like keyboard events, you can create programs in Small Basic that work with events based on mouse clicks. Mouse events generate actions in your program with the click of a mouse.
    MouseMove raises an event when the mouse is moved around in the graphics window.
  • 7. Let’s Summarize…
    Congratulations! Now you know how to:
    Use keyboard events in your program.
    Using mouse events in your program.
  • 8. It’s Time to Apply Your Learning…
    Write a program to demonstrate the Mouse events by performing the following steps:
    • Create a user interface with the help of the GraphicsWindow object.
    • 9. Insert buttons to draw shapes with the help of the Controls object.
    • 10. Use the MouseDown and MouseMove events to drop shapes in the drawing area.
    • 11. Use If and Else statements to define the actions that take place by clicking the mouse.