Computer Science Canada

[Tutorial] Custom Buttons Using GIF Animation

Author:  wierdo1111 [ Sun Mar 24, 2013 2:07 pm ]
Post subject:  [Tutorial] Custom Buttons Using GIF Animation

This can have different uses other then custom buttons but I thought this was the best way to demonstrate the uses when I was tutoring people.

I have included the picture i used below.

This is some basic stuff you should know what it is.
code:
var winID : int
var mx, my, b : int
View.Set ("offscreenonly")


Now here are the variables for the GIF
I'll talk about menuid and menuc later. Menuf get the number of frames in map.gif This is unneeded because I made it and I know how many there are
but It's good to know you can use Pic.Frames to get them. Menuff creates an array with an upper as the number of frames so that each frame can be saved later.
code:
const menu := "menu.gif"  % just the path to get the picture
var menuid : int := 1
var menuc : int := 0
var menuf : int := Pic.Frames (menu)
var menuff : array 1 .. menuf of int


Pic.FileNewFrames is what saves each frame of menu into the menuff array, delaym is a variable used to determine the delay
between each frame, if it has no value it will use the GIFs delay or 0 if it has none.
code:
var delaym : int
Pic.FileNewFrames (menu, menuff, delaym)

View.Set ("offscreenonly")
winID := Window.Open ("position:center;center,graphics:410;320,nobuttonbar")


Here is where we do some simple rectangle hit detection, depending on which rectangle the mouse in menuid is changed and
if it lies in none menuid := 1.
code:

loop
    Mouse.Where (mx, my, b)

    if my >= 305 - 60 and my <= 305 and mx >= 25 and mx <= 385 then
        menuid := 2
    elsif my >= 225 - 60 and my <= 225 and mx >= 25 and mx <= 385 then
        menuid := 3
    elsif my >= 145 - 60 and my <= 145 and mx >= 25 and mx <= 385 then
        menuid := 4
    elsif my >= 65 - 60 and my <= 65 and mx >= 25 and mx <= 385 then
        menuid := 5
    else
        menuid := 1
    end if


Now it's time to learn what Menuc and Menuid do. Menuc is a way of checking if menuid has changed its value so the picture is not constantly redrawn if nothing happens.
Pic.DrawFramesBack works by
(calling the array where the frames are saved, x, y, pic display type, what frame to play to (menuid), delay between frames during play, and if you want it erased after finishing animation)
menuc := menuid to satisfy the if statement this is in, then View.Update to update the picture after the animation has finished.
code:
    if menuc not= menuid then
        Pic.DrawFramesBack (menuff, 0, 0, picMerge, menuid, 0, false)
        menuc := menuid
        View.Update
    end if

end loop


Lastly I used Pic.DrawFramesBack instead of just Pic.DrawFrame because it acts like a forked process allowing the program to continue running while this is drawn.
You may have more visual errors this way though.


: