Page 1 of 1

Realizing a fading images banner

Posted: Tue Nov 24, 2015 9:59 pm
by es_91
Hi, community.

The example below displays what I would like to have - only the soft fade between the switching images is missing.

Can you give me ideas on how to do this? Is Sprite/Screen necessary for this?

Code: Select all

BannerImage = 1
AmountOfBannerImages = 4

Dim BannerSet (AmountOfBannerImages - 1)

For Index = 1 To 4
  
  BannerSet (Index) = LoadImage (#PB_Any, "banner" + Str (Index) + ".jpg")
Next

Macro CVS_RESIZEDATA
  
  WindowWidth (wnd) / 2 - 360, 50, 720, 260
EndMacro

Procedure SetBannerMixture (ImageOld. i, ImageNew. i, Alpha. w)
  
  Shared cvs
  
  StartDrawing (CanvasOutput (cvs))
  Box (0, 0, GadgetWidth (cvs), GadgetHeight (cvs), RGB (0, 0, 0))
  DrawImage (ImageID (ImageOld), 0, 0, GadgetWidth (cvs), GadgetHeight (cvs))
  DrawImage (ImageID (ImageNew), 0, 0, GadgetWidth (cvs), GadgetHeight (cvs))
  StopDrawing ()
EndProcedure

Declare SizeWindowCallback ()

Declare BannerTimer ()
Declare BannerTimerLrg ()
Declare Event_Timer ()

wnd = OpenWindow (#PB_Any, 0, 0, 0, 0, "Background", #PB_Window_Background)

AddWindowTimer (wnd, 2500, 2500)
AddWindowTimer (wnd, 5, 5)

cvs = CanvasGadget (#PB_Any, CVS_RESIZEDATA)

BindEvent (#PB_Event_Timer, @ Event_Timer ())

BindEvent (#PB_Event_SizeWindow, @ SizeWindowCallback (), wnd)

Procedure BannerTimer ()
  
  Shared BannerImage
  Shared BannerSet ()
  
  Static CurrBannerImage
  Static FadeProcessTrigered. b
  Static FadeProgress. i
  
  If BannerImage <> CurrBannerImage
    
    FadeProcessTriggered = #True
    FadeProgress = 0
    CurrBannerImage = BannerImage
  EndIf
  
  If FadeProcessTriggered = #True
    
    If FadeProgress = 256
      
      FadeProgress = 0
      FadeProcessTriggered = #False
    Else
      
      FadeProcess + 1
      SetBannerMixture (BannerSet (CurrBannerImage), BannerSet (BannerImage), FadeProcess)
    EndIf
  EndIf
EndProcedure

Procedure BannerTimerLrg ()
  
  Shared BannerImage, AmountOfBannerImages
  
  BannerImage = BannerImage + 1
  
  If BannerImage = AmountOfBannerImages + 1
    
    BannerImage = 1
  EndIf
EndProcedure

Procedure Event_Timer ()
  
  Select EventTimer ()
      
    Case 5
      
      BannerTimer ()
    Case 2500
      
      BannerTimerLrg ()
  EndSelect
EndProcedure

Procedure SizeWindowCallback ()
  
  Shared wnd, cvs
  
  ResizeGadget (cvs, CVS_RESIZEDATA)
EndProcedure
Here are the images (to be placed in the same directory as the 'main.sb' file):

http://enhash.bplaced.net/users/enhash/ ... anners.zip

Re: Realizing a fading images banner

Posted: Wed Nov 25, 2015 10:03 am
by Fred
Should be doable with screen/sprite, but you will be limited to one screen. You can try tweaking the context to apply an alpha value to the image:

Code: Select all

BannerImage = 1
AmountOfBannerImages = 4

Dim BannerSet (AmountOfBannerImages - 1)

For Index = 1 To 4
 
  BannerSet (Index) = LoadImage (#PB_Any, "banner" + Str (Index) + ".jpg")
Next

Macro CVS_RESIZEDATA
 
  WindowWidth (wnd) / 2 - 360, 50, 720, 260
EndMacro

Procedure SetBannerMixture (ImageOld. i, ImageNew. i, Alpha. w)
 
  Shared cvs
 
  Context = StartDrawing (CanvasOutput (cvs))
  Box (0, 0, GadgetWidth (cvs), GadgetHeight (cvs), RGB (0, 0, 0))
  !v_context.globalAlpha = 0.5
  DrawImage (ImageID (ImageOld), 0, 0, GadgetWidth (cvs), GadgetHeight (cvs))
  !v_context.globalAlpha = 0.5
  DrawImage (ImageID (ImageNew), 0, 0, GadgetWidth (cvs), GadgetHeight (cvs))
  StopDrawing ()
EndProcedure

Declare SizeWindowCallback ()

Declare BannerTimer ()
Declare BannerTimerLrg ()
Declare Event_Timer ()

wnd = OpenWindow (#PB_Any, 0, 0, 0, 0, "Background", #PB_Window_Background)

AddWindowTimer (wnd, 2500, 2500)
AddWindowTimer (wnd, 5, 5)

cvs = CanvasGadget (#PB_Any, CVS_RESIZEDATA)

BindEvent (#PB_Event_Timer, @ Event_Timer ())

BindEvent (#PB_Event_SizeWindow, @ SizeWindowCallback (), wnd)

Procedure BannerTimer ()
 
  Shared BannerImage
  Shared BannerSet ()
 
  Static CurrBannerImage
  Static FadeProcessTrigered. b
  Static FadeProgress. i
 
  If BannerImage <> CurrBannerImage
   
    FadeProcessTriggered = #True
    FadeProgress = 0
    CurrBannerImage = BannerImage
  EndIf
 
  If FadeProcessTriggered = #True
   
    If FadeProgress = 256
     
      FadeProgress = 0
      FadeProcessTriggered = #False
    Else
     
      FadeProcess + 1
      SetBannerMixture (BannerSet (CurrBannerImage), BannerSet (BannerImage), FadeProcess)
    EndIf
  EndIf
EndProcedure

Procedure BannerTimerLrg ()
 
  Shared BannerImage, AmountOfBannerImages
 
  BannerImage = BannerImage + 1
 
  If BannerImage = AmountOfBannerImages + 1
   
    BannerImage = 1
  EndIf
EndProcedure

Procedure Event_Timer ()
 
  Select EventTimer ()
     
    Case 5
     
      BannerTimer ()
    Case 2500
     
      BannerTimerLrg ()
  EndSelect
EndProcedure

Procedure SizeWindowCallback ()
 
  Shared wnd, cvs
 
  ResizeGadget (cvs, CVS_RESIZEDATA)
EndProcedure
On a side note, I think I will add DrawAlphaImage() for the next version, so you can do that easily.

Re: Realizing a fading images banner

Posted: Thu Nov 26, 2015 11:09 pm
by es_91
Thanks, Fred. Nice that you found time for this. : )