Fotos ein/aus Blendeffekte und Scrolleffekte

[stab]

Hallo,

gibt es hier im Forum oder sonstwo dazu einige Beispiele?

Gruß stab

[STARGÅTE]

Ein/aus Blendeffekte kannst du mit:

Code: Alles auswählen

DrawAlphaImage(ImageID, X, Y, Alpha) ; Alpha zwischen 0 (transparent) und 255 (sichtbar)

oder im Screen mit

Code: Alles auswählen

DrawTransparentSprite(Sprite, X, Y, Intensity) ; Intensity zwischen 0 (transparent) und 255 (sichtbar)

erzeugen.

Was sind Scrolleffekte?

[stab]

Erstmal Danke.

Scrollen? Keine Ahnung, wie ich es sonst nennen soll.
Das Bild nach oben, unten, rechts, links aus dem Fenster schieben.
Ich denke, das kriege ich hin mit Resize etc.
Wenn es einer fertig hätte, wär* halt einfacher.

Zum Blendeffekt. Danke für den Tip.
Ich habe mal wieder kein funktionierendes Beispiel gefunden und aus der Hilfe mir folgendes zusammengebastelt.
So ganz toll finde ich es aber nicht. Flackert alles unheimlich.

Code: Alles auswählen

UseJPEGImageDecoder()

foto$ = "x:\nsa\angela_nackt.jpg" ; oder was gerade zur Hand ist
LoadImage(2, foto$)

Global b = ImageWidth(2)
Global h = ImageHeight(2)

