Realizing a fading images banner

Just starting out? Need help? Post your questions and find answers here.
es_91
Posts: 56
Joined: Sat Aug 29, 2015 10:25 pm

Realizing a fading images banner

Post 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
nu2dascene
Fred
Site Admin
Posts: 1820
Joined: Mon Feb 24, 2014 10:51 am

Re: Realizing a fading images banner

Post 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.
es_91
Posts: 56
Joined: Sat Aug 29, 2015 10:25 pm

Re: Realizing a fading images banner

Post by es_91 »

Thanks, Fred. Nice that you found time for this. : )
nu2dascene
Post Reply