Animation between tab-switches in gui

Quegga · May 24, 2015

Hey, I am struggling with a little animation for my gui.

I have a window, that contains multible tabs. The tab-labels are hidden, so the only way to switch between the tabs is by pressing buttons. This is for a game, I want to have Main Screen, Options Screen, etc.

My problem is, when I switch between the tabs sometimes I get a blink for one frame. So it is flickering when switching. Also I do not want an instant switch, I want it to fade to black in like 200ms, then fade back to normal in 200ms, and the new tab is opened.

I tried it with creating a GUICtrlCreatePic and setting it to transparent, but I was unable to find a way to set the trasnparency in smooth steps over 200 ms duration. I also tried it with DllCall ( "user32.dll", "int", "AnimateWindow", "hwnd", $MainGui, "int", 200, "long", 0x00090000 ) to make the whole gui fade away, but that looks weird and the buttons are flickering even more.

So what I need is some sort of function that allows me to darken the gui, change the tab, and lighten it up again.

Thank you very much for any suggestions, I searched multiple hours on this now, you are my last hope

Here is the basic code I have, I deleted every unnecessary detail to make it easier to understand.

#include <GUIConstantsEx.au3>
#include <WindowsConstants.au3>

AutoItSetOption("GUICloseOnESC",0)
$MainGui = GuiCreate("MyTestScript",1300,800)
$Tabs = GuiCtrlCreateTab(-1,-22,1304,824)

$Tab1 = GUICtrlCreateTabItem("bla")             ;First Tab
$TabLabel1 = GUICtrlCreateLabel("",0,0,1300,800)
GUICtrlSetBkColor($TabLabel1,0x5FD89E)
GUICtrlSetState($TabLabel1, $GUI_DISABLE)
$StartButton = GuiCtrlCreateButton("Start",600,700,100,50)
GUICtrlSetFont($StartButton,25)

$Tab2 = GUICtrlCreateTabItem("blub")            ;Second Tab
$TabLabel2 = GUICtrlCreateLabel("",0,0,1300,800)
GUICtrlSetBkColor($TabLabel2,0x5FD89E)
GUICtrlSetState($TabLabel2, $GUI_DISABLE)
$ExitButton = GuiCtrlCreateButton("Exit",600,700,130,50)
GUICtrlSetFont($ExitButton,25)

GUISetState(@SW_SHOW)

While True
   Switch GuiGetMsg()
   Case $GUI_EVENT_CLOSE
      Exit
   Case $StartButton
      ;DllCall ( "user32.dll", "int", "AnimateWindow", "hwnd", $MainGui, "int", 200, "long", 0x00090000 )
      GUICtrlSetState($Tab2, $GUI_SHOW)
      ;DllCall ( "user32.dll", "int", "AnimateWindow", "hwnd", $MainGui, "int", 200, "long", 0x00080000 )
   Case $ExitButton
      ;DllCall ( "user32.dll", "int", "AnimateWindow", "hwnd", $MainGui, "int", 200, "long", 0x00090000 )
      GUICtrlSetState($Tab1, $GUI_SHOW)
      ;DllCall ( "user32.dll", "int", "AnimateWindow", "hwnd", $MainGui, "int", 200, "long", 0x00080000 )
   EndSwitch
   Sleep(25)
WEnd

Edited May 24, 2015 by Quegga
edit: removed unnecessary code

Melba23 · May 24, 2015

Quegga,

Welcome to the AutoIt forums.

Trying to animate tabs is far too difficult. I would use my GUIExtender UDF (look in my sig for the link) and do it like this:

#include <GUIConstantsEx.au3>
#include <WindowsConstants.au3>

#include "GUIExtender.au3"

AutoItSetOption("GUICloseOnESC", 0)

$hMainGui = GUICreate("MyTestScript", 1300, 600)
_GUIExtender_Init($hMainGui)

; This is the first visible
$iSection_1 = _GUIExtender_Section_Start($hMainGui, 0, 200)
_GUIExtender_Section_Action($hMainGui, $iSection_1)
GUICtrlCreateLabel("", 0, 0, 1300, 200)
GUICtrlSetState(-1, $GUI_DISABLE)
GUICtrlSetBkColor(-1, 0x00FF00)
$cStartButton = GUICtrlCreateButton("Start", 610, 160, 80, 30)
_GUIExtender_Section_End($hMainGui)