If OpenWindow(0, 0, 0, b, h, "Alphachannel demo für Dummies", #PB_Window_SystemMenu|#PB_Window_ScreenCentered)
  For alpha = 255 To 1 Step -15
    If CreateImage(0, b, h, 24) And StartDrawing(ImageOutput(0))
      DrawAlphaImage(ImageID(2), 0, 0, alpha)
      DrawingMode(#PB_2DDrawing_AlphaBlend | #PB_2DDrawing_Transparent)
      StopDrawing()
    EndIf
 
    If CreateImage(1, b, h, 24) And StartDrawing(ImageOutput(1))
      DrawAlphaImage(ImageID(0), 0, 0)
      StopDrawing()
    EndIf
 
    ImageGadget(0, 0, 0, 0, 0, ImageID(1))
    Delay(50)  
  Next 
EndIf

Repeat
Until WaitWindowEvent() = #PB_Event_CloseWindow

Außerdem verstehe ich das noch nicht ganz.
Hier werden wohl irgenwie 2 Teile übereinandergelagert.

Geht's denn auch einfacher?

Gruß stab

[STARGÅTE]

Dieser Code ist ein völlig falscher Ansatz.

Es flackert, weil du während der Änderungen am Bild keine Ereigniesse am Fenster abfrasgst und die Bilder jedesmal neu erstellst. Außerdem ist es irgendwie quatsch, dass gleiche Bild zu überblenden.

Hier mal ein Beispiel für das Überblenden einen 2. Bilds über ein 1. Bild mit Zeitsteuerung:

Code: Alles auswählen

Enumeration
  #Window
  #Image1
  #Image2
  #Gadget
  #Timer
EndEnumeration

CreateImage(#Image1, 400, 300, 24, $FF0000) ; Hier kannst du deine eigenen Bilder laden
CreateImage(#Image2, 400, 300, 24, $0000FF)

OpenWindow(#Window, 0, 0, 400, 300, "Beispiel", #PB_Window_ScreenCentered|#PB_Window_SystemMenu)
CanvasGadget(#Gadget, 0, 0, 400, 300)

AddWindowTimer(#Window, #Timer, 50)

Define Alpha

Repeat
  Select WaitWindowEvent()
    Case #PB_Event_Timer
      Select EventTimer()
        Case #Timer
          Alpha = 128+Sin(ElapsedMilliseconds()/500)*127
          If StartDrawing(CanvasOutput(#Gadget))
            DrawImage(ImageID(#Image1), 0, 0)
            DrawAlphaImage(ImageID(#Image2), 0, 0, Alpha)
            StopDrawing()
          EndIf
      EndSelect
    Case #PB_Event_CloseWindow
      End
  EndSelect
ForEver

Das Bild nach oben, unten, rechts, links aus dem Fenster schieben.

Du kannst einen Maus-Click auf das Bild (CanvasGadget) abfragen, und die Koordinaten des Bilds dann an die Maus "häften".
Dann kannst du mit der Maus ein Bild "aus dem Fenster schieben".

[stab]

Super und 1000*1000Dank!
Bin begeistert, wie toll das ein/ausblenden mit den Fotos funktioniert!

Ich hab' mir schon gedacht, dass mein Ansatz falsch ist,
aber auch noch nicht mit 2DDrawing-Effekten gearbeitet.
Das CanvasGadget auch noch nie eingesetzt.
Ich muss nur sehen, ob ich es jetzt einfach gegen meine ImageGadgets austauschen kann.

Solche schönen Beispiele wünsche ich mir öfter.

Gruß stab

[NicTheQuick]

Ich muss nur sehen, ob ich es jetzt einfach gegen meine ImageGadgets austauschen kann.

ImageGadgets sind dafür nicht gedacht, sondern nur das CanvasGadget. Also tausch da nichts mit dem 'ImageGadget()', sondern höchstens die Bilder an sich.

[Rebon]

ImageGadgets sind dafür nicht gedacht, sondern nur das CanvasGadget. Also tausch da nichts mit dem 'ImageGadget()', sondern höchstens die Bilder an sich.

Er meinte glaube ich, dass er in seinem Code versuchen wird, ImageGadget() durch CanvasGadget() zu ersetzen.

[stab]

ImageGadgets sind dafür nicht gedacht, sondern nur das CanvasGadget. Also tausch da nichts mit dem 'ImageGadget()', sondern höchstens die Bilder an sich.

Er meinte glaube ich, dass er in seinem Code versuchen wird, ImageGadget() durch CanvasGadget() zu ersetzen.

Genau!
Dem scheint ja auch nichts zu widersprechen, soweit ich das beurteilen kann.
Außer dass ich 3 Zeilen mehr Code habe:

StartDrawing
DrawImage
StopDrawing

Das ein/ausblenden funktioniert ja super.
Ich habe jetzt mal versucht, mein scrollen umzusetzen.

Code: Alles auswählen

Global bild1 = 1
Global bild2 = 2

; UseJPEGImageDecoder()
; foto1$ = "x:\nsa\A4Scan_angela1.jpg" ; oder was gerade zur Hand ist
; LoadImage(bild1, foto1$)
; foto2$ = "x:\nsa\A4Scan_angela2.jpg" ; oder was gerade zur Hand ist
; LoadImage(bild2, foto2$)
; Global bb = ImageWidth(1)
; Global bh = ImageHeight(1)

Global bh = GetSystemMetrics_(#SM_CYSCREEN) 
Global bb = bh / 1.41

CreateImage(bild1, bb, bh, 24, $FF0000) 
CreateImage(bild2, bb, bh, 24, $0000FF)

OpenWindow(1, 0, 0, bb, bh, "CanvasGadget", #PB_Window_SystemMenu)
   CanvasGadget(5, 0, 0, bb, bh)
   StartDrawing(CanvasOutput(5))
   DrawImage(ImageID(bild1), 0, 0)
   StopDrawing() 
   Delay(2500)
           
Repeat       
  
   ; Debug "Gähn, Zeit für Kaffee holen!"
  
   For t = 0 To bh
     tt = t * (-1)
     StartDrawing(CanvasOutput(5))
     DrawImage(ImageID(bild1), 0, tt)
     DrawImage(ImageID(bild2), 0, tt + bh)
     StopDrawing()
     Delay (1)
   Next
      
   Delay(2500)
         
   Swap bild1 , bild2
         
Until WaitWindowEvent() = #PB_Event_CloseWindow        

Das ist ja quälend langsam. Ich dachte, dass geht etwas flotter.
Auch auch bei schwarz/weiß Bildern arbeitet PB ja mit 24Bit.

Oder hatte ich wieder den falschen Ansatz?

Gruß stab

KORREKTUR: Sorry, es geht natürlich schneller, wenn ich in der For/Next Schleife einen Step einsetze!
Habe jetzt für mich eine Lösung gefunden, die bei Dokumenten ganz anschaulich wirkt, auf jeden fall nicht flimmert.

Code: Alles auswählen

     For t = 0 To bh Step 200
     tt = t * (-1)
     StartDrawing(CanvasOutput(5))
     DrawImage(ImageID(bild1), 0, tt)
     DrawImage(ImageID(bild2), 0, tt + bh)
     StopDrawing()
     Delay (100)
   Next
 

[Danilo]

Warum immer diese Delay()? WaitWindowEvent() blockiert, also läuft Deine Animation nur weiter,
wenn Events eintreffen. Du könntest dafür einen Timer benutzen.

Code: Alles auswählen

Global bild1 = 1
Global bild2 = 2
Global bild3 = 3

; UseJPEGImageDecoder()
; foto1$ = "x:\nsa\A4Scan_angela1.jpg" ; oder was gerade zur Hand ist
; LoadImage(bild1, foto1$)
; foto2$ = "x:\nsa\A4Scan_angela2.jpg" ; oder was gerade zur Hand ist
; LoadImage(bild2, foto2$)
; Global bb = ImageWidth(1)
; Global bh = ImageHeight(1)

Global bh = 1200;GetSystemMetrics_(#SM_CYSCREEN) 
Global bb = bh / 1.41

Procedure Timer()
    Static sin.d, Alpha, direction
    sin+2
    If StartDrawing(CanvasOutput(5))
        DrawImage(ImageID(bild1), 0, 0)
        DrawImage(ImageID(bild2), 0, Sin(Radian(sin))*bh)
        ;DrawAlphaImage(ImageID(bild3),Cos(Radian(sin))*200+bb*0.5-ImageWidth(bild3) *0.5,
        ;                              Cos(Radian(sin))*200+bh*0.5-ImageHeight(bild3)*0.5,alpha)
        StopDrawing()
    EndIf
    If direction : Alpha-1 : If Alpha <=0   : Alpha=0   : direction!1 : EndIf
    Else         : Alpha+5 : If Alpha >=255 : Alpha=255 : direction!1 : EndIf
    EndIf
EndProcedure

CreateImage(bild1, bb, bh, 24, RGB(0,0,255))
CreateImage(bild2, bb, bh, 24, RGB(255,0,0))
CreateImage(bild3, bb*0.5, bh*0.5, 24, RGB(255,255,0))

OpenWindow(1, 0, 0, bb, bh, "CanvasGadget", #PB_Window_SystemMenu)
CanvasGadget(5, 0, 0, bb, bh)
If StartDrawing(CanvasOutput(5))
    DrawImage(ImageID(bild1), 0, 0)
    StopDrawing() 
EndIf

AddWindowTimer(1,0,1000/60)

BindEvent(#PB_Event_Timer,@Timer())

Repeat:Until WaitWindowEvent()=#PB_Event_CloseWindow

[stab]

Warum immer diese Delay()? WaitWindowEvent() blockiert, also läuft Deine Animation nur weiter,
wenn Events eintreffen. Du könntest dafür einen Timer benutzen.

Ich wollte Euch mal herausfordern!
Danke für die tollen Effekte und und den professionellen Code!

Gruß stab