professionelle Slide-Show mit Einblendungs-Effekt

    • Allgemein

      professionelle Slide-Show mit Einblendungs-Effekt

      Hallo liebe Community.

      In diesem Tutorial möchte ich euch zeigen wie man eine SlideShow (basis) erstellt.

      Dann fangen wir mal an:

      Als erstes erstellt ihr eine einfache Form die etwa so aussehen soll:


      Die Eigenschaften könnt ihr alle eigentlich selbst entscheiden. Falls ihr Sie so haben wollt wie ich, habe ich sie hier mal:


      Eigentlich sind alle Eigenschaften nur Optisch. Jedoch sieht es so meiner Meinung nach am besten aus, da ja schwarz eingeblendet wird.


      Kommen wir nun zum Code:

      Ok als erstes erstellen wir eine Klasse unter dem Namen: Functions
      Diese ist etwas komplizierter.
      Wir importieren zuerst:

      VB.NET-Quellcode

      1. Imports System.Drawing.Imaging
      2. Imports System.Drawing.Drawing2D


      Nun kommen wir zu dem Modul das wir erstellen bzw. zu den Publics und Privats:

      VB.NET-Quellcode

      1. Module Functions
      2. Private r As New Random(Now.Millisecond)
      3. Public Const Duration = 1000 'Anzeigedauer
      4. Public blend_form As New Form With {.FormBorderStyle = Windows.Forms.FormBorderStyle.None, .ShowIcon = False, .ShowInTaskbar = False, .WindowState = FormWindowState.Maximized, .BackColor = Color.Black, .Opacity = 0.0}
      5. Public AllImages As New List(Of Image)
      6. Private _state = -1
      7. Public PrevImage As Image
      8. Public NextImage As Image


      Sooo...
      Nun kommen wir zu unserer ersten Sub:
      -Erklärungen beigesetzt-

      VB.NET-Quellcode

      1. Public Sub ShowNextImage()
      2. _state += 1
      3. If _state = AllImages.Count Then
      4. 'Form ausblenden
      5. For index = 100 To 0 Step -1
      6. blend_form.Opacity = index / 100
      7. Threading.Thread.Sleep(15)
      8. Next
      9. blend_form.Close()
      10. Exit Sub
      11. End If
      12. 'Erstes Bild ist eine Ausnahme
      13. If _state = 0 Then
      14. Dim empty_image As New Bitmap(1, 1)
      15. PrevImage = empty_image
      16. NextImage = AllImages.First
      17. blend_form.Invoke(New Action(AddressOf TransparentBlend))
      18. GoTo 1
      19. End If
      21. 'Nächstes Bild wählen
      22. PrevImage = AllImages(_state - 1)
      23. NextImage = AllImages(_state)
      24. Select Case r.Next(0, 4)
      25. Case Is = 0
      26. blend_form.Invoke(New Action(AddressOf TransparentBlend))
      27. Case Is = 1
      28. blend_form.Invoke(New Action(AddressOf FromRight))
      29. Case Is = 2
      30. blend_form.Invoke(New Action(AddressOf FromUnder))
      31. Case Is = 3
      32. blend_form.Invoke(New Action(AddressOf UpperLeft))
      33. End Select
      35. 1: Threading.Thread.Sleep(Duration)
      36. ShowNextImage()
      37. End Sub


      Jetzt komme ich auch schon zu den Übergangseffekten.
      (Ihr könnt es mit

      VB.NET-Quellcode

      1. #Region "Übergangseffekte"

      einkasteln.
      Ich entschuldige mich gleichmal dafür dass hieer manchmal die erklärungen fehlen, ich hatte keine zeit. Kommen aber noch.
      Übergangseffekte

      VB.NET-Quellcode

      1. Sub TransparentBlend()
      2. Dim bgc As New BufferedGraphicsContext
      3. Using bg = bgc.Allocate(blend_form.CreateGraphics, blend_form.ClientRectangle)
      4. With bg.Graphics
      5. 'Erstes Bild zeichnen
      6. .DrawImage(PrevImage, New Point(Screen.PrimaryScreen.WorkingArea.Width / 2 - PrevImage.Width / 2, Screen.PrimaryScreen.WorkingArea.Height / 2 - PrevImage.Height / 2))
      7. 'Altes Bild ausblenden
      8. For index = 0 To 200
      9. Dim b As New SolidBrush(Color.FromArgb(index, Color.Black))
      10. .FillRectangle(b, .ClipBounds)
      11. bg.Render()
      12. Threading.Thread.Sleep(5)
      13. Next
      14. For index As Single = 0 To 2 Step 0.01
      15. 'Zweites Bild zeichnen
      16. Dim cm As New ColorMatrix
      17. cm.Matrix33 = index
      18. Dim imga As New ImageAttributes
      19. imga.SetColorMatrix(cm)
      20. .DrawImage(NextImage, New Rectangle(New Point(Screen.PrimaryScreen.WorkingArea.Width / 2 - NextImage.Width / 2, Screen.PrimaryScreen.WorkingArea.Height / 2 - NextImage.Height / 2), NextImage.Size), _
      21. 0, 0, NextImage.Width, NextImage.Height, GraphicsUnit.Pixel, imga)
      23. bg.Render()
      24. Threading.Thread.Sleep(5)
      25. Next
      26. End With
      27. End Using
      28. End Sub
      29. Sub FromRight()
      30. Dim bgc As New BufferedGraphicsContext
      31. Using bg = bgc.Allocate(blend_form.CreateGraphics, blend_form.ClientRectangle)
      32. With bg.Graphics
      33. For index = 0 To Screen.PrimaryScreen.WorkingArea.Width / 2 + NextImage.Width / 2 Step 3
      34. .Clear(Color.Black)
      35. 'Erstes Bild zeichnen
      36. .DrawImage(PrevImage, New Point(Screen.PrimaryScreen.WorkingArea.Width / 2 - PrevImage.Width / 2, Screen.PrimaryScreen.WorkingArea.Height / 2 - PrevImage.Height / 2))
      38. .DrawImage(NextImage, New Point(Screen.PrimaryScreen.WorkingArea.Width - index, Screen.PrimaryScreen.WorkingArea.Height / 2 - NextImage.Height / 2))
      39. bg.Render()
      40. Next
      41. End With
      42. bg.Render()
      43. End Using
      44. End Sub
      45. Sub FromUnder()
      46. Dim bgc As New BufferedGraphicsContext
      47. Using bg = bgc.Allocate(blend_form.CreateGraphics, blend_form.ClientRectangle)
      48. With bg.Graphics
      49. For index = 0 To Screen.PrimaryScreen.WorkingArea.Height / 2 + NextImage.Height / 2 Step 3
      50. .Clear(Color.Black)
      51. 'Erstes Bild zeichnen
      52. .DrawImage(PrevImage, New Point(Screen.PrimaryScreen.WorkingArea.Width / 2 - PrevImage.Width / 2, Screen.PrimaryScreen.WorkingArea.Height / 2 - PrevImage.Height / 2))
      54. .DrawImage(NextImage, New Point(Screen.PrimaryScreen.WorkingArea.Width / 2 - NextImage.Width / 2, Screen.PrimaryScreen.WorkingArea.Height - index))
      55. bg.Render()
      56. Next
      57. End With
      58. bg.Render()
      59. End Using
      60. End Sub
      61. Sub UpperLeft()
      62. Dim bgc As New BufferedGraphicsContext
      63. Using bg = bgc.Allocate(blend_form.CreateGraphics, blend_form.ClientRectangle)
      64. With bg.Graphics
      65. Dim scrp = New Point(Screen.PrimaryScreen.WorkingArea.Width / 2 - NextImage.Width / 2, Screen.PrimaryScreen.WorkingArea.Height / 2 - NextImage.Height / 2)
      66. Dim x_step = NextImage.Height / NextImage.Width
      67. Dim y_step = NextImage.Width / NextImage.Height
      68. Dim max = IIf(NextImage.Height > NextImage.Width, NextImage.Height, NextImage.Width) * 2
      69. For index = 0 To max
      70. Dim x = x_step * index
      71. Dim y = y_step * index
      73. Dim gpth As New GraphicsPath()
      74. gpth.StartFigure()
      75. gpth.AddLine(scrp, New Point(0, y) + scrp)
      76. gpth.AddLine(New Point(0, y) + scrp, New Point(x, 0) + scrp)
      77. gpth.AddLine(New Point(x, 0) + scrp, scrp)
      78. gpth.CloseFigure()
      81. .SetClip(gpth)
      82. .DrawImage(NextImage, scrp)
      83. bg.Render()
      84. Next
      85. End With
      86. bg.Render()
      87. End Using
      88. End Sub


      Jetzt der Aufruf aller subs, bzw. das Bilderladen / Einblenden (in Form1.vb)
      Ok zuerst benötigen wir einen BackGround-Worker.

      VB.NET-Quellcode

      1. Dim bd_worker As Threading.Thread


      So Nun erstellen wir die beiden Subs.
      Zuerst die Load_Images sub. Diese Ladet die Bilder aus einem Vorgegebenem Ordner.
      Diesen könnt ihr natürlich bearbeiten.

      VB.NET-Quellcode

      1. Private Sub LoadImages()
      2. lbl_images.Invoke(Sub() lbl_images.Text = "Bilder suchen...")
      3. For Each img_pth In IO.Directory.GetFiles(Environment.GetFolderPath(Environment.SpecialFolder.MyPictures), "*.jpg", IO.SearchOption.AllDirectories)
      4. Try
      5. AllImages.Add(Image.FromFile(img_pth))
      6. lbl_images.Invoke(Sub() lbl_images.Text = AllImages.Count & " Bilder gefunden...")
      7. Catch ex As Exception
      8. 'Nichts tun
      9. End Try
      10. Next
      11. lbl_images.Invoke(Sub() lbl_images.Text = "Fertig...")
      12. Threading.Thread.Sleep(1000)
      13. bd_worker.Abort()
      14. 'Form ausblenden
      15. For index = 100 To 0 Step -1
      16. Me.Invoke(Sub() Me.Opacity = index / 100)
      17. Threading.Thread.Sleep(25)
      18. Next
      19. Me.Invoke(Sub() Me.Close())
      21. 'Diashow starten
      22. blend_form.Invoke(New Action(AddressOf ShowNextImage))
      23. End Sub

      Ich glaube hier erklärt sich eigentlich alles von selbst.

      Und nun kommen wir zu dem Ein-Blendungseffekt.
      Ich habe hier in den Code gleich die Erklärungen eingefügt.

      VB.NET-Quellcode

      1. Private Sub BlendDown()
      2. 'Blende einblenden
      3. For index = 50 To 100
      4. blend_form.Invoke(Sub() blend_form.Opacity = index / 100)
      5. Threading.Thread.Sleep(25)
      6. Next
      7. 'Jetzt die Form einblenden
      8. For index = 0 To 80
      9. Me.Invoke(Sub() Me.Opacity = index / 100)
      10. Threading.Thread.Sleep(25)
      11. Next
      12. 'Pulsieren lassen
      13. While Me.IsHandleCreated 'Wenn Fenster geschlossen aufhören
      14. For index = 100 To 50 Step -1
      15. Me.Invoke(Sub() Me.Opacity = index / 100)
      16. Threading.Thread.Sleep(25)
      17. Next
      18. For index = 50 To 100
      19. Me.Invoke(Sub() Me.Opacity = index / 100)
      20. Threading.Thread.Sleep(25)
      21. Next
      22. End While
      23. End Sub


      Das wars auch schon.
      Ich hoffe ich konnte euch mit diesem Tutorial helfen.

      Screenshots von Fertigem-Programm

      Wie man leicht er kennen kann, ist das Bild leicht transparent.


      Bild, mitten im Übergang.


      Edit by ErfinderDesRades: Die Downloads sind leider down.
      Bitte Downloads als VBP-DateiAnhang anhängen - nicht auf Fremd-Servern!

      18.01.2023: Code-Quellen-Link wurde entfernt, da der Code nicht mehr zur Verfügung steht, auch nicht beim Autor selbst. ~VaporiZed
      Mfg: Gather
      Private Nachrichten bezüglich VB-Fragen werden Ignoriert!

      Dieser Beitrag wurde bereits 4 mal editiert, zuletzt von „VaporiZed“ ()

    Facebook
    Telefonspende