{"id":628,"date":"2014-04-21T14:06:00","date_gmt":"2014-04-21T11:06:00","guid":{"rendered":"http:\/\/blog.iridi.com\/en\/2014\/04\/21\/how-to-make-an-animated-screensaver-for-your-project\/"},"modified":"2018-07-18T13:22:27","modified_gmt":"2018-07-18T10:22:27","slug":"how-to-make-an-animated-screensaver-for-your-project","status":"publish","type":"post","link":"https:\/\/blog.iridi.com\/en\/how-to-make-an-animated-screensaver-for-your-project\/","title":{"rendered":"How to Make an Animated Screensaver for Your Project?"},"content":{"rendered":"<p><i>Sergey Smirnov<\/i><\/p>\n<p><i>Script programmer at iRidium mobile<\/i><\/p>\n<p><img class=\"aligncenter\" src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/91c\/91cddb6409fa722028d4743cf032ffd9.jpg\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>An animated screensaver is in no way obligatory in a project. But \u2026 it adds beauty and style. You can easily show to your client that the project was created personally for him or her, to suit his or her tastes and wishes. Thus, the client is happy to have a unique project. And you can put up the price of the project with account to creating an individual screensaver.<\/p>\n<p>In this post, I\u2019ll describe how to make a screensaver of a slideshow of photos with the effect of falling snow in iRidium GUI Editor. It\u2019s only one of the possible variants of animated screensavers. But using the step by step instructions given below as the basis for your work you can create any animated screensaver.<\/p>\n<p>To make the screensaver you need:<\/p>\n<ul>\n<li><a href=\"https:\/\/s3.amazonaws.com\/iridium2_downloads\/environment\/iRidium_SETUP_2.1.exe\" rel=\"nofollow\">iRidium<\/a> software package installed on your PC;<\/li>\n<li>basic knowledge of <a href=\"http:\/\/wiki2.iridiummobile.ru\/index.php\/IRidium_GUI_Editor\" rel=\"nofollow\">iRidium GUI Editor<\/a> (at the end of the post you\u2019ll find a list of required editor components);<\/li>\n<li>knowledge of scenarios <a href=\"http:\/\/wiki2.iridiummobile.ru\/index.php\/IRidium_Script_API\" rel=\"nofollow\">iRidium Script<\/a>;<\/li>\n<li>images from the archive with a ready project. <a href=\"https:\/\/s3.amazonaws.com\/iridium2_downloads\/Forum_Attach\/screensaver_snow.zip\" rel=\"nofollow\">Download here<\/a> and unpack the archive.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p><b>7 steps to make an animated screensaver:<\/b><\/p>\n<ol>\n<li><a href=\"#one\">Creating a screensaver page;<\/a><\/li>\n<li><a href=\"#two\">Adding a slide-show;<\/a><\/li>\n<li><a href=\"#three\">Creating the effect of falling snow;<\/a><\/li>\n<li><a href=\"#four\">Adding date and time;<\/a><\/li>\n<li><a href=\"#five\">Creating block \u2013 unblock buttons;<\/a><\/li>\n<li><a href=\"#six\">Adding hot keys to the screensaver;<\/a><\/li>\n<li><a href=\"#seven\">Launching the project<\/a><\/li>\n<\/ol>\n<h4 style=\"text-align: center;\">Step 1. Creating a screensaver page<\/h4>\n<p><img class=\"alignright\" src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/f28\/f281ae877142183ed69cda08a4c6df6f.jpg\" \/>1.1. <a href=\"http:\/\/wiki2.iridiummobile.ru\/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D1%80%D0%B0%D1%84%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%BE%D0%B9_%D1%87%D0%B0%D1%81%D1%82%D0%B8_%D0%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%B0#.D0.9D.D0.BE.D0.B2.D0.B0.D1.8F_.D1.8\" rel=\"nofollow\">Create a new page<\/a> and name it &lt;&gt;bScreensaver with the help of <b>Add Page<\/b> button in <b>Projects Overview<\/b> panel.<\/p>\n<p>1.2. Open <b>Project Properties<\/b> and in the field <b>ScreenSaver<\/b> put a tick in <b>On \/ Off<\/b>. Select <b>Screensaver<\/b> from the dropdown menu in <b>Page<\/b>. Indicate the time in ms for the screensaver to appear in <b>Interval<\/b> (while working you can indicate the shortest possible interval \u2013 5 ms).<\/p>\n<p><center><\/center><center><img class=\"aligncenter\" src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/9e7\/9e794d3f280a77f5b771e23d95a3dca8.jpg\" \/>\u00a0\u00a0\u00a0<img class=\"aligncenter\" src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/bd3\/bd387caad2b0e2df53568e368f17ed93.jpg\" \/><\/center><\/p>\n<h4 style=\"text-align: center;\">Step 2. Adding a slide-show<\/h4>\n<p><img class=\"alignleft\" style=\"float: left;\" src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/230\/230559811a4ac8d19b5d02b422f2ede2.jpg\" \/>2.1. Add photos for the slide-show to the project. They can be photos to the house, its rooms or any other photos. You can also take images from the archive, that you\u2019ve just downloaded (file <b>SlideShow<\/b>).<\/p>\n<p>&nbsp;<\/p>\n<p>Add two more images for the <b>Lock \/ Unlock<\/b> button to the project (file <b>Buttons<\/b>) in the same way. We\u2019ll need them in <b>step 5.4<\/b>.<\/p>\n<p>&nbsp;<\/p>\n<p><img class=\"alignleft\" style=\"float: left;\" src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/7c2\/7c2e7a06ed48016abf772f810e6e2e8c.jpg\" \/>2.2. Create an item on <b>Screensaver<\/b> page with the help of <b>Draw Item<\/b>.<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\">Set its parameter and view in <b>Object Properties \/ General<\/b> and <b>States<\/b>.<\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/f90\/f90796c336743d4bbd96472edbd653e8.jpg\" \/>\u00a0\u00a0\u00a0 <img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/665\/6655bbc26503ca5cb3c3017a06cc1daa.jpg\" \/><\/center>&nbsp;<\/p>\n<p>2.3. Add states to the item <b>SlideShow<\/b> with the help of <b>Add State<\/b> button in <b>Object Properties \/ States. The number of states is determined by the number of photos<\/b> for the slide-show in your project.<\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/db8\/db8a791b55d7043739d00e779c39560b.jpg\" \/><\/center><\/p>\n<p style=\"text-align: center;\">There are 3 photos in the archive that you <a href=\"https:\/\/s3.amazonaws.com\/iridium2_downloads\/Forum_Attach\/screensaver_snow.ziphttps:\/s3.amazonaws.com\/iridium2_downloads\/Forum_Attach\/screensaver_snow.zip\" rel=\"nofollow\">downloaded<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>2.4. Select <b>state 1<\/b> of the item in <b>Object Properties \/ States<\/b>.<\/p>\n<p>Open <b>Gallery \/ Project Gallery<\/b> drag and drop image 1 on the item. Select <b>As image<\/b> in the menu that appears.<\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/225\/225dae159da94e910002979b69d8f7c5.jpg\" \/><\/center>&nbsp;<\/p>\n<p>Then select <b>Next State<\/b> in <b>Object Properties \/ States <\/b> drag and drop the next image on the item. Repeat this until you fill in all states with images.<\/p>\n<p>(There are 3 states in the archived project)<\/p>\n<h4 style=\"text-align: center;\"><a name=\"three\"><\/a>Step 3. Creating the effect of falling snow<\/h4>\n<p><img class=\"alignleft\" style=\"float: left;\" src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/278\/278a16725f03281ebef416a3c58225c8.jpg\" \/>3.1. Open <b>Gallery \/ Graphics<\/b>, create a new folder and name it <b>Screensaver<\/b> with the help of <b>Add Folder<\/b> button.<\/p>\n<p><img class=\"alignright\" style=\"float: right;\" src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/303\/303e9b3be45254ed8bd95e978115222f.jpg\" \/>3.2. Open a menu in the right column of <b>Screensaver<\/b> Folder with the right mouse button and select <b>Import File<\/b>.<\/p>\n<p>&nbsp;<\/p>\n<p>3.3. Select all images from the folder <b>Snow<\/b> in the window that appears.<\/p>\n<p>&nbsp;<\/p>\n<p>When importing several images, the Editor will offer to unite them into one item. <b>Click Yes.<\/b><\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/3d7\/3d7156a0feab700e896e28fcfb7c8db0.jpg\" \/><\/center><b>Import<\/b> all the other images from <b>Effect<\/b> folder the same way. The created <b>Effect<\/b> item will be used in <b><\/b><b>Step 5<\/b>.<\/p>\n<p>3.4. Now we have item <b>Snow<\/b> in <b>Screensaver<\/b> folder. To add an item from the Gallery to the page as a new item, drag and drop it to the free working area of <b>Screensaver<\/b> page.<\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/6d4\/6d476d4707b8a4e3b8b6899a98b5b7f4.jpg\" \/><\/center>&nbsp;<\/p>\n<p>3.5. Set the following parameters for item <b>Snow<\/b><\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/88d\/88de4cb9dc7f7eae01fdf53b461db764.jpg\" \/><\/center>For the falling snow not to be too bright, select <b>All States<\/b> in <b>Object Properties \/ States<\/b> and input 100 in <b>Opacity<\/b> property.<\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/83f\/83f8076bd46eacf5b170308d35d07f68.jpg\" \/><\/center>3.6. Create an item and name it <b>Hide<\/b> to create the darkening effect.<\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/7c6\/7c62c3abe3fc2b543ec64a19e01cbdc6.jpg\" \/><\/center><b>Delete State 2<\/b> of the item with the help of <b>delete state<\/b> button.<\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/810\/810e76df50de0b9c05c214a54344a58f.jpg\" \/><\/center>Change properties <b>Opacity<\/b> and <b>Color Alpha Channel<\/b> for <b>State 1.<\/b><\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/37e\/37e6207bc10be450aa304f951e280388.jpg\" \/><\/center>&nbsp;<\/p>\n<h4 style=\"text-align: center;\"><a name=\"four\"><\/a>Step 4. Adding date and time<\/h4>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/911\/911985abc41f21b8da4caeb6e718d54f.jpg\" \/><\/center>&nbsp;<\/p>\n<p>4.1. Create an item and name it <b>Date<\/b><\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/f1f\/f1f8e030f333d4fbe181346e25988d84.jpg\" \/><\/center>Delete State 2 (as one state is enough for text) and set the view of the text: color, opacity, font, etc.<\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/e73\/e73048e3a837e8d4ed76ce2f89e6962e.jpg\" \/><\/center>Add connection with the date to the item.<\/p>\n<p>Open <b>Project Device Panel<\/b> open folder <b>System Tokens \/ Date<\/b>, select the variable<b>MONTH_DD_YYYY<\/b> and drag and drop it on the item. The date will be displayed as text, that\u2019s why select <b>In Text<\/b> in the window that appears.<\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/46a\/46adb2e1d5ac06bc16a6b5b93e03bd2d.jpg\" \/><\/center>The created connection can be seen in <b>Object Properties \/ Programming<\/b><\/p>\n<p>4.2. Create an item and name it <b>Time<\/b><\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/5ab\/5ab94c598b5ba8d29a8374227fa388eb.jpg\" \/>\u00a0\u00a0\u00a0 <img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/593\/5931a33153c06a5b49bb0b50d1e2ba4e.jpg\" \/><\/center>Delete State 2 and set the view.<\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/785\/785a872ca05a94e7c4c4f1ceeba9b1fb.jpg\" \/><\/center><\/p>\n<div class=\"clear\"><\/div>\n<p>Add connection with time to the item.<\/p>\n<p>Open <b>Project Device Panel<\/b> open folder <b>System Tokens \/ Time<\/b>, select the variable <b>24<\/b> and drag and drop it on the item. Select <b>In Text<\/b> in the window that appears.<\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/632\/6322d525671bfb6684c4c31e6072efad.jpg\" \/><\/center>&nbsp;<\/p>\n<h4 style=\"text-align: center;\"><a name=\"five\"><\/a>Step 5. Creating block \u2013 unblock buttons<\/h4>\n<p>&nbsp;<\/p>\n<p>State 1 and State 2<\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/1e6\/1e65295ba7cecb28fd33c4347940fe47.jpg\" \/>\u00a0\u00a0\u00a0 <img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/4c4\/4c452c15bb580aa9a77719ed1ba97da8.jpg\" \/><\/center><img class=\"alignleft\" src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/1d8\/1d81acbc435b6440766e36ab72d72203.jpg\" \/>5.1. Create an item, name it <b>Unlock_button<\/b> and set the following parameters in <b>Object Properties \/ General<\/b>.<\/p>\n<p>Item <b>Unlock_button<\/b> has 2 states. Set their views in <b>Object Properties\/States<\/b>.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p><center><\/center><center><\/center><center><\/center><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/d28\/d2896a3fc56b33c99e4de99a497a4a8f.jpg\" \/><\/center><center><\/center>When the item <b>Unlock_button<\/b> is pressed, item <b>Hide<\/b> will gradually darken the screen. To do that we <a href=\"http:\/\/wiki2.iridiummobile.ru\/%D0%9E%D1%81%D0%BE%D0%B1%D0%B5%D0%BD%D0%BD%D0%BE%D1%81%D1%82%D0%B8_iRidium_Script\" rel=\"nofollow\">need a script<\/a>. Open <b>Scripts<\/b> window by pressing the button<b>Scripts<\/b> window by pressing the button <b>JS<\/b>.<br \/>\n<img class=\"alignleft\" src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/cf1\/cf1d8c973038ef684ca7a658427595a8.jpg\" \/>Create a new <a href=\"http:\/\/wiki2.iridiummobile.ru\/%D0%9E%D1%81%D0%BE%D0%B1%D0%B5%D0%BD%D0%BD%D0%BE%D1%81%D1%82%D0%B8_iRidium_Script#.D0.9E.D1.81.D0.BD.D0.BE.D0.B2.D0.BD.D1.8B.D0.B5_.D0.BF.D0.BE.D0.BD.D1.8F.D1.82.D0.B8.D1.8F\" rel=\"nofollow\">script module<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<p><center><img class=\"alignleft\" src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/502\/5025e2b6f251bbd1906681dce044f978.jpg\" \/><\/center><img class=\"herta\" src=\"http:\/\/www.iridiummobile.ru\/new_include_areas\/img\/herta.png\" \/><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt; color: #00b050;\">\/\/ Variables<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt; color: #548dd4;\">var<\/span><span style=\"font-size: 10pt;\"> timer = 0;\u00a0\u00a0 <span style=\"color: #00b050;\">\/\/ Time saver<\/span><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt; color: #548dd4;\">var <\/span><span style=\"font-size: 10pt;\">start = 0<span style=\"color: #00b050;\">;\u00a0\u00a0 \/\/ Starting value for animation<\/span><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt; color: #548dd4;\">var<\/span><span style=\"font-size: 10pt;\"> end\u00a0\u00a0 = 0;\u00a0\u00a0 <span style=\"color: #00b050;\">\/\/ End value for animation<\/span><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt; color: #548dd4;\">var <\/span><span style=\"font-size: 10pt;\">item\u00a0 = 0<span style=\"color: #00b050;\">;\u00a0\u00a0 \/\/ Animated item<\/span><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt; color: #548dd4;\">var<\/span><span style=\"font-size: 10pt;\"> aTime = 300; <span style=\"color: #00b050;\">\/\/ Time for animation<\/span>\u00a0 <\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-US\" style=\"font-size: 10pt; color: #00b050;\">\/\/ <\/span><span style=\"font-size: 10pt; color: #00b050;\">Animation<\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-US\" style=\"font-size: 10pt;\">IR.AddListener(IR.EVENT_WORK, 0<span style=\"color: #548dd4;\">, function<\/span>(time){\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-US\" style=\"font-size: 10pt;\">\u00a0\u00a0 <\/span><span style=\"font-size: 10pt; color: #00b050;\">\/\/ Check if there is an item for animation.<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt;\">\u00a0\u00a0 <\/span><span lang=\"EN-US\" style=\"font-size: 10pt; color: #548dd4;\">if<\/span><span style=\"font-size: 10pt;\">(<\/span><span lang=\"EN-US\" style=\"font-size: 10pt;\">item<\/span><span style=\"font-size: 10pt;\">){\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt; color: #00b050;\">\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Save time \u00a0\u00a0\u00a0\u00a0 <\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt;\">\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span lang=\"EN-US\" style=\"font-size: 10pt;\">timer<\/span><span style=\"font-size: 10pt;\"> += <\/span><span lang=\"EN-US\" style=\"font-size: 10pt;\">time<\/span><span style=\"font-size: 10pt;\">;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt; color: #00b050;\">\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Get the value and write it to property <\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt;\">\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span lang=\"EN-US\" style=\"font-size: 10pt;\">item.GetState(0).Opacity = IR.Tween(&#8220;TWEEN_LINEAR&#8221;, timer, start, end, aTime);\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-US\" style=\"font-size: 10pt; color: #00b050;\">\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><span style=\"font-size: 10pt; color: #00b050;\">\/\/ End \u2013 if the time limit is exceeded <\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt;\">\u00a0\u00a0\u00a0\u00a0\u00a0 <span style=\"color: #548dd4;\">if<\/span>(timer &gt; aTime){\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <span style=\"color: #00b050;\">\/\/ Write the end value <\/span><\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 item.GetState(0).Opacity = end;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt; color: #00b050;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 \/\/ Set to nil the saver and the item\u00a0\u00a0\u00a0\u00a0 <\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt;\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 timer = item = 0;\u00a0 <\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt;\">\u00a0\u00a0\u00a0\u00a0\u00a0 } <\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt;\">\u00a0\u00a0 }<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt;\">});\u00a0\u00a0\u00a0\u00a0 <\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt; color: #00b050;\">\/\/ User\u2019s function to be called by macros Script Call<\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-US\" style=\"font-size: 10pt; color: #548dd4;\">function <\/span><span lang=\"EN-US\" style=\"font-size: 10pt;\">Hide_to_Black(){<\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-US\" style=\"font-size: 10pt; color: #00b050;\">\u00a0\u00a0\u00a0 \/\/ <\/span><span style=\"font-size: 10pt; color: #00b050;\">Get the item <\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-US\" style=\"font-size: 10pt;\">\u00a0\u00a0 item = IR.GetItem(&#8220;Screensaver&#8221;).GetItem(&#8220;Hide&#8221;);\u00a0\u00a0\u00a0 <\/span><\/p>\n<p class=\"MsoNormal\"><span lang=\"EN-US\" style=\"font-size: 10pt; color: #00b050;\">\u00a0\u00a0 <\/span><span style=\"font-size: 10pt; color: #00b050;\">\/\/ Get the current value of opacity, as the starting value of animation<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt;\">\u00a0\u00a0 start = item.GetState(0).Opacity;\u00a0\u00a0\u00a0 <\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt; color: #00b050;\">\u00a0\u00a0 \/\/ Get the end value of animation<\/span><\/p>\n<p class=\"MsoNormal\"><span style=\"font-size: 10pt;\">\u00a0\u00a0 <\/span><span lang=\"EN-US\" style=\"font-size: 10pt;\">end = 255 &#8211; start;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <\/span><\/p>\n<p><span style=\"font-size: 10pt;\">}<\/span><\/p>\n<p><img class=\"herta\" src=\"http:\/\/www.iridiummobile.ru\/new_include_areas\/img\/herta.png\" \/><\/p>\n<p>Select item <b>Unlock_button<\/b> and open <b>Object Properties \/ Programming<\/b>.<\/p>\n<p>To call animation, add macros <b>Script Call <\/b> with the function <b>Hide _to_Black <\/b> to the <b>Press<\/b> event.<\/p>\n<p>To come back to the previous page add macros <b>Script Call <\/b> with the function <b>Hide _to_Black <\/b> and macros <b>PrevPage<\/b> to <b>Release<\/b> event.<\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/cc0\/cc0257e603f612e2b5e4553ab9442271.jpg\" \/><\/center>Sounds can be added to the item <b>Unlock_button<\/b>. Open the <b>Gallery \/ Sound \/ Sound 3<\/b> and drag and drop the sound file <b>Flashlight Turned On 01<\/b> on event <b>Press<\/b>, and <b>Lamp Switch <\/b> and <b>Keys dropping on The Table 01<\/b> on event <b>Release<\/b>.<\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/5b1\/5b1450a4a3131a6d242ed8f88743a285.jpg\" \/><\/center>5.2. Create an item, name it <b>Unlock_label<\/b> and set the following parameters in <b>Object Properties \/ General<\/b>.<\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/3b5\/3b5ac29694b1ca6983331d8303386b4c.jpg\" \/><\/center>Set the view of the item <b>Unlock_label<\/b><\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/bad\/badff5a2d939a315aeb67c0dafdf561a.jpg\" \/>\u00a0\u00a0\u00a0<img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/d10\/d1056d969fd227aaa8aa07b070bbb104.jpg\" \/><\/center>Go to <b>Object Properties\/ Programming<\/b>, open <b>Relations<\/b> and create a connection between properties <b>Value<\/b> of items <b>Unlock_label<\/b> and <b>Unlock_button<\/b>, where<\/p>\n<p><b>Destinations = UI.Screensaver.Unlock_lable.Value<\/b><\/p>\n<p><b>Source = UI.Screensaver.Unlock_button.Value<\/b><\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/b72\/b72511878a2b2255dc456d9572b347af.jpg\" \/><\/center>As a result, when <b>Unlock_button<\/b> is pressed, text <b>Unlock_label<\/b> will also be pressed.<\/p>\n<p>5.3. Take item <b>Effects<\/b> from <b>Screensaver<\/b> folder in <b>Gallery \/ Graphics Screensaver<\/b> (it was added in <b>step 3.3<\/b>).<\/p>\n<p>Set the following parameters for it.<\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/25c\/25c29ae15616ecfee48d801665f1d217.jpg\" \/><\/center>5.4. Take item <b>Lock<\/b> from <b>Gallery \/ Project Gallery <\/b>(it was added in <b>step 2.1<\/b>).<\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/344\/344d0cbcc750ad2ec878cf9c837a5aba.jpg\" \/><\/center>Set the following parameters for it.<\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/f6d\/f6d7d0cb49032a0358492106a473f6a8.jpg\" \/><\/center>Go to <b>Object properties\/State <\/b>add <b>State 2<\/b> and set its view.<\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/934\/9345baac7186a3026bec0a9c7c2d1f49.jpg\" \/><\/center>Go to <b>Object properties\/Programming<\/b>, open <b>Relations<\/b> and create a connection between properties <b>Value<\/b> of items <b>Unlock_icon<\/b> and <b>Unlock_button<\/b>, where<\/p>\n<p><b>Destinations = UI.Screensaver.Unlock_ icon.Value<\/b><\/p>\n<p><b>Source = UI.Screensaver.Unlock_button.Value<\/b><\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/1bc\/1bce8e19902777ed877bf5a3aac90b19.jpg\" \/><\/center>&nbsp;<\/p>\n<h4 style=\"text-align: center;\"><a name=\"six\"><\/a>Step 6. Adding hot keys to the screensaver<\/h4>\n<p>&nbsp;<\/p>\n<p>To add different hot keys (for quick access to functions of smart home), use icons in <b>Gallery \/ Graphics \/ iRidium Samples \/ Icons \/ 64&#215;64<\/b>.<\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/b42\/b427189b5b1c26d1136993894509f154.jpg\" \/><\/center>&nbsp;<\/p>\n<h4 style=\"text-align: center;\"><a name=\"seven\"><\/a>Step 7. Launching the project<\/h4>\n<p>&nbsp;<\/p>\n<p>Press <b>Emulator<\/b> or hot key <b>F5<\/b>.<\/p>\n<p><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/662\/662c853dee50831ccf094043a2958e07.jpg\" \/><\/p>\n<p>Wait for 5 seconds and see it work.<\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/148\/1483aeb1a35bb61bfe5bd27dd192be59.jpg\" \/>\u00a0\u00a0<img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/ff1\/ff11da4c368cbdb5e6a96aed035006f2.jpg\" \/><\/center><b>The ready screensaver<\/b> can be saved in <b>Gallery<\/b> and used in other projects. Use the image <b>Preview_Gallery.png <\/b>from the downloaded archive as a <b>Preview<\/b> of the project.<\/p>\n<p><center><img src=\"https:\/\/iridiummobile.net\/upload\/medialibrary\/009\/0094b2200b49fa644a5afd52f114f916.jpg\" \/><\/center>Wish you success in making your own screensavers!<\/p>\n<h3><\/h3>\n<h3>Required components:<\/h3>\n<p><b>iRidium GUI Editor:<\/b><\/p>\n<ul>\n<li><a href=\"http:\/\/wiki2.iridiummobile.net\/Creating_the_Graphic_Part_of_iRidium_Projects#Multistate_Button\" target=\"_blank\" rel=\"nofollow noopener\">Multistate Buttons<\/a><\/li>\n<li><a href=\"http:\/\/wiki2.iridiummobile.net\/Creating_the_Graphic_Part_of_iRidium_Projects#Macro_.D0.A1ommands_.28Macros_Editor.29\" target=\"_blank\" rel=\"nofollow noopener\">Macros Editor<\/a><\/li>\n<li><a href=\"http:\/\/wiki2.iridiummobile.net\/Creating_the_Graphic_Part_of_iRidium_Projects#Graphic_and_Sound_Galleries\" target=\"_blank\" rel=\"nofollow noopener\">Gallery Graphics, Sound<\/a><\/li>\n<li><a href=\"http:\/\/wiki2.iridiummobile.net\/Creating_the_Graphic_Part_of_iRidium_Projects#Chameleon_Images\" target=\"_blank\" rel=\"nofollow noopener\">Chameleon image<\/a><\/li>\n<li><a href=\"http:\/\/wiki2.iridiummobile.net\/Working_with_Equipment#System_Tokens\" target=\"_blank\" rel=\"nofollow noopener\">System Tokens \/ Date \u0438 Time<\/a><\/li>\n<\/ul>\n<p><b>Scripts:<\/b><\/p>\n<ul>\n<li><a href=\"http:\/\/wiki2.iridiummobile.net\/GUI_API#IR.GetItem\" target=\"_blank\" rel=\"nofollow noopener\">IR.GetItem<\/a><\/li>\n<li><a href=\"http:\/\/wiki2.iridiummobile.net\/Systems_API#IR.EVENT_WORK\" target=\"_blank\" rel=\"nofollow noopener\">IR.EVENT_WORK<\/a><\/li>\n<li><a href=\"http:\/\/wiki2.iridiummobile.net\/Systems_API#IR.Tween\" target=\"_blank\" rel=\"nofollow noopener\">IR.Tween<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Sergey Smirnov Script programmer at iRidium mobile &nbsp; An animated screensaver is in no way obligatory in a project. But \u2026 it adds beauty and<\/p>\n","protected":false},"author":2,"featured_media":940,"comment_status":"open","ping_status":"open","sticky":false,"template":"template-centered.php","format":"standard","meta":[],"categories":[3],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.iridi.com\/en\/wp-json\/wp\/v2\/posts\/628"}],"collection":[{"href":"https:\/\/blog.iridi.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.iridi.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.iridi.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.iridi.com\/en\/wp-json\/wp\/v2\/comments?post=628"}],"version-history":[{"count":4,"href":"https:\/\/blog.iridi.com\/en\/wp-json\/wp\/v2\/posts\/628\/revisions"}],"predecessor-version":[{"id":1181,"href":"https:\/\/blog.iridi.com\/en\/wp-json\/wp\/v2\/posts\/628\/revisions\/1181"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.iridi.com\/en\/wp-json\/wp\/v2\/media\/940"}],"wp:attachment":[{"href":"https:\/\/blog.iridi.com\/en\/wp-json\/wp\/v2\/media?parent=628"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.iridi.com\/en\/wp-json\/wp\/v2\/categories?post=628"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.iridi.com\/en\/wp-json\/wp\/v2\/tags?post=628"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}