{"id":3311,"date":"2011-08-11T07:36:00","date_gmt":"2011-08-11T15:36:00","guid":{"rendered":"http:\/\/www.sapien.com\/blog\/?p=3311"},"modified":"2011-08-11T07:36:21","modified_gmt":"2011-08-11T15:36:21","slug":"primalforms-2011-create-an-awesome-fade-in-form","status":"publish","type":"post","link":"https:\/\/dev.sapien.com\/blog\/2011\/08\/11\/primalforms-2011-create-an-awesome-fade-in-form\/","title":{"rendered":"PrimalForms 2011: Create an Awesome Fade In Form"},"content":{"rendered":"

Did you ever want to make your forms a little more flashy? How about creating an Awesome Fade In Form? Yeah that\u2019s right I said Awesome!<\/p>\n

[Start Deep Voice]<\/font><\/p>\n

Everybody loves it when their forms make a smooth entrance. Ohhh Yeahhh\u2026<\/p>\n

As opposed to the typical abrupt \u201chere I am\u201d way. But then again, whatever floats your boat baby.<\/p>\n

[End Deep voice]<\/font> <\/p>\n

With few simple steps your form will be styling into existence.<\/p>\n

Steps to make your Awesome Fade in Form:<\/font><\/strong><\/p>\n

Step 1: Use the Alpha Luke!<\/strong> <\/p>\n

\n

Well it\u2019s actually called Opacity, but essentially the same as alpha or transparency. You can either set the Form\u2019s Opacity to 0% (Invisible) in the Designer or dynamically set it on the Form\u2019s Load event. In this sample I will set in the Form\u2019s Load event:<\/p>\n

$form1<\/span>.Opacity <\/span>= <\/span>0<\/span> <\/span><\/p>\n<\/blockquote>\n

Step 2: Add the Timer<\/strong><\/p>\n

<\/blockquote>\n
\n

Next, add a Timer Control to handle the fade in effect. Change the Timer\u2019s Interval property in order to speed up or slow down the fade in effect.<\/p>\n

 \"Timer<\/p>\n<\/blockquote>\n

Step 3: Add a Tick Event (Did you hear that? It\u2019s time to be Awesome!)<\/strong><\/p>\n

\n

Now add the Timer\u2019s Tick event and increments the Form\u2019s Opacity until it\u2019s at its full glory:<\/p>\n<\/blockquote>\n

$timerFadeIn_Tick<\/span>=<\/span>{\n    <\/span>#Can you see me now?<\/span>\n    <\/span>if<\/span>(<\/span>$form1<\/span>.Opacity <\/span>-lt<\/span> <\/span>1<\/span>)\n    {\n        <\/span>$form1<\/span>.Opacity <\/span>+=<\/span> <\/span>0<\/span>.<\/span>1<\/span>\n        \n        <\/span>if<\/span>(<\/span>$form1<\/span>.Opacity <\/span>-ge<\/span> <\/span>1<\/span>)\n        {\n            <\/span>#Stop the timer once we are 100% visible<\/span>\n            <\/span>$timerFadeIn<\/span>.Stop()\n        }\n    }\n}<\/span><\/pre>\n
Step 4: Let\u2019s get it on!<\/strong><\/p>\n
\n
Let\u2019s get it on (or should I say turn it on?) by starting the Timer on the Forms Load event:<\/p>\n<\/blockquote>\n
$FormEvent_Load<\/span>=<\/span>{\n    <\/span>#Start the Timer to Fade In<\/span>\n    <\/span>$timerFadeIn<\/span>.Start()\n    <\/span>$form1<\/span>.Opacity <\/span>= <\/span>0<\/span>\n}<\/span><\/pre>\n
And now we have the Awesome Fade In Form in action:<\/p>\n
\"Start<\/p>\n
Whaaa?! <\/p>\n
\"Fade<\/p>\n
What\u2019s that? It can\u2019t be!<\/p>\n
\"End<\/p>\n
Yeah, that\u2019s right! Its my Awesome Fade In Form!<\/p>\n
 <\/p>\n
[Start Deep Voice]<\/font> <\/p>\n
Damn\u2026 You\u2019re one sexy form!<\/p>\n
[End Deep Voice]<\/font><\/p>\n
Download the Fade In Form Sample<\/a> from the Download<\/a> section. That\u2019s right! You can\u2019t keep your hands off it!<\/p>\n","protected":false},"excerpt":{"rendered":"
Did you ever want to make your forms a little more flashy? How about creating an Awesome Fade In Form? Yeah that\u2019s right I said Awesome! [Start Deep Voice] Everybody loves it when their forms make a smooth entrance. Ohhh Yeahhh\u2026 As opposed to the typical abrupt \u201chere I am\u201d way. But then again, whatever […]<\/p>\n","protected":false},"author":10,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[283,509,575,25],"tags":[678,314,427,312],"class_list":["post-3311","post","type-post","status-publish","format-standard","hentry","category-howto","category-primalforms-software-news","category-primalforms-2011-software-news","category-windows-powershell","tag-fade-in-form","tag-primalforms","tag-timer","tag-winforms"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/dev.sapien.com\/blog\/wp-json\/wp\/v2\/posts\/3311","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/dev.sapien.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/dev.sapien.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/dev.sapien.com\/blog\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.sapien.com\/blog\/wp-json\/wp\/v2\/comments?post=3311"}],"version-history":[{"count":11,"href":"https:\/\/dev.sapien.com\/blog\/wp-json\/wp\/v2\/posts\/3311\/revisions"}],"predecessor-version":[{"id":3336,"href":"https:\/\/dev.sapien.com\/blog\/wp-json\/wp\/v2\/posts\/3311\/revisions\/3336"}],"wp:attachment":[{"href":"https:\/\/dev.sapien.com\/blog\/wp-json\/wp\/v2\/media?parent=3311"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/dev.sapien.com\/blog\/wp-json\/wp\/v2\/categories?post=3311"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/dev.sapien.com\/blog\/wp-json\/wp\/v2\/tags?post=3311"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}