Printable View
Hi my dear guys. I want to increase the user experience in my VB6 apps. Today i've created a mockup in Expression Blend to have an idea that i want to do.
I've uploaded a sample video, please check it.
http://www.youtube.com/watch?v=Zx0PhSxflQw
How can i do this? GDI+? DirectX? API? DLL or ActiveX? :wave:
please help me, best regards.
Slide effect or the whole graphics? For the slide you can use a Timer.
Thanks, I've tried with a timer and DoEvents and refresh the form. But is very, very slow, isn't smooth. I'm using a PNG picture (AlphaBlendControl from LaVolpe)Quote:
Originally Posted by baja_yu
Oh. I already made a sample with it, but what the hell, here it is, maybe someone else who reads the thread will find it usefull.
I'm affraid that will be the extent of my support. I haven't worked at all with graphics.
thanks for your effort :afrog:Quote:
Originally Posted by baja_yu
Can you give more details.Quote:
Originally Posted by Nikole
Is the slide part of your form? Or a separate window.
Recommendation if it applies.
1. Use a separate window/form created on the fly for animation.
Example. Load a form dynamically, draw your slide on to it, set the layered window attributes (SetLayeredWindowAttributes & UpdateLayeredWindow APIs), overlay it over your current form, make that 2nd form visible, then hide the image on that main form.
2. Now use your timer to slide the layered window. Should be able to get really good results I would think.
Edited: However, the image will slide over your buttons, not behind them.
Hi LaVolpe, the mode does not matter, if i can i do this with two forms, will be better!. Did you mean: a Form1 as background and a second PNG form (Form2) that contain all controls (images and buttons) and update the position x,y with UpdateLayeredWindow to do "slide in/out" effect? :rolleyes:Quote:
Originally Posted by LaVolpe
Not quite. I'm thinking that the 2nd form is a "PNG form" and only created when needed. Here's the idea.
1. New project, 2 forms. Form1: add command button & shape control, and a timer
2. Form 2: Make borderless. Edited: name it frmSlide
3. Add attached PNG image to app.path
4. Copy & paste this code
5. Play with timer interval and nrLinesPerScroll constant in Timer event.
Code not commented, but I and others could enlighten you on any questions you have.
Code:Option Explicit
Private Declare Function UpdateLayeredWindow Lib "user32.dll" (ByVal hwnd As Long, ByVal hdcDst As Long, ByRef pptDst As Any, ByRef psize As Any, ByVal hdcSrc As Long, ByRef pptSrc As Any, ByVal crKey As Long, ByRef pblend As Long, ByVal dwFlags As Long) As Long
Private Type Size
cx As Long
cy As Long
End Type
Private Declare Function SetWindowLong Lib "user32.dll" Alias "SetWindowLongA" (ByVal hwnd As Long, ByVal nIndex As Long, ByVal dwNewLong As Long) As Long
Private Declare Function GetWindowLong Lib "user32.dll" Alias "GetWindowLongA" (ByVal hwnd As Long, ByVal nIndex As Long) As Long
Private Const GWL_EXSTYLE As Long = -20
Private Const WS_EX_LAYERED As Long = &H80000
Private Const WS_EX_TRANSPARENT As Long = &H20&
Private Const WS_EX_TOPMOST As Long = &H8&
Private Const SW_SHOWNA As Long = 8
Private Declare Function ShowWindow Lib "user32.dll" (ByVal hwnd As Long, ByVal nCmdShow As Long) As Long
Private Type GdiplusStartupInput
GdiplusVersion As Long
DebugEventCallback As Long
SuppressBackgroundThread As Long
SuppressExternalCodecs As Long
End Type
Private Declare Function GdiplusStartup Lib "gdiplus" (Token As Long, inputbuf As GdiplusStartupInput, Optional ByVal outputbuf As Long = 0) As Long
Private Declare Sub GdiplusShutdown Lib "gdiplus" (ByVal Token As Long)
Private Declare Function ClientToScreen Lib "user32.dll" (ByVal hwnd As Long, ByRef lpPoint As Any) As Long
Private Declare Function GdipCreateFromHDC Lib "gdiplus" (ByVal hDC As Long, hGraphics As Long) As Long
Private Declare Function GdipDeleteGraphics Lib "gdiPlus.dll" (ByVal mGraphics As Long) As Long
Private Declare Function GdipLoadImageFromFile Lib "gdiplus" (ByVal FileName As Long, hImage As Long) As Long
Private Declare Function GdipDisposeImage Lib "gdiplus" (ByVal Image As Long) As Long
Private Declare Function GdipDrawImageRectI Lib "gdiPlus.dll" (ByVal mGraphics As Long, ByVal mImage As Long, ByVal mX As Long, ByVal mY As Long, ByVal mWidth As Long, ByVal mHeight As Long) As Long
Private Declare Sub CopyMemory Lib "kernel32.dll" Alias "RtlMoveMemory" (ByRef Destination As Any, ByRef Source As Any, ByVal Length As Long)
Private Declare Sub FillMemory Lib "kernel32.dll" Alias "RtlFillMemory" (ByRef Destination As Any, ByVal Length As Long, ByVal Fill As Byte)
Private Declare Function CreateCompatibleDC Lib "gdi32.dll" (ByVal hDC As Long) As Long
Private Declare Function CreateDIBSection Lib "gdi32.dll" (ByVal hDC As Long, ByRef pBitmapInfo As Any, ByVal un As Long, ByRef lplpVoid As Long, ByVal handle As Long, ByVal dw As Long) As Long
Private Type BITMAPINFOHEADER
biSize As Long
biWidth As Long
biHeight As Long
biPlanes As Integer
biBitCount As Integer
biCompression As Long
biSizeImage As Long
biXPelsPerMeter As Long
biYPelsPerMeter As Long
biClrUsed As Long
biClrImportant As Long
End Type
Private Declare Function SelectObject Lib "gdi32.dll" (ByVal hDC As Long, ByVal hObject As Long) As Long
Private Declare Function DeleteObject Lib "gdi32.dll" (ByVal hObject As Long) As Long
Private Declare Function DeleteDC Lib "gdi32.dll" (ByVal hDC As Long) As Long
Private Const LWA_ALPHA As Long = &H2
Private Const ULW_ALPHA As Long = &H2
Private Const AC_SRC_ALPHA As Long = &H1
Private m_DC As Long
Private m_DCbmp As Long
Private m_DIBptr As Long
Private m_SizeImage As Size
Private m_SizeSlide As Size
Private Sub Command1_Click()
Dim gdiSI As GdiplusStartupInput, gToken As Long
Dim X As Long, Y As Long, tSize As Size
Dim hDib As Long, bmpi As BITMAPINFOHEADER
Dim gImage As Long, gGraphics As Long
gdiSI.GdiplusVersion = 1
GdiplusStartup gToken, gdiSI
m_DC = CreateCompatibleDC(Me.hDC)
If m_DC = 0& Then
GdiplusShutdown gToken
Stop ' error
Exit Sub
End If
Load frmSlide
SetWindowLong frmSlide.hwnd, GWL_EXSTYLE, GetWindowLong(frmSlide.hwnd, GWL_EXSTYLE) Or WS_EX_LAYERED Or WS_EX_TOPMOST Or WS_EX_TRANSPARENT
m_SizeImage.cx = Shape1.Width \ Screen.TwipsPerPixelX
m_SizeImage.cy = Shape1.Height \ Screen.TwipsPerPixelY
m_SizeSlide.cx = m_SizeImage.cx
m_SizeSlide.cy = m_SizeImage.cy + Shape1.Top \ Screen.TwipsPerPixelY
tSize.cx = Shape1.Left \ Screen.TwipsPerPixelX
ClientToScreen Me.hwnd, tSize
frmSlide.Move tSize.cx * Screen.TwipsPerPixelX, tSize.cy * Screen.TwipsPerPixelY, Shape1.Width, Shape1.Top + Shape1.Height
With bmpi
.biBitCount = 32
.biHeight = m_SizeSlide.cy
.biWidth = m_SizeSlide.cx
.biPlanes = 1
.biSize = 40
End With
hDib = CreateDIBSection(Me.hDC, bmpi, 0&, m_DIBptr, 0&, 0&)
If hDib = 0& Then
DeleteDC m_DC
m_DC = 0&
GdiplusShutdown gToken
Stop ' error
Exit Sub
End If
m_DCbmp = SelectObject(m_DC, hDib)
GdipLoadImageFromFile StrPtr(App.Path & "\Spider.png"), gImage
GdipCreateFromHDC m_DC, gGraphics
GdipDrawImageRectI gGraphics, gImage, 0, m_SizeSlide.cy - m_SizeImage.cy, m_SizeImage.cx, m_SizeImage.cy
GdipDeleteGraphics gGraphics
GdipDisposeImage gImage
GdiplusShutdown gToken
X = 255& * &H10000 Or (AC_SRC_ALPHA * &H1000000)
tSize.cx = 0: tSize.cy = 0
UpdateLayeredWindow frmSlide.hwnd, 0&, ByVal 0&, m_SizeSlide, m_DC, tSize, 0&, X, ULW_ALPHA
ShowWindow frmSlide.hwnd, SW_SHOWNA ' shows window without setting focus to it
Timer1.Interval = 10
Timer1.Enabled = True
End Sub
Private Sub Form_Load()
Me.Width = 7665: Me.Height = 5295
Shape1.Move 2865, 2235, 2520, 2430
Command1.Caption = "Slide Up"
If Len(Dir(App.Path & "\Spider.Png")) = 0 Then
MsgBox "Sample project needs the spider.png file in the app.path"
Unload Me
End If
End Sub
Private Sub Timer1_Timer()
Timer1.Enabled = False
Dim lStep As Long, lBF As Long, nrBytes As Long, lOffset As Long
Dim hBmp As Long, tSize As Size
Const nrLinesPerScroll As Long = 5
lStep = Val(Timer1.Tag) + nrLinesPerScroll
If lStep >= m_SizeSlide.cy - nrLinesPerScroll Then
Unload frmSlide
DeleteObject SelectObject(m_DC, m_DCbmp)
DeleteDC m_DC
m_DC = 0
Timer1.Tag = ""
Exit Sub
End If
nrBytes = m_SizeImage.cx * 4& * (m_SizeSlide.cy - nrLinesPerScroll)
lOffset = m_SizeImage.cx * 4& * nrLinesPerScroll
' dangerous code: manipulating DIB via pointers. Testing only
hBmp = SelectObject(m_DC, m_DCbmp)
CopyMemory ByVal m_DIBptr + lOffset, ByVal m_DIBptr, nrBytes
FillMemory ByVal m_DIBptr, lOffset, 0
SelectObject m_DC, hBmp
lBF = 255& * &H10000 Or (AC_SRC_ALPHA * &H1000000)
UpdateLayeredWindow frmSlide.hwnd, 0&, ByVal 0&, m_SizeSlide, m_DC, tSize, 0&, lBF, ULW_ALPHA
Timer1.Tag = lStep
Timer1.Enabled = True
End Sub
oooh!, thanks very much LaVolpe, will be great if i can host controls in frmSlide form and change opacity while slide in/out, like in the video sample :afrog:Quote:
Originally Posted by LaVolpe
A couple things.
1. Try to understand the code. I whipped it together in about 15 mins. So there is no real error checking. It can be optimized a bit and things should not be allowed to happen; for example: don't run it again while animating. Don't close the form while animating; must ensure your DC & DIB are destroyed.
2. Opacity? Simple. In the timer event, play with the value 255 in the following calculation. Reducing 255 by say 5 or so each iteration will make it more transluscent. Do the calcs correctly, you don't want the value to go below zero else you may get an error or worse.
3. Controls? You wouldn't have them in the animation would you? If so, you'd have to paint them to the DIB and then they'd be in the animation, but they won't do anything. Layered windows are not compatible with child windows.Code:lBF = 255& * &H10000 Or (AC_SRC_ALPHA * &H1000000)
' sample mod
lBF = (255& - (lStep \ nrLinesPerScroll) * 5) * &H10000 Or (AC_SRC_ALPHA * &H1000000)
Edited:I'm not even sure manipulating the DIB as I am doing in the timer event is absolutely needed. That was my first gut response. In the various parameters of UpdateLayeredWindows is the option to say where the image starts from. Moving that value down each iteration may also have the same results. If so, do it that way vs manipulating the DIB. Again, I did it very quickly. But here is a more safe way of manipulating the DIB.
Code:' more declarations first
Private Declare Function VarPtrArray Lib "msvbvm60.dll" Alias "VarPtr" (ByRef Ptr() As Any) As Long
Private Type SAFEARRAYBOUND
cElements As Long
lLbound As Long
End Type
Private Type SafeArray ' used as DMA overlay on a DIB
cDims As Integer
fFeatures As Integer
cbElements As Long
cLocks As Long
pvData As Long
rgSABound As SAFEARRAYBOUND
End Type
' in timer event replace: CopyMemory ByVal m_DIBptr + lOffset, ByVal m_DIBptr, nrBytes
' with:
Dim tSA As SafeArray, dibData() As Byte
With tSA
.cbElements = 1
.cDims = 1
.pvData = m_DIBptr
.rgSABound.cElements = m_SizeImage.cx * 4& * m_SizeImage.cy
End With
CopyMemory ByVal VarPtrArray(dibData), VarPtr(tSA), 4&
CopyMemory dibData(lOffset), dibData(0), nrBytes
CopyMemory ByVal VarPtrArray(dibData), 0&, 4&
Ok, had to see for myself whether my 2nd thought was valid or not. It appears so.
To experiment. The DIB has to be adjusted, but works just fine.
1. In the click event change
From: .biHeight = m_SizeSlide.cy
To: .biHeight = m_SizeSlide.cy * 2
2. Now your timer event looks like this:
As I mentioned, it could use some optimization & this is one.Code:Private Sub Timer1_Timer()
Timer1.Enabled = False
Dim lStep As Long, lBF As Long, tSize As Size
Const nrLinesPerScroll As Long = 5
lStep = Val(Timer1.Tag) + nrLinesPerScroll
If lStep >= m_SizeSlide.cy - nrLinesPerScroll Then
Unload frmSlide
DeleteObject SelectObject(m_DC, m_DCbmp)
DeleteDC m_DC
m_DC = 0
Timer1.Tag = ""
Else
tSize.cy = lStep
lBF = (255& - (lStep \ nrLinesPerScroll) * 5) * &H10000 Or (AC_SRC_ALPHA * &H1000000)
UpdateLayeredWindow frmSlide.hwnd, 0&, ByVal 0&, m_SizeSlide, m_DC, tSize, 0&, lBF, ULW_ALPHA
Timer1.Tag = lStep
Timer1.Enabled = True
End If
End Sub
Quote:
Originally Posted by LaVolpe
Thank's LaVolpe, it works!! (but i can't host controls in frmSlide. I need to host controls labels, buttons, listbox, just like in the video). Thanks very much again for your effort , you are a nice person ;)
I don't get it. You are animating the "form" off the screen (more or less). What is the purpose of the controls if the form will be gone?
If you just want a snap shot of the controls, you can BitBlt them from the window to the "animating" form's DIB and they will display in the animation. But they'll just be snapshots of the controls.
I don't think I am following you completely; at least not from what your video displayed.
Nice work LaVolpe :thumb:
I think Nicole wants to display the animation within her form. For example, when the button is pressed, a picturebox that has an image inside it, slides to the top of the form and fade off. But your method will slide the whole form. I think, that's what she wants to do (Pardon me if I am wrong) :wave:
If that's the case, it's still very doable; and nearly the same principle.
1. Create DIB of appropriate size
2. Screen capture the picturebox or draw the picturebox contents to the DIB (as needed)
3. Create the 2nd form and overlay it. In my example I used a shape control to immitate the picturebox
4. Show the 2nd form, then hide the picturebox (which is now behind the 2nd form)
5. Animate the 2nd form.
Ok, Form1 is a background. And the second form (frmSlide) is a form with controls, options, etc. I want to display in the frmSlide the program settings. So, i want to use this animation in all forms (to have a beter UX) :oQuote:
Originally Posted by LaVolpe
Ok, gotcha I believe.
So instead of just closing the form you want it to slide up, sideways or somewhere else? Is it to slide off the screen or stay within the form boundaries as my example attempted?
I assume the form is rectangular. You mentioned PNG images. Can you provide more details or upload a snapshot? Is the settings form displayed modally? Anything else that could be helpful for us?
I can't promise I'll get you an answer tonight. Will be signing off very shortly. But I'll check back tomorrow and check the progress of this thread.
Quote:
Originally Posted by LaVolpe
Ok, i will try to do a sample video in Expression Blend to have an idea and i will upload it here. Thanks!!
Hi, LaVolpe and guys: I've updated the video, sorry,i'm not so good. :blush:
This is the scenario:
1) Form1: Only to host an image background.
2) frmSlide: when form load, frmSlide slide from Bottom ---> to center of screen with album covers.
3) When i click in a cover, frmSlide go from center of screen to top of screen and dispear in the opacity. (List like your example of yesterday)..ok :thumb:
4) now, frmSlide come from top to center of screen with all songs (ListBox) of the album.
It's possible to make a snapshot of the form with controls and move it, in any direction? top to bottom, bottom to top, right to left...
:rolleyes:
UPDATED Video:
http://www.youtube.com/watch?v=sSLilt9IhjI
Well Nikole any movie you download from YouTube is a flash movie *.swf which you can add to a Resource file and extract it and play it from there. You can have as many slideshows as you want too.Quote:
Originally Posted by Nikole
I'm not sure I know what you mean by Expression Blend?
Sorry my friend, but i don't understand or you are wrong.Quote:
Originally Posted by Keithuk
I made this video with Microsoft Expression Blend http://www.microsoft.com/expression/..._Overview.aspx only to show an idea. Expression Blend help to build UI for WPF (Windows Presentation Foundation). But i'm working with VB6. I won't use WPF because i don't know .NET, only VB6
Nikole, while this could use a whole lot of improvement, as it is a bit jerky on my system in debug mode, and it needs the transparent effect added to it. I hope it gives you some ideas...
Start a new standard exe project and add this code to form1...
Now add a form (form2) and add a timer to form2 (timer1) and add the code...Code:Option Explicit
Private Sub Form_Load()
Me.WindowState = vbMaximized
Me.Visible = True
Form2.Show vbModeless, Me
Form2.Visible = True
Form2.SetFocus
End Sub
run and click on form2Code:Option Explicit
Dim Direction As Byte, ToCenter As Boolean
Private Sub Form_Click()
Direction = CByte(3 * Rnd)
Me.Caption = Direction
Timer1.Interval = 50
Timer1.Enabled = True
End Sub
Private Sub Form_Load()
Randomize
Me.AutoRedraw = True
Timer1.Enabled = False
Me.Left = (Screen.Width / 2) - (Me.Width / 2)
Me.Top = (Screen.Height / 2) - (Me.Height / 2)
End Sub
Private Sub Timer1_Timer()
Dim P As Integer
Select Case Direction
Case 0 'headed north
Me.Top = Me.Top - 150
If ToCenter = True Then
If Me.Top <= ((Screen.Height / 2) - (Me.Height / 2)) Then
Me.Top = (Screen.Height / 2) - (Me.Height / 2)
Me.Cls
Timer1.Enabled = False
ToCenter = False
End If
Else
If Me.Top <= 0 - Me.Height Then
Me.Print "From the top"
Direction = 2 'headed south
ToCenter = True
End If
End If
Case 1 'headed east
Me.Left = Me.Left + 150
If ToCenter = True Then
If Me.Left >= ((Screen.Width / 2) - (Me.Width / 2)) Then
Me.Left = (Screen.Width / 2) - (Me.Width / 2)
Me.Cls
Timer1.Enabled = False
ToCenter = False
End If
Else
If Me.Left >= Screen.Width Then
Me.Print "From the right"
Direction = 3 'headed west
ToCenter = True
End If
End If
Case 2 'headed south
Me.Top = Me.Top + 150
If ToCenter = True Then
If Me.Top >= ((Screen.Height / 2) - (Me.Height / 2)) Then
Me.Top = (Screen.Height / 2) - (Me.Height / 2)
Me.Cls
Timer1.Enabled = False
ToCenter = False
End If
Else
If Me.Top >= Screen.Height Then
Me.Print "From the bottom"
Direction = 0
ToCenter = True
End If
End If
Case 3
Me.Left = Me.Left - 150
If ToCenter = True Then
If Me.Left <= ((Screen.Width / 2) - (Me.Width / 2)) Then
Me.Left = (Screen.Width / 2) - (Me.Width / 2)
Me.Cls
Timer1.Enabled = False
ToCenter = False
End If
Else
If Me.Left <= (0 - Me.Width) Then
Me.Print "From the left"
Direction = 1
ToCenter = True
End If
End If
End Select
End Sub
Improvements: Do all the calculations once in form load. Play with the timer settings and the movement rate to make it smoother/faster/etc.
Good Luck
If you know Expression Blend and VB.Net, then I think they are a perfect combination for creating nice looking programs(with animations and lot more) ! :thumb:Quote:
Originally Posted by Nikole
I think Nikole wants to do the animation (form transition), just like in the video. She is creating those videos as an example. And she wants to do it in VB6. :wave:Quote:
Originally Posted by Keithuk
Thanks for you effort! U are so sweet :thumb:Quote:
Originally Posted by vb5prgrmr
Maybe but I don't know VB.NET, Array controls does not exist anymore in .NET. Maybe i need to buy a book of .NET, but i need to do now a complex app and i haven't time :afrog: ...Quote:
Originally Posted by akhileshbc
Quote:
Originally Posted by LaVolpe
Hi, LaVolpe. It's possible to take a Form (frmSlide) snap shot, animate it (like the attached video) and after show the controls?
Sorry for revivin old thread, I liked the look of your example.Quote:
Originally Posted by baja_yu
Could this be done with a Parent Form and multiple child forms?
Hoping to use this on a touch screen
http://www.vbforums.com/images/ieimages/2011/01/1.jpg
Some thing like this?Quote:
Originally Posted by planethax