{"id":1836,"date":"2011-08-02T13:43:18","date_gmt":"2011-08-02T13:43:18","guid":{"rendered":"http:\/\/premiumcoding.com\/?p=1836"},"modified":"2017-08-31T06:28:28","modified_gmt":"2017-08-31T06:28:28","slug":"stylish-flash-countdown-reflection-tutorial","status":"publish","type":"post","link":"https:\/\/premiumcoding.com\/stylish-flash-countdown-reflection-tutorial\/","title":{"rendered":"Stylish Flash Countdown with Reflection Tutorial"},"content":{"rendered":"<p>Welcome to our first edition of <strong>Premium tutorials<\/strong>. We have decided to share the knowledge of how <strong>some of our files<\/strong> are made. In our first <strong>tutorial<\/strong> we will cover the design and implementation of a <strong><a title=\"Flash Countdown with reflection\" href=\"http:\/\/premiumcoding.com\/flash-countdown-counter\/\">Flash\u00a0 Countdown with Reflection<\/a><\/strong>. For this purpose we have created a Countdown in Photoshop which you can download from our <a title=\"PSD Photoshop Freebies\" href=\"http:\/\/premiumcoding.com\/premiumcoding-blog\/freebies\/\">Freebies section<\/a>.<\/p>\n<h4>WHAT WE WILL BE CREATING<\/h4>\n<p>[kml_flashembed publishmethod=&#8221;static&#8221; fversion=&#8221;9.0.0&#8243; movie=&#8221;http:\/\/premiumcoding.com\/tut\/clock\/flashCountdown.swf&#8221; width=&#8221;570&#8243; height=&#8221;260&#8243; targetclass=&#8221;flashmovie&#8221;]<\/p>\n<p><a href=\"http:\/\/adobe.com\/go\/getflashplayer\"><img src=\"http:\/\/www.adobe.com\/images\/shared\/download_buttons\/get_flash_player.gif\" rel=\"lightbox[1836]\" alt=\"Get Adobe Flash player\" \/><\/a><\/p>\n<p>[\/kml_flashembed]<\/p>\n<p>&nbsp;<\/p>\n<p>[download id=&#8221;41&#8243;]<\/p>\n<h4>ASSETS USED<\/h4>\n<ul>\n<li><a href=\"http:\/\/premiumcoding.com\/slick-dark-psd-countdown-freebie\/\">PSD Countdown<\/a><\/li>\n<li><a href=\"http:\/\/www.greensock.com\/tweenlite\/\">Tweenlite<\/a><\/li>\n<li><a href=\"http:\/\/www.adobe.com\/devnet\/flash\/articles\/reflect_class_as3.html\">PixelFumes Reflect<\/a><\/li>\n<\/ul>\n<h4>STEP 1: PREPARING ASSETS IN PHOTOSHOP<\/h4>\n<p>We will first slice components in our <strong>Photoshop countdown file<\/strong>. Open Photoshop and choose any of the available countdowns. In this tutorial we will use first implementation since we would like to animate outer and inner part of the <strong>countdown<\/strong> background. Choose the slice tool (K) and make a selection like in the screenshot below.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-1837\" title=\"Slicing up image Photoshop\" src=\"http:\/\/premiumcoding.com\/wp-content\/uploads\/2011\/08\/screenshot1.jpg\" alt=\"Slicing up image Photoshop\" width=\"570\" height=\"300\" \/><\/p>\n<p>Now do the same for the outer part and the line visually separating upper and lower part of the<strong> countdown<\/strong>. Name them countdownOuterPart and separatorLine. Now choose File\/Save for Web &amp; Devices, change format to PNG and save only selected slices. Make sure you hide background when saving otherwise you will get fragments of background on your outer part of countdown (on rounded borders). When you are slicing outer part go to layer<strong> clockBackground<\/strong> and change fill opacity to 0% so you only get a border layout like in the screenshot below. You can also do that on layer itself (set Fill to 0%).<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-1840\" title=\"Setting fill opacity\" src=\"http:\/\/premiumcoding.com\/wp-content\/uploads\/2011\/08\/screenshoot2.jpg\" alt=\"Setting fill opacity\" width=\"570\" height=\"300\" \/><\/p>\n<h4>STEP 2: IMPORTING ASSETS TO FLASH<\/h4>\n<p>Now that we have all the necessary assets, open Flash and make a new document in AS3. First we have to <strong>import our assets<\/strong> into library. Go to File\/Import\/Import to Library and import all three assets that we have created in Photoshop. Go to Window\/Library to bring up the library tag. You will see three images that you just imported. It is time to convert them to MovieClips so we can interact with them with actionscript.<\/p>\n<div style=\"text-align:center;\">[smartads]<\/div>\n<p><\/p>\n<h4>STEP 3: CONVERTING ASSETS TO MOVIECLIPS<\/h4>\n<p>Drag each image to your stage, right click on it and select <strong>Convert to Symbol<\/strong>. Name MovieClips with the same name you named your images.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-1846\" title=\"Converting assets to MovieClips\" src=\"http:\/\/premiumcoding.com\/wp-content\/uploads\/2011\/08\/screenshoot4.jpg\" alt=\"Converting assets to MovieClips\" width=\"570\" height=\"300\" \/><\/p>\n<p>Do not forget to name instances of each Movieclip (Window\/Properties and then enter Instance name).<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-1847\" title=\"Naming instance in Flash AS3\" src=\"http:\/\/premiumcoding.com\/wp-content\/uploads\/2011\/08\/screenshoot5.jpg\" alt=\"Naming instance in Flash AS3\" width=\"570\" height=\"300\" \/><\/p>\n<h4>STEP 4: SETTING DYNAMIC TEXT<\/h4>\n<p>Now put dynamic text over outer and inner background but be sure it&#8217;s behind the separator line (for the separate effect). Name instance of your text as <strong>numberText<\/strong>, choose the font you want (we have used <a title=\"Bebas Neue\" href=\"http:\/\/www.fontsquirrel.com\/fonts\/bebas-neue\">Bebas Neue<\/a>) and click Embed (you can only embed numbers). Below is a screenshot of how the stage looks at the moment.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-1843\" title=\"Converting assets to MovieClips\" src=\"http:\/\/premiumcoding.com\/wp-content\/uploads\/2011\/08\/screenshoot3.jpg\" alt=\"Converting assets to MovieClips\" width=\"570\" height=\"300\" \/><\/p>\n<p>Now drag separator line to the stage, convert it to MovieClip and right click on it then select Arrange\/Bring to Front (this is important because we want it to separate numbers).<\/p>\n<h4>STEP 5: COMBINING ASSETS<\/h4>\n<p>It is time to combine all assets and make one component out of it. Select <strong>all four assets<\/strong> (outer background, inner background, text and separator line), right click and choose Convert to Symbol. Name it countdownComponent and check <strong>Export for Actionscript<\/strong>. Now <strong>delete<\/strong> the component from stage.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-1848\" title=\"Export for Actionscript\" src=\"http:\/\/premiumcoding.com\/wp-content\/uploads\/2011\/08\/screenshoot6.jpg\" alt=\"Export for Actionscript\" width=\"570\" height=\"300\" \/><\/p>\n<h4>STEP 6: SETTING THE STAGE WITH ACTIONSCRIPT<\/h4>\n<p>First we have to import <strong>Tweenlite classes<\/strong>. Press F9 to bring actions menu and copy following code at the start of the document.<br \/>\n<div class=\"pmc-code\"><br \/>\nimport com.greensock.*;<br \/>\nimport com.greensock.easing.*;<br \/>\n<\/div><br \/>\nDefine main <strong>holders<\/strong> for our countdown instances and<strong> array<\/strong> which will hold them for<strong> future reference<\/strong> (when we subtract time).<\/p>\n<div class=\"pmc-code\"><br \/>\nvar countdownHolder:Sprite = new Sprite ();<br \/>\nvar countdownHolderArray:Array = new Array();<br \/>\n<\/div>\n<p>We will now create four instances of countdownCounter with a <strong>for loop<\/strong>. Please note that we have created a class countdownCounter in previous step that acts like a variable type now.<\/p>\n<div class=\"pmc-code\"><br \/>\nfor (var k:int = 1; k &lt;= 4; k++){<br \/>\n     var cCounter:countdownCounter = new countdownCounter();<br \/>\n     cCounter.x = (cCounter.width + 5) * k &#8211; cCounter.width \/ 2;<br \/>\n     cCounter.y = stage.stageHeight \/ 2 &#8211; cCounter.height \/ 2;<br \/>\n     countdownHolder .addChild(cCounter);<br \/>\n     countdownHolderArray.push(cCounter);<br \/>\n}<br \/>\n<\/div>\n<p>We position them on center of the stage and add it to the stage with<strong> addChild<\/strong>. Save the file as <strong>flashCountdown.fla<\/strong> and export the movie. Your stage should look similar to screenshot below.<\/p>\n<p><img loading=\"lazy\" class=\"alignnone size-full wp-image-1851\" title=\"Flash Countdown Preview\" src=\"http:\/\/premiumcoding.com\/wp-content\/uploads\/2011\/08\/screenshoot7.jpg\" alt=\"Flash Countdown Preview\" width=\"570\" height=\"300\" \/><\/p>\n<h4>STEP 7: MAKING XML THAT HOLDS THE END TIME<\/h4>\n<p>Open a text editor (like Notepad++) and copy paste following code in it:<\/p>\n<div class=\"pmc-code\"><br \/>\n<countdown><br \/>\n\t<year>2011<\/year><br \/>\n\t<month>9<\/month><br \/>\n\t<day>25<\/day><br \/>\n\t<hours>23<\/hours><br \/>\n\t<minute>5<\/minute><br \/>\n<\/countdown><br \/>\n<\/div>\n<p>Save the file as countdown.xml.<\/p>\n<h4>STEP 8: LOADING XML FILE INTO FLASH<\/h4>\n<p>Copy and paste following code at the start of the actions menu (right after Tweenlite classes import):<\/p>\n<div class=\"pmc-code\"><br \/>\nvar myXMLLoader:URLLoader = new URLLoader();<br \/>\nvar countdown:XML;<br \/>\nmyXMLLoader.load(new URLRequest(&#8220;countdown.xml&#8221;));<br \/>\n<\/div>\n<p>We now have to read the content. Paste following lines:<\/p>\n<div class=\"pmc-code\"><br \/>\nmyXMLLoader.addEventListener(Event.COMPLETE, processXML);<br \/>\nmyXMLLoader.addEventListener(Event.COMPLETE, processXML);<br \/>\nfunction processXML (e:Event):void{<br \/>\n\tcountdown = new XML(e.target.data);\/\/here values from xml are read to variables<br \/>\n\tStartCountdown();<br \/>\n}<br \/>\n<\/div>\n<p>As you can see we have add a call to <strong>function StartCountdown<\/strong>. We will insert our for loop within this function:<\/p>\n<p><div class=\"pmc-code\"><br \/>\nfunction StartCountdown(){<br \/>\n       for (var k:int = 1; k <= 4; k++){\n\t\tvar cCounter:countdownCounter = new countdownCounter();\n\t\tcCounter.x = (cCounter.width + 5) * k - cCounter.width \/ 2;\n\t\tcCounter.y = stage.stageHeight \/ 2 - cCounter.height \/ 2;\n\t\tcountdownHolder .addChild(cCounter);\n        countdownHolderArray.push(cCounter);\n\t}\n}\n\n\n[\/cc]\n\n\n<h4>STEP 9: CALCULATING TIME<\/h4>\n<p>We have to subtract<strong> current time<\/strong> from the <strong>end time<\/strong> to get how much time is left before an event happens. This is why we will acquire two times:<\/p>\n[cc lang=\"actionscript3\"]<\/p>\n<p>var endTime:Date = new Date(countdown.year,countdown.month 1,countdown.day,countdown.hours,countdown.minutes);<br \/>\nvar currentTime:Date = new Date();<br \/>\n<\/div>\n<p>Now calculate the difference between current and end time and then apply calculations for days, hours, minutes and seconds:<\/p>\n<div class=\"pmc-code\"><br \/>\nvar timeLeft:Number = endTime.getTime() &#8211; currentTime.getTime();<br \/>\nseconds = Math.floor(timeLeft\/1000);<br \/>\nminutes = Math.floor(seconds\/60);<br \/>\nhours = Math.floor(minutes\/60);<br \/>\ndays = Math.floor(hours\/24);<br \/>\nseconds %= 60;<br \/>\nminutes %= 60;<br \/>\nhours %= 24;<br \/>\n<\/div>\n<p>All this code has to be applied before the for loop in StartCountdown function. We will now add <strong>four if sentences<\/strong> to our for loop to apply our new time values. For loop should now look like this:<\/p>\n<p><div class=\"pmc-code\"><br \/>\nfor (var k:int = 1; k <= 4; k++){\n\tvar cCounter:countdownCounter = new countdownCounter();\n\tcCounter.x = (cCounter.width + 5) * k - cCounter.width \/ 2;\n\tcCounter.y = stage.stageHeight \/ 2 - cCounter.height \/ 2;\n\tif (k == 1)\n\t\tcCounter.numberText.text = String(days);\n\tif (k == 2)\n\t\tcCounter.numberText.text = String(hours);\n\tif (k == 3)\n\t\tcCounter.numberText.text = String(minutes);\n\tif (k == 4)\n\t\tcCounter.numberText.text = String(seconds);\n\tcountdownHolder .addChild(cCounter);\ncountdownHolderArray.push(cCounter);\n}\n[\/cc]\n\nSave the file and export it. Your SWF now looks like this:\n\n<img loading=\"lazy\" class=\"alignnone size-full wp-image-1852\" title=\"Flash Countdown Preview\" src=\"http:\/\/premiumcoding.com\/wp-content\/uploads\/2011\/08\/screenshoot8.jpg\" alt=\"Flash Countdown Preview\" width=\"570\" height=\"300\" \/><\/p>\n<p>Finally we see some results. Numbers are standing still though. Time that you see on the screen is time left until event at the time you exported the movie. This actually works and if you would refresh a page on your website it would always show the correct time (from the time of refresh of course). But what we want is a <strong>dynamic countdown<\/strong> that will calculate time each second and <strong>adjust the timer<\/strong> accordingly.<\/p>\n<h4>STEP 10: COUNTING DOWN<\/h4>\n<p>We have to add a time listener that will call a function each second, subtract value for 1 and apply new values to our countdown.<\/p>\n[cc lang=\"actionscript3\"]<br \/>\nif(timeLeft > 0){<br \/>\n\tcontdownTimer =new Timer(1000);<br \/>\ncontdownTimer.addEventListener(TimerEvent.TIMER, countingDown);<br \/>\n\tcontdownTimer.start();<br \/>\n}<br \/>\n<\/div>\n<p>Now add a function that will <strong>calculate<\/strong> days, hours, minutes and seconds each time timer calls it.<\/p>\n<p><div class=\"pmc-code\"><br \/>\nfunction countingDown(e:TimerEvent):void {<br \/>\n\tseconds&#8211;;<br \/>\n\tif(seconds < 0){\n\t\tseconds = 59;\n\t\t\tminutes--;\n\t\t\tif (minutes < 0){\n\t\t\t\tminutes = 59;\n\t\t\t\thours--;\n\t\t\t\tif(hours < 0){\n\t\t\t\t\thours = 59;\n\t\t\t\t\tdays--;\n\t\t\t\t}\n\t\t\t}\n\t\t}\n}\n\n\n[\/cc]\n\nAs a final step add <strong>new values<\/strong> to the<strong> countdown<\/strong> text. We will use our array to apply new values:<\/p>\n[cc lang=\"actionscript3\"]<br \/>\ncountdownHolderArray[0].numberText.text = String(days);<br \/>\ncountdownHolderArray[1].numberText.text = String(hours);<br \/>\ncountdownHolderArray[2].numberText.text = String(minutes);<br \/>\ncountdownHolderArray[3].numberText.text = String(seconds);<br \/>\n<\/div>\n<p>Save the file end export. You should now have a fully functional <strong>Flash countdown<\/strong> that you can set via XML file.<\/p>\n<h4>STEP\u00a0 11: ADDING REFLECTION<\/h4>\n<p>First you have to download a <a href=\"http:\/\/www.adobe.com\/devnet\/flash\/articles\/reflect_class_as3.html\">PixelFumes Reflect<\/a> class that will help you implement<strong> reflection<\/strong> with ease. Extract and copy it to your com folder (where you already have Tweenlite). Now simply add following code at the end of our StartCountdown function:<\/p>\n<div class=\"pmc-code\"><br \/>\nvar r1 = new Reflect({mc:countdownHolderArray[0], alpha:60, ratio:250, distance:10, updateTime:10, reflectionDropoff:1});<br \/>\nvar r2 = new Reflect({mc:countdownHolderArray[1], alpha:60, ratio:250, distance:10, updateTime:10, reflectionDropoff:1});<br \/>\nvar r3 = new Reflect({mc:countdownHolderArray[2], alpha:60, ratio:250, distance:10, updateTime:10, reflectionDropoff:1});<br \/>\nvar r4 = new Reflect({mc:countdownHolderArray[3], alpha:60, ratio:250, distance:10, updateTime:10, reflectionDropoff:1});<br \/>\n<\/div>\n<p>Save your file and export. You will see a nice <strong>reflection<\/strong> is now added to our countdown. Play with alpha, ratio and distance settings to get the best effect for your needs.<\/p>\n<h4>CONCLUSION<\/h4>\n<p>Our first premium tutorial has come to an end. We hope you have enjoyed reading it and that you will put some of that new knowledge to good use. If you haven\u2019t done so already, please <strong>download source files<\/strong> that will help you throughout the tutorial. If you have any suggestions please post them in comments section. Please note that source file is saved as Flash Cs4. If you would like a CS3 version please contact us. Good luck!<\/p>\n<p>[download id=&#8221;41&#8243;]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Welcome to our first edition of Premium tutorials. We have decided to share the knowledge of how some of our files are made. In our first tutorial we will cover the design and implementation of a Flash\u00a0 Countdown with Reflection. For this purpose we have created a Countdown in Photoshop which you can download from &#8230;<\/p>\n","protected":false},"author":1,"featured_media":1897,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[178],"tags":[266,269,270,271,272],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.6.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Stylish Flash Countdown with Reflection Tutorial - PremiumCoding<\/title>\n<meta name=\"description\" content=\"Welcome to our first edition of Premium tutorials. We have decided to share the knowledge of how some of our files are made. In our first tutorial we will\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/premiumcoding.com\/stylish-flash-countdown-reflection-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Stylish Flash Countdown with Reflection Tutorial - PremiumCoding\" \/>\n<meta property=\"og:description\" content=\"Welcome to our first edition of Premium tutorials. We have decided to share the knowledge of how some of our files are made. In our first tutorial we will\" \/>\n<meta property=\"og:url\" content=\"https:\/\/premiumcoding.com\/stylish-flash-countdown-reflection-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"PremiumCoding\" \/>\n<meta property=\"article:published_time\" content=\"2011-08-02T13:43:18+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-08-31T06:28:28+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"4 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/premiumcoding.com\/#organization\",\"name\":\"PremiumCoding\",\"url\":\"https:\/\/premiumcoding.com\/\",\"sameAs\":[],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/premiumcoding.com\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/premiumcoding.com\/wp-content\/uploads\/2013\/12\/premiumcoding-wordpress-themes-logo@2x.png\",\"width\":400,\"height\":134,\"caption\":\"PremiumCoding\"},\"image\":{\"@id\":\"https:\/\/premiumcoding.com\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/premiumcoding.com\/#website\",\"url\":\"https:\/\/premiumcoding.com\/\",\"name\":\"PremiumCoding\",\"description\":\"WordPress Themes, Tutorials &amp; Articles\",\"publisher\":{\"@id\":\"https:\/\/premiumcoding.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/premiumcoding.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/premiumcoding.com\/stylish-flash-countdown-reflection-tutorial\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/premiumcoding.com\/stylish-flash-countdown-reflection-tutorial\/#webpage\",\"url\":\"https:\/\/premiumcoding.com\/stylish-flash-countdown-reflection-tutorial\/\",\"name\":\"Stylish Flash Countdown with Reflection Tutorial - PremiumCoding\",\"isPartOf\":{\"@id\":\"https:\/\/premiumcoding.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/premiumcoding.com\/stylish-flash-countdown-reflection-tutorial\/#primaryimage\"},\"datePublished\":\"2011-08-02T13:43:18+00:00\",\"dateModified\":\"2017-08-31T06:28:28+00:00\",\"description\":\"Welcome to our first edition of Premium tutorials. We have decided to share the knowledge of how some of our files are made. In our first tutorial we will\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/premiumcoding.com\/stylish-flash-countdown-reflection-tutorial\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/premiumcoding.com\/stylish-flash-countdown-reflection-tutorial\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/premiumcoding.com\/stylish-flash-countdown-reflection-tutorial\/#webpage\"},\"author\":{\"@id\":\"https:\/\/premiumcoding.com\/#\/schema\/person\/e82e4a7d2166758ae7c30a69e651b04c\"},\"headline\":\"Stylish Flash Countdown with Reflection Tutorial\",\"datePublished\":\"2011-08-02T13:43:18+00:00\",\"dateModified\":\"2017-08-31T06:28:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/premiumcoding.com\/stylish-flash-countdown-reflection-tutorial\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/premiumcoding.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/premiumcoding.com\/stylish-flash-countdown-reflection-tutorial\/#primaryimage\"},\"keywords\":\"countdown psd,countdown tutorial,flash as3 tutorial,flash countdown source,flash countdown tutorial\",\"articleSection\":\"Tutorials\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/premiumcoding.com\/stylish-flash-countdown-reflection-tutorial\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/premiumcoding.com\/#\/schema\/person\/e82e4a7d2166758ae7c30a69e651b04c\",\"name\":\"Ales\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/premiumcoding.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a5b70a6c161b959988486ba65abb4653?s=96&d=wp_user_avatar&r=g\",\"caption\":\"Ales\"},\"sameAs\":[\"https:\/\/premiumcoding.com\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/posts\/1836"}],"collection":[{"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/comments?post=1836"}],"version-history":[{"count":0,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/posts\/1836\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/media\/1897"}],"wp:attachment":[{"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/media?parent=1836"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/categories?post=1836"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/tags?post=1836"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}