Your SlideShare is downloading. ×
3.4   events and interactivity
3.4   events and interactivity
3.4   events and interactivity
3.4   events and interactivity
3.4   events and interactivity
3.4   events and interactivity
3.4   events and interactivity
3.4   events and interactivity
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

3.4 events and interactivity

284

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
284
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
10
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.

    ×