Jump to content
Quegga

Animation between tab-switches in gui

Recommended Posts

Quegga

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 by Quegga
edit: removed unnecessary code

Share this post


Link to post
Share on other sites
Melba23

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


Public_Domain.png.2d871819fcb9957cf44f4514551a2935.png Any of my own code posted anywhere on the forum is available for use by others without any restriction of any kind

Open spoiler to see my UDFs:

Spoiler

ArrayMultiColSort ---- Sort arrays on multiple columns
ChooseFileFolder ---- Single and multiple selections from specified path treeview listing
Date_Time_Convert -- Easily convert date/time formats, including the language used
ExtMsgBox --------- A highly customisable replacement for MsgBox
GUIExtender -------- Extend and retract multiple sections within a GUI
GUIFrame ---------- Subdivide GUIs into many adjustable frames
GUIListViewEx ------- Insert, delete, move, drag, sort, edit and colour ListView items
GUITreeViewEx ------ Check/clear parent and child checkboxes in a TreeView
Marquee ----------- Scrolling tickertape GUIs
NoFocusLines ------- Remove the dotted focus lines from buttons, sliders, radios and checkboxes
Notify ------------- Small notifications on the edge of the display
Scrollbars ----------Automatically sized scrollbars with a single command
StringSize ---------- Automatically size controls to fit text
Toast -------------- Small GUIs which pop out of the notification area

 

Share this post


Link to post
Share on other sites
Quegga

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 by Quegga

Share this post


Link to post
Share on other sites
Melba23

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


Public_Domain.png.2d871819fcb9957cf44f4514551a2935.png Any of my own code posted anywhere on the forum is available for use by others without any restriction of any kind

Open spoiler to see my UDFs:

Spoiler

ArrayMultiColSort ---- Sort arrays on multiple columns
ChooseFileFolder ---- Single and multiple selections from specified path treeview listing
Date_Time_Convert -- Easily convert date/time formats, including the language used
ExtMsgBox --------- A highly customisable replacement for MsgBox
GUIExtender -------- Extend and retract multiple sections within a GUI
GUIFrame ---------- Subdivide GUIs into many adjustable frames
GUIListViewEx ------- Insert, delete, move, drag, sort, edit and colour ListView items
GUITreeViewEx ------ Check/clear parent and child checkboxes in a TreeView
Marquee ----------- Scrolling tickertape GUIs
NoFocusLines ------- Remove the dotted focus lines from buttons, sliders, radios and checkboxes
Notify ------------- Small notifications on the edge of the display
Scrollbars ----------Automatically sized scrollbars with a single command
StringSize ---------- Automatically size controls to fit text
Toast -------------- Small GUIs which pop out of the notification area

 

Share this post


Link to post
Share on other sites
Quegga

Thanks, it looks really smooth now.

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

Share this post


Link to post
Share on other sites
Quegga

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 by Quegga

Share this post


Link to post
Share on other sites
Melba23

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


Public_Domain.png.2d871819fcb9957cf44f4514551a2935.png Any of my own code posted anywhere on the forum is available for use by others without any restriction of any kind

Open spoiler to see my UDFs:

Spoiler

ArrayMultiColSort ---- Sort arrays on multiple columns
ChooseFileFolder ---- Single and multiple selections from specified path treeview listing
Date_Time_Convert -- Easily convert date/time formats, including the language used
ExtMsgBox --------- A highly customisable replacement for MsgBox
GUIExtender -------- Extend and retract multiple sections within a GUI
GUIFrame ---------- Subdivide GUIs into many adjustable frames
GUIListViewEx ------- Insert, delete, move, drag, sort, edit and colour ListView items
GUITreeViewEx ------ Check/clear parent and child checkboxes in a TreeView
Marquee ----------- Scrolling tickertape GUIs
NoFocusLines ------- Remove the dotted focus lines from buttons, sliders, radios and checkboxes
Notify ------------- Small notifications on the edge of the display
Scrollbars ----------Automatically sized scrollbars with a single command
StringSize ---------- Automatically size controls to fit text
Toast -------------- Small GUIs which pop out of the notification area

 

Share this post


Link to post
Share on other sites
Quegga

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

 

Share this post


Link to post
Share on other sites
Melba23

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


Public_Domain.png.2d871819fcb9957cf44f4514551a2935.png Any of my own code posted anywhere on the forum is available for use by others without any restriction of any kind

Open spoiler to see my UDFs:

Spoiler

ArrayMultiColSort ---- Sort arrays on multiple columns
ChooseFileFolder ---- Single and multiple selections from specified path treeview listing
Date_Time_Convert -- Easily convert date/time formats, including the language used
ExtMsgBox --------- A highly customisable replacement for MsgBox
GUIExtender -------- Extend and retract multiple sections within a GUI
GUIFrame ---------- Subdivide GUIs into many adjustable frames
GUIListViewEx ------- Insert, delete, move, drag, sort, edit and colour ListView items
GUITreeViewEx ------ Check/clear parent and child checkboxes in a TreeView
Marquee ----------- Scrolling tickertape GUIs
NoFocusLines ------- Remove the dotted focus lines from buttons, sliders, radios and checkboxes
Notify ------------- Small notifications on the edge of the display
Scrollbars ----------Automatically sized scrollbars with a single command
StringSize ---------- Automatically size controls to fit text
Toast -------------- Small GUIs which pop out of the notification area

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×