; This si the second visible section
$iSection_2 = _GUIExtender_Section_Start($hMainGui, 200, 200)
_GUIExtender_Section_Action($hMainGui, $iSection_2)
GUICtrlCreateLabel("", 0, 200, 1300, 200)
GUICtrlSetState(-1, $GUI_DISABLE)
GUICtrlSetBkColor(-1, 0x0000FF)
$cExitButton = GUICtrlCreateButton("Exit", 610, 360, 80, 30)
_GUIExtender_Section_End($hMainGui)

; This section just visible while changing ths colour
$iSection_3 = _GUIExtender_Section_Start($hMainGui, 400, 200)
_GUIExtender_Section_Action($hMainGui, $iSection_3)
$cLabel = GUICtrlCreateLabel("", 0, 400, 1300, 200)
GUICtrlSetBkColor($cLabel, 0x00FF00)
_GUIExtender_Section_End($hMainGui)

; Hide second and third sections
_GUIExtender_Section_Extend($hMainGui, $iSection_2, False)
_GUIExtender_Section_Extend($hMainGui, $iSection_3, False)

GUISetState(@SW_SHOW)

While 1
    Switch GUIGetMsg()
        Case $GUI_EVENT_CLOSE
            Exit
        Case $cStartButton
            ; Hide first section and show third
            _GUIExtender_Section_Extend($hMainGui, $iSection_1, False)
            _GUIExtender_Section_Extend($hMainGui, $iSection_3, True)
            ; Change the colour of the third section gradually
            For $i = 0 To 255 Step 10
                $sHex = "00" & Hex(255 - $i, 2) & Hex($i, 2)
                GUICtrlSetBkColor($cLabel, Dec($sHex))
                Sleep(50)
            Next
            ; Now hide third section and show second
            _GUIExtender_Section_Extend($hMainGui, $iSection_3, False)
            _GUIExtender_Section_Extend($hMainGui, $iSection_2, True)

        Case $cExitButton
            ; Mirror imgage of the code above
            _GUIExtender_Section_Extend($hMainGui, $iSection_2, False)
            _GUIExtender_Section_Extend($hMainGui, $iSection_3, True)
            For $i = 0 To 255 Step 10
                $sHex = "00" & Hex($i, 2) & Hex(255 - $i, 2)
                GUICtrlSetBkColor($cLabel, Dec($sHex))
                Sleep(50)
            Next
            _GUIExtender_Section_Extend($hMainGui, $iSection_3, False)
            _GUIExtender_Section_Extend($hMainGui, $iSection_1, True)
    EndSwitch
WEnd

Please ask if you have any questions.

M23

Quegga · May 24, 2015

Thank you very much Melba23

That is a good step in the right direction what I wanted. But there is still this flickering when the background color starts to change.

I made a gif so you can see what I mean.

http://giphy.com/gifs/3o85xlupL0jW1ly3EA

