Android Working with Layers Animation using Basic4Android - Tutorial Part1

Submitted by donbermoy on Saturday, January 18, 2014 - 12:56.

In this tutorial, we will create an animation that can move an image character. This images will move but with contents to the layers of image an also for our background image. First you will need this images:

And here's our image for our background:

First we will initialized our Sub Global code. Take note that i provided my explanation using comments (the text in the Green color.)Type the code below:

Sub Process_Globals
 
        Dim TimerHorse As Timer
        Dim TimerBackground As Timer
        Dim TimerInterval As Long
End Sub
 
Sub Globals
        Dim ImageI As Int                       ' index of the current horse image
        Dim ImageDir As Int             ' direction of the horse image
        Dim ImageNumber As Int          ' number of horse images
        ImageNumber = 8
        Dim imgHorse(2, ImageNumber) As Bitmap ' array horse image bitmaps
        Dim imvBackground As ImageView  ' background ImageView
        Dim imvForeground As ImageView  ' foreground ImageView
        Dim cvsForeground As Canvas             ' canvas for the foreground image
        Dim rectHorse As Rect           ' rectangle of the horse image
        Dim HorseWidth As Int           ' horse image width
        Dim HorseHeight As Int          ' horse image height
        Dim HorseTop As Int             ' horse image top
        Dim HorseLeft As Float  ' current left position of the horse image
        Dim HorseDelta As Float         ' horse move per timer tick
        Dim BackgroundLeft As Float     ' current left position of the background
        Dim BackgroundDelta As Float    ' background move per timer tick
End Sub

Next we will initialize an image that draws a horse. Follow the code below.

Sub DrawHorse(i As Int, x As Float)
        ' drawing routine for the horse image
        
        ' erase the current horse image, draw a transparent rectangle
        cvsForeground.DrawRect(rectHorse, Colors.Transparent, True, 1)
        
        ' set the new horse image position
        rectHorse.Left = x
        rectHorse.Right = x + HorseWidth
                ' draw the new horse image
        cvsForeground.DrawBitmap(imgHorse(ImageDir, i), Null, rectHorse)
        
        ' invalidate (update) the foreground image
        imvForeground.Invalidate2(rectHorse)
End Sub

Then to move the background using Timer. Type the code below.

Sub TimerBackground_Tick
        ' set the background left position
        BackgroundLeft = BackgroundLeft + BackgroundDelta
        imvBackground.Left = BackgroundLeft
End Sub

Next the timer for our horse to move. Follow the code below.

Sub TimerHorse_Tick
        ' increase the horse left position
        HorseLeft = HorseLeft + HorseDelta
        
        ' test if the horse reaches the right or left border
        If HorseLeft >= 100%x - HorseWidth - HorseDelta OR HorseLeft <= 0 Then
                BackgroundDelta = - BackgroundDelta
                HorseDelta = - HorseDelta
                HorseLeft = HorseLeft + HorseDelta
                If ImageDir = 0 Then
                        ImageDir = 1
                Else
                        ImageDir = 0
                        imvBackground.Left = 0
                End If
        End If
        
        ' update the horse image index
        ImageI = ImageI + 1
        ' reset the image index 
        If ImageI = ImageNumber Then
                ImageI = 0
        End If
        
        ' draw the new horse image
        DrawHorse(ImageI, HorseLeft)
End Sub

Take note that all of my explanation of the coding are in comments with a color Green text. That's it for now and we will proceed to our second part which is the main sub procedure of Activity_Create. For more inquiries and need programmer for your thesis systems in any kind of programming languages, just contact my number below. Best Regards, Engr. Lyndon Bermoy IT Instructor/System Developer/Android Developer/Freelance Programmer Mobile: 09488225971 Landline: 826-9296 E-mail:[email protected] Add and Follow me on Facebook: https://www.facebook.com/donzzsky Visit and like my page on Facebook at: https://www.facebook.com/BermzISware

Add new comment

60 views