المشاركات : 198
المواضيع 51
الإنتساب : May 2015
السمعة :
14
الشكر: 243
تم شكره 781 مرات في 83 مشاركات
10-06-18, 02:47 PM
(آخر تعديل لهذه المشاركة : 14-06-18, 06:05 PM {2} بواسطة mohamed haroon.)
السلام عليكم و رحمة الله و بركاته
المقدمة
في البداية حتي تعرف المقصود بأن الفورم يتفاعل مع المستخدم سأضع لك فيديو يوضح عمل الفورم و يمكنك الوصول اليه من هنا https://youtu.be/WcRtuB85zmg
الشرح
لابد في البداية من معرفه عدة معلومات تخص الفيديوهات و هي ان الفيديو مكون من عدة اطارات و كل اطار عبارة عن صورة و يتم عرض هذة الصور بسرعة وبمعدل 24 اطار في الثانية لتكون الحركة بسرعة طبيعية و هكذا يكون شكل الاطارات
الفكرة الاساسية هي عرض الاطارات في picture box بصورة متلاحقة عند تفاعل المستخدم مع الفورم
1-انتاج الاطارات
في الخطوة الاولي من الشرح سأعرض عليكم كيفية عمل اطارات الفيدو ولاكن لن اتطرق الي ذلك بالتفصيل فقد استخدمت برنامج moho12 الخاص بعمل الرسوم المتحركة لرسم الشخصية الكارتونية وتحريكها بالشكل المطلوب ثم قمت بإخراج المشروع علي هيئة صور png فقام بإخراج كل اطار في صورة كما بالشكل التالي
2-البرمجة
الخطوة التانية هي البرمجة و لعرض الاطارات في ال picture box بسرعة استخدمت اداه ال timer و هي اداه تتعامل مع الوقت بالمللي ثانية و الثانية عبارة عن 1000 مللي ثانية و لعرض 24 صورة في الثانية قمت بقسمة 24/1000 فكان الناتج تقريبا 41 ويعني هذا انني سأقوم بتنفيذ كود عرض الصورة كل 41 مللي ثانية
(داله get_num)
و لضبط تتابع الاطارات قمت بتسمية الاطارات بأرقام متتابعة و قمت بكتابة داله get_num لمعرفة الاطار المعروض في الpicture box ثم عرض الاطار الذي يتبعة
(التفاعل مع الuser name textbox)
عند الضغط علي الuser name textbox يتم وضع الاطار الاول الخاص بالحركة في الpicture box ثم يتم تشغيل الtimer الخاص بهذة الحركة وهذا الtimer قيمه الinterval له 41 كما ذكرنا سابقا لعرض 24 اطار في الثانية
هذا هو الكود الخاص بالتايمر وينفذ التايمر الاكواد بشرط ان يكون الuser name textbox فارغ فيقوم بوضع الاطار الذي يليه في الpicture box و هذا بمعرفة رقم الصورة في الpicture box ويزيد واحد عليها و يتأكد ان كانت موجودة في المجلد الخاص بالاطارات يضعها في الpicture box و اذا لم تكن موجودة يعني هذا ان ال picture box يحتوي عي اخر اطار في مجلد الاطارات الخاصة بالحركة و يتوقف عمل التايمر
(داله percentage)
و هي داله تساعد في تحريك الشخصية عند الكتابة داخل user name textbox حيث استخدمت بها ال graphics لمعرفة عرض الكتابة المكتوبة في ال user name textbox و قسمتة علي عرض الuser name textbox ثم ضربة ب 100 لمعرفة النسبة المئوية لامتلاء الuser name textbox ثم حذف الكسور من النسبة
(التفاعل مع الكتابة داخل user name textbox)
القسم الاول من الكود و هو يخص التحريك عند الكتابة داخل الuser name textbox و لتسهيل عملية التحريك و كتابة الاكواد قمت بعمل 100 اطار يخص هذة الحركة و الكود يتم تنفيذة عندما يكون الuser name textbox غير فارغ وذلك بحساب النسبة المئوية للكتابة داخل الuser name textbox و اذا كانت النسبة المئوية اكبر من رقم الاطار المعروض في ال picture box يتم عرض الصور اللاحقة حتي يتم عرض الصورة المساوية للنسبة المئوية و تتوقف الحركة
و القسم الثاني من الكود هو التحريك عند حذف النصوص من الuser name textbox و هو كما في القسم الاول من الكود تحسب النسبة المئوية لامتلاء الuser name textbox و يتم مقارنتها برقم الصورة المعروضة فإذا كانت النسبة المئوية اكبر يقوم بعرض الصور السابقة حتي يتساوي رقم الصورة مع النسبة المئوية و تتوقف الحركة
وفي النهاية يمكنكم تحميل المشروع من الرابط التاليhttps://drive.google.com/file/d/12E7cvCi...sp=sharing
الان وصلنا الي النهاية و اتمني ان اكون قد افدتكم وانا جاهز للرد علي اي استفسار
It's easy if you try
تم الشكر بواسطة: elgokr , sendbad100 , tryold , matrix99 , matrix99 , الوايلي , YousefOkasha , dubai.eig , dubai.eig , ahmedmansour , عبدالله الدوسري , EYADISMAIL , mac9 , technomedia , technomedia , esawy1
المشاركات : 3,815
المواضيع 36
الإنتساب : Mar 2014
السمعة :
724
الشكر: 7238
تم شكره 6709 مرات في 3265 مشاركات
مجهود رائع وفكرة رائعة
تم +1
تحياتى لك
وتمنياتى لك التوفيق
المشاركات : 198
المواضيع 51
الإنتساب : May 2015
السمعة :
14
الشكر: 243
تم شكره 781 مرات في 83 مشاركات
(10-06-18, 05:56 PM)elgokr كتب : مجهود رائع وفكرة رائعة
تم +1
تحياتى لك
وتمنياتى لك التوفيق
شكراً جزيلاً لتشجيعك
It's easy if you try
المشاركات : 3,815
المواضيع 36
الإنتساب : Mar 2014
السمعة :
724
الشكر: 7238
تم شكره 6709 مرات في 3265 مشاركات
(10-06-18, 06:02 PM)mohamed haroon كتب : (10-06-18, 05:56 PM)elgokr كتب : مجهود رائع وفكرة رائعة
تم +1
تحياتى لك
وتمنياتى لك التوفيق
شكراً جزيلاً لتشجيعك
الشكر لله
واصل عملك
وتمنياتى لك كل التوفيق
المشاركات : 4
المواضيع 0
الإنتساب : Mar 2018
السمعة :
0
الشكر: 0
تم شكره 12 مرات في 4 مشاركات
روعة أخي العزيز و الله مشروع ممتاز ...شكرا على الإفادة..وفقك الله ..
المشاركات : 198
المواضيع 51
الإنتساب : May 2015
السمعة :
14
الشكر: 243
تم شكره 781 مرات في 83 مشاركات
(11-06-18, 05:59 PM)Ali-Othmane كتب : روعة أخي العزيز و الله مشروع ممتاز ...شكرا على الإفادة..وفقك الله ..
عفوا
يسرني انه قد اعجبك
It's easy if you try
المشاركات : 133
المواضيع 3
الإنتساب : Oct 2013
السمعة :
19
الشكر: 3
تم شكره 172 مرات في 91 مشاركات
ما شاء الله فكرة رائعة جدا
لكن لماذا تايمر منفصل لكل حدث
عموما بعد اذنك قمت بالتعديل على الكود
حيث تم الغاء كل التايمرز و الاكتفاء بواحد فقط و حذف الموديول
و اعادة ترقيم الصور فى المجلد ( show password ) لتبدأ الارقام من 25 الى 30 بدلا من 1 الى 6
و هذا هو كود النموذج بعد التعديل
كود :
Public Class Form1
Private WithEvents TT As New Timer
Private CurrentBox As Integer = 0 '1 user select 2 user typing 3 password hidden 4 password shown 5 password leave
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Chk_showpass.Checked = False
TxtPass.PasswordChar = "*"
End Sub
Private Sub Form1_DoubleClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.DoubleClick
Application.Exit()
End Sub
Public Shared Function get_num(ByVal path As String) As Integer
Dim num As Integer
num = Val(IO.Path.GetFileNameWithoutExtension(path))
Return num
End Function
Public Function TextPercent(ByVal Box As TextBox) As Integer 'داله لحساب النسبة المئوية لامتلاء textbox1
Dim g As Graphics = Me.CreateGraphics
Dim s As SizeF = g.MeasureString(Box.Text.ToString, New Font("Times New Roman", 16, FontStyle.Bold And FontStyle.Italic))
Dim result As Integer = Math.Round((s.Width / Box.Width) * 100)
Return result
End Function
Private Sub TxtUser_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles TxtUser.Click
CurrentBox = 1
PictureBox1.ImageLocation = Application.StartupPath & "\images\email select\1.png"
TT.Enabled = True
End Sub
Private Sub TxtUser_TextChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles TxtUser.TextChanged
If TxtUser.Text = "" Then PictureBox1.ImageLocation = Application.StartupPath & "\images\email typing\1.png"
CurrentBox = 2
TT.Enabled = True
End Sub
Private Sub TxtPass_Enter(ByVal sender As Object, ByVal e As System.EventArgs) Handles TxtPass.Enter
If CurrentBox < 3 Then
PictureBox1.ImageLocation = Application.StartupPath & "\images\password select\1.png"
CurrentBox = 3
If Chk_showpass.Checked Then CurrentBox = 4
End If
TT.Enabled = True
End Sub
Private Sub TxtPass_Leave(sender As Object, e As EventArgs) Handles TxtPass.Leave
CurrentBox = 5
PictureBox1.ImageLocation = Application.StartupPath & "\images\password deselect\1.png"
TT.Enabled = True
End Sub
Private Sub Chk_showpass_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Chk_showpass.CheckedChanged
If CurrentBox < 3 Then
PictureBox1.ImageLocation = Application.StartupPath & "\images\password select\1.png"
ElseIf CurrentBox = 5 Then
PictureBox1.ImageLocation = Application.StartupPath & "\images\password select\21.png"
If Chk_showpass.Checked = False Then PictureBox1.ImageLocation = Application.StartupPath & "\images\show password\25.png"
End If
If Chk_showpass.Checked = False Then
CurrentBox = 3
TxtPass.PasswordChar = "*"
Else
CurrentBox = 4
TxtPass.PasswordChar = ""
End If
TxtPass.Focus()
End Sub
Private Sub TT_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles TT.Tick
Select Case CurrentBox
Case 1
Dim file As String = Application.StartupPath & "\images\email select\" & get_num(PictureBox1.ImageLocation) + 1 & ".png"
If IO.File.Exists(file) = True Then
PictureBox1.ImageLocation = file
Else
TT.Enabled = False
End If
Case 2
If TxtUser.Text <> "" Then
If TextPercent(TxtUser) > get_num(PictureBox1.ImageLocation) AndAlso TxtUser.Focused = True Then
If TextPercent(TxtUser) <= TxtUser.Width AndAlso TextPercent(TxtUser) <= 100 Then
Dim file As String = Application.StartupPath & "\images\email typing\" & get_num(PictureBox1.ImageLocation) + 1 & ".png"
PictureBox1.ImageLocation = file
End If
ElseIf TextPercent(TxtUser) < get_num(PictureBox1.ImageLocation) AndAlso TxtUser.Focused = True Then
If TextPercent(TxtUser) <= TxtUser.Width AndAlso TextPercent(TxtUser) <= 100 Then
Dim file As String = Application.StartupPath & "\images\email typing\" & get_num(PictureBox1.ImageLocation) - 1 & ".png"
PictureBox1.ImageLocation = file
End If
End If
End If
Case 3
Dim file As String = Application.StartupPath & "\images\password select\" & get_num(PictureBox1.ImageLocation) + 1 & ".png"
If IO.File.Exists(file) = True Then
PictureBox1.ImageLocation = file
Else
TT.Enabled = False
End If
Case 4
Dim file As String = ""
If get_num(PictureBox1.ImageLocation) < 24 Then
file = Application.StartupPath & "\images\password select\" & get_num(PictureBox1.ImageLocation) + 1 & ".png"
Else
file = Application.StartupPath & "\images\show password\" & get_num(PictureBox1.ImageLocation) + 1 & ".png"
End If
If IO.File.Exists(file) = True Then
PictureBox1.ImageLocation = file
Else
TT.Enabled = False
End If
Case 5
Dim file As String = Application.StartupPath & "\images\password deselect\" & get_num(PictureBox1.ImageLocation) + 1 & ".png"
If IO.File.Exists(file) = True Then
PictureBox1.ImageLocation = file
Else
TT.Enabled = False
End If
Case Else
Dim file As String = Application.StartupPath & "\images\email select\1.png"
If IO.File.Exists(file) = True Then PictureBox1.ImageLocation = file
TT.Stop()
End Select
End Sub
End Class
المشاركات : 198
المواضيع 51
الإنتساب : May 2015
السمعة :
14
الشكر: 243
تم شكره 781 مرات في 83 مشاركات
(19-06-18, 04:50 PM)mrnooo2000 كتب : ما شاء الله فكرة رائعة جدا
لكن لماذا تايمر منفصل لكل حدث
عموما بعد اذنك قمت بالتعديل على الكود
حيث تم الغاء كل التايمرز و الاكتفاء بواحد فقط و حذف الموديول
و اعادة ترقيم الصور فى المجلد ( show password ) لتبدأ الارقام من 25 الى 30 بدلا من 1 الى 6
و هذا هو كود النموذج بعد التعديل
كود :
Public Class Form1
Private WithEvents TT As New Timer
Private CurrentBox As Integer = 0 '1 user select 2 user typing 3 password hidden 4 password shown 5 password leave
Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
Chk_showpass.Checked = False
TxtPass.PasswordChar = "*"
End Sub
Private Sub Form1_DoubleClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.DoubleClick
Application.Exit()
End Sub
Public Shared Function get_num(ByVal path As String) As Integer
Dim num As Integer
num = Val(IO.Path.GetFileNameWithoutExtension(path))
Return num
End Function
Public Function TextPercent(ByVal Box As TextBox) As Integer 'داله لحساب النسبة المئوية لامتلاء textbox1
Dim g As Graphics = Me.CreateGraphics
Dim s As SizeF = g.MeasureString(Box.Text.ToString, New Font("Times New Roman", 16, FontStyle.Bold And FontStyle.Italic))
Dim result As Integer = Math.Round((s.Width / Box.Width) * 100)
Return result
End Function
Private Sub TxtUser_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles TxtUser.Click
CurrentBox = 1
PictureBox1.ImageLocation = Application.StartupPath & "\images\email select\1.png"
TT.Enabled = True
End Sub
Private Sub TxtUser_TextChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles TxtUser.TextChanged
If TxtUser.Text = "" Then PictureBox1.ImageLocation = Application.StartupPath & "\images\email typing\1.png"
CurrentBox = 2
TT.Enabled = True
End Sub
Private Sub TxtPass_Enter(ByVal sender As Object, ByVal e As System.EventArgs) Handles TxtPass.Enter
If CurrentBox < 3 Then
PictureBox1.ImageLocation = Application.StartupPath & "\images\password select\1.png"
CurrentBox = 3
If Chk_showpass.Checked Then CurrentBox = 4
End If
TT.Enabled = True
End Sub
Private Sub TxtPass_Leave(sender As Object, e As EventArgs) Handles TxtPass.Leave
CurrentBox = 5
PictureBox1.ImageLocation = Application.StartupPath & "\images\password deselect\1.png"
TT.Enabled = True
End Sub
Private Sub Chk_showpass_CheckedChanged(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Chk_showpass.CheckedChanged
If CurrentBox < 3 Then
PictureBox1.ImageLocation = Application.StartupPath & "\images\password select\1.png"
ElseIf CurrentBox = 5 Then
PictureBox1.ImageLocation = Application.StartupPath & "\images\password select\21.png"
If Chk_showpass.Checked = False Then PictureBox1.ImageLocation = Application.StartupPath & "\images\show password\25.png"
End If
If Chk_showpass.Checked = False Then
CurrentBox = 3
TxtPass.PasswordChar = "*"
Else
CurrentBox = 4
TxtPass.PasswordChar = ""
End If
TxtPass.Focus()
End Sub
Private Sub TT_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles TT.Tick
Select Case CurrentBox
Case 1
Dim file As String = Application.StartupPath & "\images\email select\" & get_num(PictureBox1.ImageLocation) + 1 & ".png"
If IO.File.Exists(file) = True Then
PictureBox1.ImageLocation = file
Else
TT.Enabled = False
End If
Case 2
If TxtUser.Text <> "" Then
If TextPercent(TxtUser) > get_num(PictureBox1.ImageLocation) AndAlso TxtUser.Focused = True Then
If TextPercent(TxtUser) <= TxtUser.Width AndAlso TextPercent(TxtUser) <= 100 Then
Dim file As String = Application.StartupPath & "\images\email typing\" & get_num(PictureBox1.ImageLocation) + 1 & ".png"
PictureBox1.ImageLocation = file
End If
ElseIf TextPercent(TxtUser) < get_num(PictureBox1.ImageLocation) AndAlso TxtUser.Focused = True Then
If TextPercent(TxtUser) <= TxtUser.Width AndAlso TextPercent(TxtUser) <= 100 Then
Dim file As String = Application.StartupPath & "\images\email typing\" & get_num(PictureBox1.ImageLocation) - 1 & ".png"
PictureBox1.ImageLocation = file
End If
End If
End If
Case 3
Dim file As String = Application.StartupPath & "\images\password select\" & get_num(PictureBox1.ImageLocation) + 1 & ".png"
If IO.File.Exists(file) = True Then
PictureBox1.ImageLocation = file
Else
TT.Enabled = False
End If
Case 4
Dim file As String = ""
If get_num(PictureBox1.ImageLocation) < 24 Then
file = Application.StartupPath & "\images\password select\" & get_num(PictureBox1.ImageLocation) + 1 & ".png"
Else
file = Application.StartupPath & "\images\show password\" & get_num(PictureBox1.ImageLocation) + 1 & ".png"
End If
If IO.File.Exists(file) = True Then
PictureBox1.ImageLocation = file
Else
TT.Enabled = False
End If
Case 5
Dim file As String = Application.StartupPath & "\images\password deselect\" & get_num(PictureBox1.ImageLocation) + 1 & ".png"
If IO.File.Exists(file) = True Then
PictureBox1.ImageLocation = file
Else
TT.Enabled = False
End If
Case Else
Dim file As String = Application.StartupPath & "\images\email select\1.png"
If IO.File.Exists(file) = True Then PictureBox1.ImageLocation = file
TT.Stop()
End Select
End Sub
End Class
شكرا لاضافتك
It's easy if you try
المشاركات : 1
المواضيع 0
الإنتساب : Oct 2018
السمعة :
0
الشكر: 0
تم شكره 1 مرات في 1 مشاركات
شكراا لخى العزيز مجهود رائع
المشاركات : 813
المواضيع 24
الإنتساب : Oct 2012
السمعة :
228
الشكر: 1145
تم شكره 2171 مرات في 815 مشاركات
15-10-18, 04:18 PM
(آخر تعديل لهذه المشاركة : 15-10-18, 07:21 PM {2} بواسطة عبدالله الدوسري.)
فكرة جميلة , وشرح أجمل , موضوع متكامل , تستحق أكثر من +1
|