Genomskinlig splashscreen med VB
Förord
I denna kursen tänker jag beskriva hur man kan göra en genomskinlig splash-screen till sitt program, det är ganska enkelt och det kan vara effektfullt. Jag har inte sett något program med denna effekten, det är möjligt att det finns någon förklaring till detta som inte jag känner till, eller så beror det på att det tar en stund att skapa bilden. Man bör tänka på att inte använda en för stor bild då det kan ta en stund att öppna programmet.Så här skulle en bild på Pelle och Junior kunna se ut:
Börja med att skapa en ny Form (Form1) i ditt projekt, placera sedan en PictureBox (Picture1) i formuläret. Ladda in bilden som du vill ha som splashscreen i PicureBox:en och sätt sedan följande egenskaper:
Picture1:
Apperance = 0 - Flat
AutoRedraw = True
BorderStyle = 0 - None
ScaleMode = 3 - Pixel
Form1:
Apperance = 0 - Flat
BorderStyle = 0 - None
ScaleMode = 3 - Pixel
StartUpPostion = 2 - CenterScreen
Gör Picture1 exakt lika stor (eller möligtvis mindre) som bilden, för att det ska bli lättare att veta var den hamnar på skärmen sedan är det bra om bilden är ett jämnt antal pixlar hög och bred! Gör även Form1 lika stor som bilden och Picture1.
För att kunna skapa bilden behöver vi tre API-funktioner, deklarera dessa längst upp i koden till Form1. Jag har även valt att använda mig av en egendefinerad datatyp för att lagra färgvärdena, den behöver också deklareras här.
I Form_Load() finns alla beräkningar mm, jag går igenom varje block och förklarar vad koden gör:
Först kommer konstant och variabeldeklarationen, konstanterna används för att ange hur stor del av bilden som ska tonas ut i kanten. Fördelen med att använda en konstant jämfört med att ange siffran i koden är att det bli mycket tydligare så här och det är mycket enklare att ändra.
Här beräknas vilken koordinat det övre vänstra hörnet av Form1 kommer att få när den visas.
Här läses bildskärmen av för att spara vilken färg varje pixel som kommer hamna bakom Form1 har, denna informationen behövs för att kunna "mixa" ihop bilden med splash-bilden. Färgen sparas i den tvådimentionella arrayen bakgrundBild.
Här startar loopen som går igenom varje pixen och ger den en ny färg. Först delas bakgrundsbildens färg upp i RGB (Red, Green, Blue), sedan läses färgen av för bilden som är inläst i Picture1, även denna delas upp i RGB.
Först sätts intensiteten (genomskinligheten) på den delen av bilden som inte ska tonas ut, det som är i mitten av bilden (värde mellan 0 och 1). Sedan kontrolleras om pixeln ligger inom det område som ska tonas ner, om den gör det multipliceras intesiteten med det relativa avståndet till det icke-tonade området.
Här adderas RGB-värdet från bakgrunden med RGB-värdet för splashbilden, intensiteten anger hur stor del av de olika bilderna som ska användas.
Slutligen sätts den nya färgen på bilden.
Detta är bara ett exempel på hur man kan göra, man kan experimentera med andra former och algoritmer för hur intensiteten ska skifta, det är bara fantasin som sätter gränserna :) Om du inte vill att bilden ska tonas ut i kanterna kan du ta bort partiet där intensiteten ändras och bara låta "intensitet = 0.9" vara kvar eller så kan du sätta konstanterna andelAvBredd och andelAvHojd till 0.
För att implementera bilden i ditt program kan du lägga till en Timer i formuläret som laddar resten av programmet efter en liten stund och sedan stänger Form1.
Fil: splash.zip
Om du gör någon intressant (eller kanske något konstigt fel) på grund av detta material så skicka gärna det med ett mail eller bifoga en länk till mig så presenterar jag detta som ytterligare exempelfiler för kursen. Om detta innehållet är felaktigt eller du lärt dig fler finesser så skriv gärna en rad eller varför inte en egen kurs baserat på dina erfarenheter. Sänd gärna in dina tips till denna kurs.
/Johan Djupmarker
Börja med att skapa en ny Form (Form1) i ditt projekt, placera sedan en PictureBox (Picture1) i formuläret. Ladda in bilden som du vill ha som splashscreen i PicureBox:en och sätt sedan följande egenskaper:
Picture1:
Apperance = 0 - Flat
AutoRedraw = True
BorderStyle = 0 - None
ScaleMode = 3 - Pixel
Form1:
Apperance = 0 - Flat
BorderStyle = 0 - None
ScaleMode = 3 - Pixel
StartUpPostion = 2 - CenterScreen
Gör Picture1 exakt lika stor (eller möligtvis mindre) som bilden, för att det ska bli lättare att veta var den hamnar på skärmen sedan är det bra om bilden är ett jämnt antal pixlar hög och bred! Gör även Form1 lika stor som bilden och Picture1.
För att kunna skapa bilden behöver vi tre API-funktioner, deklarera dessa längst upp i koden till Form1. Jag har även valt att använda mig av en egendefinerad datatyp för att lagra färgvärdena, den behöver också deklareras här.
Option Explicit
Private Declare Function GetPixel Lib "gdi32" (ByVal hdc As Long, ByVal x As Long, ByVal y As Long) As Long
Private Declare Function GetDC Lib "user32" (ByVal hwnd As Long) As Long
Private Declare Function ReleaseDC Lib "user32" (ByVal hwnd As Long, ByVal hdc As Long) As Long
Private Type Farg
r As Long
g As Long
b As Long
End Type
Private Sub Form_Load()
I Form_Load() finns alla beräkningar mm, jag går igenom varje block och förklarar vad koden gör:Först kommer konstant och variabeldeklarationen, konstanterna används för att ange hur stor del av bilden som ska tonas ut i kanten. Fördelen med att använda en konstant jämfört med att ange siffran i koden är att det bli mycket tydligare så här och det är mycket enklare att ändra.
Const andelAvBredd As Double = 0.2
Const andelAvHojd As Double = 0.2
Dim y As Long, x As Long
Dim fargBG As Farg, fargBild As Farg, fargTot As Farg
Dim fargVarde As Long
Dim hdcScreen As Long
Dim startPosX As Long, startPosY As Long
Dim intensitet As Double
Dim bakgrundBild() As Long
ReDim bakgrundBild(ScaleWidth, ScaleHeight)
Här beräknas vilken koordinat det övre vänstra hörnet av Form1 kommer att få när den visas.
startPosX = Screen.Width / (2 * Screen.TwipsPerPixelX) - ScaleWidth / 2
startPosY = Screen.Height / (2 * Screen.TwipsPerPixelY) - ScaleHeight / 2
Här läses bildskärmen av för att spara vilken färg varje pixel som kommer hamna bakom Form1 har, denna informationen behövs för att kunna "mixa" ihop bilden med splash-bilden. Färgen sparas i den tvådimentionella arrayen bakgrundBild.
hdcScreen = GetDC(0)
For y = 0 To ScaleHeight - 1
For x = 0 To ScaleWidth - 1
bakgrundBild(x, y) = GetPixel(hdcScreen, x + startPosX, y + startPosY)
Next
Next
Call ReleaseDC(0, hdcScreen)
Här startar loopen som går igenom varje pixen och ger den en ny färg. Först delas bakgrundsbildens färg upp i RGB (Red, Green, Blue), sedan läses färgen av för bilden som är inläst i Picture1, även denna delas upp i RGB.
For y = 0 To ScaleHeight - 1
For x = 0 To ScaleWidth - 1
fargVarde = bakgrundBild(x, y)
fargBG.b = Int(fargVarde / 65536)
fargVarde = Int(fargVarde - fargBG.b * 65536)
fargBG.g = Int(fargVarde / 256)
fargBG.r = fargVarde - fargBG.g * 256
fargVarde = GetPixel(Picture1.hdc, x, y)
fargBild.b = Int(fargVarde / 65536)
fargVarde = Int(fargVarde - fargBild.b * 65536)
fargBild.g = Int(fargVarde / 256)
fargBild.r = fargVarde - fargBild.g * 256
Först sätts intensiteten (genomskinligheten) på den delen av bilden som inte ska tonas ut, det som är i mitten av bilden (värde mellan 0 och 1). Sedan kontrolleras om pixeln ligger inom det område som ska tonas ner, om den gör det multipliceras intesiteten med det relativa avståndet till det icke-tonade området.
intensitet = 0.9
If x < ScaleWidth * andelAvBredd Then
intensitet = intensitet * (x / (ScaleWidth * andelAvBredd))
End If
If x > ScaleWidth * (1 - andelAvBredd) Then
intensitet = intensitet * (1 - ((x - ScaleWidth * (1 - andelAvBredd)) / (ScaleWidth * andelAvBredd)))
End If
If y < ScaleHeight * andelAvHojd Then
intensitet = intensitet * (y / (ScaleHeight * andelAvHojd))
End If
If y > ScaleHeight * (1 - andelAvHojd) Then
intensitet = intensitet * (1 - ((y - ScaleHeight * (1 - andelAvHojd)) / (ScaleHeight * andelAvHojd)))
End If
Här adderas RGB-värdet från bakgrunden med RGB-värdet för splashbilden, intensiteten anger hur stor del av de olika bilderna som ska användas.
fargTot.r = (1 - intensitet) * fargBG.r + intensitet * fargBild.r
fargTot.g = (1 - intensitet) * fargBG.g + intensitet * fargBild.g
fargTot.b = (1 - intensitet) * fargBG.b + intensitet * fargBild.b
Slutligen sätts den nya färgen på bilden.
Picture1.PSet (x, y), RGB(fargTot.r, fargTot.g, fargTot.b)
Next
Next
Detta är bara ett exempel på hur man kan göra, man kan experimentera med andra former och algoritmer för hur intensiteten ska skifta, det är bara fantasin som sätter gränserna :) Om du inte vill att bilden ska tonas ut i kanterna kan du ta bort partiet där intensiteten ändras och bara låta "intensitet = 0.9" vara kvar eller så kan du sätta konstanterna andelAvBredd och andelAvHojd till 0.
För att implementera bilden i ditt program kan du lägga till en Timer i formuläret som laddar resten av programmet efter en liten stund och sedan stänger Form1.
Tanka ner exempel
Fil: splash.zip
Var denna artikeln användbar?
Om du gör någon intressant (eller kanske något konstigt fel) på grund av detta material så skicka gärna det med ett mail eller bifoga en länk till mig så presenterar jag detta som ytterligare exempelfiler för kursen. Om detta innehållet är felaktigt eller du lärt dig fler finesser så skriv gärna en rad eller varför inte en egen kurs baserat på dina erfarenheter. Sänd gärna in dina tips till denna kurs./Johan Djupmarker
0 Kommentarer