(the black appears only in the gif, must be some graphic thing. It works very good, juts this one white frame is really annoying. Is there anything I can do against it?

PS: I did not think it would work to just change the background color with a for loop, I thought the result would be horrible.

Edited May 24, 2015 by Quegga

Melba23 · May 24, 2015

Quegga,

If you only want to go from white to black and back as an animation then this seems pretty flicker-free:

#include <GUIConstantsEx.au3>
#include <WindowsConstants.au3>

#include "GUIExtender.au3"

AutoItSetOption("GUICloseOnESC", 0)

$hMainGui = GUICreate("MyTestScript", 1300, 600)
_GUIExtender_Init($hMainGui)


; This is the first visible
$iSection_1 = _GUIExtender_Section_Start($hMainGui, 0, 200)
_GUIExtender_Section_Action($hMainGui, $iSection_1)
$cStartButton = GUICtrlCreateButton("Start", 610, 160, 80, 30)
_GUIExtender_Section_End($hMainGui)

; This si the second visible section
$iSection_2 = _GUIExtender_Section_Start($hMainGui, 200, 200)
_GUIExtender_Section_Action($hMainGui, $iSection_2)
$cExitButton = GUICtrlCreateButton("Exit", 610, 360, 80, 30)
_GUIExtender_Section_End($hMainGui)

; This section just visible while changing ths colour
$iSection_3 = _GUIExtender_Section_Start($hMainGui, 400, 200)
_GUIExtender_Section_Action($hMainGui, $iSection_3)
$cLabel = GUICtrlCreateLabel("", 0, 400, 1300, 200)
GUICtrlSetBkColor($cLabel, 0xFFFFFF)
_GUIExtender_Section_End($hMainGui)

; Hide second and third sections
_GUIExtender_Section_Extend($hMainGui, $iSection_2, False)
_GUIExtender_Section_Extend($hMainGui, $iSection_3, False)

GUISetState(@SW_SHOW)

While 1
    Switch GUIGetMsg()
        Case $GUI_EVENT_CLOSE
            Exit
        Case $cStartButton

            ; Hide first section and show third
            _GUIExtender_Section_Extend($hMainGui, $iSection_1, False)
            _GUIExtender_Section_Extend($hMainGui, $iSection_3, True)
            ; Change the colour of the third section gradually to black and back again
            _Colour_Change()
            ; Now hide third section and show second
            _GUIExtender_Section_Extend($hMainGui, $iSection_3, False)
            _GUIExtender_Section_Extend($hMainGui, $iSection_2, True)
        Case $cExitButton

            ; Mirror imgage of the code above
            _GUIExtender_Section_Extend($hMainGui, $iSection_2, False)
            _GUIExtender_Section_Extend($hMainGui, $iSection_3, True)
            _Colour_Change()
            _GUIExtender_Section_Extend($hMainGui, $iSection_3, False)
            _GUIExtender_Section_Extend($hMainGui, $iSection_1, True)
    EndSwitch

WEnd



Func _Colour_Change()

    For $i = 0 To 255 Step 20
        $sHex = Hex(255 - $i, 2) & Hex(255 - $i, 2) & Hex(255 - $i, 2)
        GUICtrlSetBkColor($cLabel, Dec($sHex))
        Sleep(50)
    Next
    For $i = 0 To 255 Step 20
        $sHex = Hex($i, 2) & Hex($i, 2) & Hex($i, 2)
        GUICtrlSetBkColor($cLabel, Dec($sHex))
        Sleep(50)
    Next


EndFunc

How is that?

M23

Quegga · May 24, 2015

Thanks, it looks really smooth now.

I will try it out with different backgroudn colors and tell you if it worked

Quegga · May 24, 2015

I have just one quick question. I am a bit confused by the $GuiSection1 = _GUIExtender_Section_Start($MainGui, 0,200)

My Gui has the size 1300*800. How can I get each GuiSection to have this size? (lets say I have a total of 10 Section when I am done)

I read the documentation in your #include file, is says the 0 stands for upper left corner coordinate, the 200 for the size.

How exactley are those coordinates representated by just a single number? I think I tried almost every combination but either the window is with zero size or every button is displayed at once.

Edited May 24, 2015 by Quegga

Melba23 · May 24, 2015

Quegga,

Set the main GUI to be the size of all the sections - then each section sets its own size. As you want 3 sections all of 1300 x 800, you need to do this:

; Note you need to define the vertical position or else you will find the top of the GUI off the top of the display 
$hMainGui = GUICreate("MyTestScript", 1300, 2400, Default, 100) ; 2400 deep to contain 3 x 800
_GUIExtender_Init($hMainGui)

; This is the first visible
$iSection_1 = _GUIExtender_Section_Start($hMainGui, 0, 800) ; This section starts at 0 and is 800 deep
_GUIExtender_Section_Action($hMainGui, $iSection_1)
$cStartButton = GUICtrlCreateButton("Start", 610, 760, 80, 30) ; Reset control locations to match new section size
_GUIExtender_Section_End($hMainGui)

; This is the second visible section
$iSection_2 = _GUIExtender_Section_Start($hMainGui, 800, 800) ; This section starts at 800 and is 800 deep
_GUIExtender_Section_Action($hMainGui, $iSection_2)
$cExitButton = GUICtrlCreateButton("Exit", 610, 1560, 80, 30) ; Reset control location to match new section size
_GUIExtender_Section_End($hMainGui)

; This section just visible while changing ths colour
$iSection_3 = _GUIExtender_Section_Start($hMainGui, 1600, 800) ; This section starts at 1600 and is 800 deep
_GUIExtender_Section_Action($hMainGui, $iSection_3)
$cLabel = GUICtrlCreateLabel("", 0, 1600, 1300, 800) ; Reset control size and location to match new section size
GUICtrlSetBkColor($cLabel, 0xFFFFFF)
_GUIExtender_Section_End($hMainGui)

All the controls in a section must be created between the _GUIExtender_Section_Start/End pair so that the UDF knows in which section they are located and so can show/hide them as required. Clearer now?

M23

Quegga · May 24, 2015

Alright, I think I got it. I is still flickering, but I think I can live with it

Here is the finished code, so you see what it was all about. Thanks very much for helping!

#include <GUIConstantsEx.au3>
#include "GUIExtender.au3"
#include <WindowsConstants.au3>

Global $HintergrundFarbeR = 120
Global $HintergrundFarbeG = 240
Global $HintergrundFarbeB = 120
Global $RRR,$GGG,$BBB

AutoItSetOption("GUICloseOnESC",0)
$MainGui = GuiCreate("Game Without Name",1300,3200,100,100)
GUISetBkColor("0x" & Hex($HintergrundFarbeR, 2) & Hex($HintergrundFarbeG, 2) & Hex($HintergrundFarbeB, 2))
_GUIExtender_Init($MainGui)

$GuiSection1 = _GUIExtender_Section_Start($MainGui, 0,800)
_GUIExtender_Section_Action($MainGui, $GuiSection1)
$FarbeEinstellenKnopf = GuiCtrlCreateButton("Set Color",600,500,300,50)
GUICtrlSetFont($FarbeEinstellenKnopf,25)
$StartKnopf = GuiCtrlCreateButton("Start",600,700,100,50)
GUICtrlSetFont($StartKnopf,25)
$SchliessenKnopf = GuiCtrlCreateButton("Close",900,700,150,50)
GUICtrlSetFont($SchliessenKnopf,25)
_GUIExtender_Section_End($MainGui)

$GuiSection2 = _GUIExtender_Section_Start($MainGui, 800, 800)
_GUIExtender_Section_Action($MainGui, $GuiSection2)
$BeendenKnopf = GuiCtrlCreateButton("End",600,1500,130,50)
GUICtrlSetFont($BeendenKnopf,25)
;$Bild1 = GuiCtrlCreatePic(@ScriptDir&"\lib\Windmuehle.jpg",300,1000,300,300)
_GUIExtender_Section_End($MainGui)

$GuiSection3 = _GUIExtender_Section_Start($MainGui, 1600, 800)
_GUIExtender_Section_Action($MainGui, $GuiSection3)
$FarbeGelb = GuiCtrlCreateButton("Gelb",200,1700,100,50)
$FarbeRot = GuiCtrlCreateButton("Rot",400,1700,100,50)
$FarbeGruen = GuiCtrlCreateButton("Grün",600,1700,100,50)
$FarbeBlau = GuiCtrlCreateButton("Blau",200,1900,100,50)
$FarbeWeiss = GuiCtrlCreateButton("Weiß",400,1900,100,50)
$FarbeSchwarz = GuiCtrlCreateButton("Schwarz",600,1900,100,50)
$FarbeFertigKnopf = GuiCtrlCreateButton("Fertig",600,2100,130,50)
GUICtrlSetFont($FarbeFertigKnopf,25)
_GUIExtender_Section_End($MainGui)

$GuiSectionFade = _GUIExtender_Section_Start($MainGui, 2400, 800)
_GUIExtender_Section_Action($MainGui, $GuiSectionFade)
$FadeLabel = GUICtrlCreateLabel("", 0, 2400, 1300, 800)
_GUIExtender_Section_End($MainGui)

_GUIExtender_Section_Extend($MainGui, $GuiSection2, False)
_GUIExtender_Section_Extend($MainGui, $GuiSection3, False)
_GUIExtender_Section_Extend($MainGui, $GuiSectionFade, False)

GUISetState(@SW_SHOW)

While True
   Switch GuiGetMsg()
   Case $GUI_EVENT_CLOSE
      Exit
   Case $SchliessenKnopf
      Exit
   Case $StartKnopf
      _SectionWechsel(1,2,False)
   Case $BeendenKnopf
      _SectionWechsel(2,1,False)
   Case $FarbeEinstellenKnopf
      _SectionWechsel(1,3,False)
   Case $FarbeGelb
      _HintergrundFarbe(210,200,65)
   Case $FarbeRot
      _HintergrundFarbe(210,75,80)
   Case $FarbeBlau
      _HintergrundFarbe(55,85,210)
   Case $FarbeGruen
      _HintergrundFarbe(120,240,120)
   Case $FarbeWeiss
      _HintergrundFarbe(255,255,255)
   Case $FarbeSchwarz
      _HintergrundFarbe(0,0,0)
   Case $FarbeFertigKnopf
      _SectionWechsel(3,1,False)
   EndSwitch
   Sleep(25)
WEnd

Func _SectionWechsel($a,$b,$bool)
   _GUIExtender_Section_Extend($MainGui, Eval("GuiSection"&$a), False)
   _GUIExtender_Section_Extend($MainGui, $GuiSectionFade, True)
   _FarbeFade($bool)
   _GUIExtender_Section_Extend($MainGui, $GuiSectionFade, False)
   _GUIExtender_Section_Extend($MainGui, Eval("GuiSection"&$b), True)
EndFunc

Func _FarbeFade($bool)
    For $i = 0 To 255 Step 35
      $R = $HintergrundFarbeR - $i
      If $R < 0 Then $R = 0
      $G = $HintergrundFarbeG - $i
      If $G < 0 Then $G = 0
      $B = $HintergrundFarbeB - $i
      If $B < 0 Then $B = 0
      $sHex = Hex($R, 2) & Hex($G, 2) & Hex($B, 2)
      GUICtrlSetBkColor($FadeLabel,"0x"&$sHex)
      Sleep(50)
   Next
   If $bool == True Then
      $HintergrundFarbeR = $RRR
      $HintergrundFarbeG = $GGG
      $HintergrundFarbeB = $BBB
   EndIf
    For $i = 0 To 255 Step 25
      $R = $i
      If $R > $HintergrundFarbeR Then $R = $HintergrundFarbeR
      $G = $i
      If $G > $HintergrundFarbeG Then $G = $HintergrundFarbeG
      $B = $i
      If $B > $HintergrundFarbeB Then $B = $HintergrundFarbeB
      $sHex = Hex($R, 2) & Hex($G, 2) & Hex($B, 2)
      GUICtrlSetBkColor($FadeLabel,"0x"&$sHex)
      Sleep(50)
    Next
 EndFunc

Func _HintergrundFarbe($RR,$GG,$BB)
   $RRR = $RR
   $GGG = $GG
   $BBB = $BB
   _SectionWechsel(3,3,True)
   $HintergrundFarbeR = $RR
   $HintergrundFarbeG = $GG
   $HintergrundFarbeB = $BB
   GUISetBkColor("0x" & Hex($HintergrundFarbeR, 2) & Hex($HintergrundFarbeG, 2) & Hex($HintergrundFarbeB, 2))
EndFunc

Melba23 · May 25, 2015

Quegga,

I fear you will always have some flicker when recolouring such a large screen area rapidly in a loop. Perhaps someone else might have a different solution - try opening a new thread and asking.

M23

Sign In

Animation between tab-switches in gui

Recommended Posts

Quegga

Link to comment

Share on other sites

Melba23

Link to comment

Share on other sites

Quegga

Link to comment

Share on other sites

Melba23

Link to comment

Share on other sites

Quegga

Link to comment

Share on other sites

Quegga

Link to comment

Share on other sites

Melba23

Link to comment

Share on other sites

Quegga

Link to comment

Share on other sites

Melba23

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Recently Browsing 0 members

Browse

AutoIt Resources

Release

Beta