Challenge #1: BBC\u00a0iPlayer<\/h3>\n![\"\"](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/01\/12AXz38-lQ5XBTYHmfvwOvNdQ.gif?w=900\")
BBC iPlayer Radio iOS app?\u2014?home\u00a0screen<\/figcaption><\/figure>\nBackground:
<\/strong>The BBC iPlayer Radio app<\/a> is one of my most used apps. The home screen has a great spinning wheel to scroll through 20 BBC stations.<\/pre>\n?? Goal<\/strong>: Understand how to animate content on a circle using Origami's Cartesian coordinate system
? Focus: <\/strong>Recreate the spinning station selector wheel
? Time taken<\/strong>: 5 hours
? Tool<\/strong>: Origami Studio
?<\/strong> Files: <\/strong>Origami studio, Sketch and source files are available in this Dropbox folder<\/a><\/pre>\n![\"\"](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/01\/12AnC93jJzcxJCTUaiCTfgdpg.png?w=900\")
<\/figure>\n[ Step 1 ] Decide What to Make, and What to\u00a0Fake<\/h3>\n
For this Medium series, I will try to only prototype things I can learn from. Here\u2019s my make\/fake list:<\/p>\n
Make<\/h4>\n\n- Scroll wheel of\u00a0icons<\/li>\n
- Hero image and text info for the selected\u00a0station<\/li>\n<\/ul>\n
Fake<\/h4>\n\n- Menu bar<\/li>\n
- Listen now\u00a0bar<\/li>\n
- Currently listening bar<\/li>\n<\/ul>\n
The elements to make<\/em> are displayed in red, the rest (black) will be\u00a0faked<\/em>:<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/01\/12Aj3N7JPAvpX7vJvr984_g8A.jpeg?w=900\")
Elements to prototype in\u00a0red<\/figcaption><\/figure>\n[ Step 2 ] Creating a Basic Interface in\u00a0Sketch<\/h3>\nDevice<\/h4>\n
For this prototype I will be designing for iPhone 8 only. Future challenges will use auto-layout style logic<\/em> to be responsive, but not\u00a0today.<\/p>\nThought Process<\/h4>\n
First, make sure I\u2019m not reinventing the\u00a0wheel:<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/01\/12AQGYLjabz8pMWvDa6h1K8DQ.png?w=900\")
Worth a\u00a0try.<\/figcaption><\/figure>\nIt\u2019s a pretty simple design, but I will still use screenshots where possible to save time. Designing straight in Origami is ok, but Sketch is still far easier and copying from Sketch to Origami works\u00a0great.<\/p>\n
After 20 minutes I had created a sketch file for the app. There\u2019s just one radio station icon, as I will be duplicating these in Origami. If I have time, I\u2019ll create icons for each station, but for now we will be heavily promoting Radio\u00a01.<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/01\/12AFYZRdyy-gZi7Id5tcoaXzQ.png?w=900\")
Design of the app in\u00a0Sketch<\/figcaption><\/figure>\n[ Step 3 ] Importing into\u00a0Origami<\/h3>\n
Copy and pasting the Sketch artboard almost worked perfectly. Sadly the spinner\u2019s background oval (with a grey gradient) didn\u2019t come across correctly. This was pretty simple to make in\u00a0Origami:<\/p>\n
\n- Create an oval\u00a0<\/em>layer<\/li>\n
- Set it as a\u00a0mask<\/li>\n
- Apply the mask to a fill<\/em> layer which has a\u00a0gradient<\/li>\n<\/ul>\n
If I go over 5 hours by those 2 minutes, it\u2019s not my\u00a0fault.<\/p>\n
[ Step 4 ] The\u00a0Spinner<\/h3>\n
I setup a loop builder<\/em> of 20 station icons (all using the Radio 1 icon for now). Positioning this looped content with staggered Cartesian coordinates, such as Icon 1 at (0,0), Icon 2 at (10,0), would be easy in Origami?\u2014?however these icons are positioned in a\u00a0circle.<\/p>\nPoint on a circle\u2019s perimeter to Cartesian coordinates<\/h4>\n
I needed to use trigonometry to calculate the Cartesian coordinates for a point on the perimeter of my spinner\u00a0circle.<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/01\/12A2-UdzNEV39k4q9J-ZlY2tA.jpeg?w=900\")
I need to calculate x and y to position my\u00a0icons<\/figcaption><\/figure>\nThe following simple equations will do the\u00a0job:<\/p>\n
x = cos(?)*r + x0
y = sin(?)*r + y0<\/pre>\nWhere ? is angle around the circle,
r is circle radius,
(x0,y0) is the origin point if it's offset from (0,0).
This will help: https:\/\/en.wikipedia.org\/wiki\/Unit_circle<\/a><\/pre>\nMake it\u00a0spin<\/h4>\n
I have the radius of the spinner, so I just need an angle for each of the 20 stations. They\u2019re equally spaced around the peremiter, so ? = (360 \/ 20 * loop\u00a0index).<\/em><\/p>\n![\"\"](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/01\/12APAWddivDFp6P6Ki29uEsdw.png?w=900\")
A spinner of\u00a0icons!<\/figcaption><\/figure>\nOk, so now the spinner needs to spin, or in other words the icon angles need to be offset. My first attempt was to put the icons in a group and horizontally scroll that group. The scroll x value would then be added onto my original loop of angles at the start of the trig calculations:<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/01\/12A8tFvp6bht8xm8KBgH1OC8Q.gif?w=900\")
The spinner is spinning! (Using a scroll\u00a0group)<\/figcaption><\/figure>\nThis was one of those short lived moments of celebration. It quickly dawned on me I\u2019d taken one step forward on my to-do list, but added another 10 on to the end of\u00a0it\u2026<\/p>\n
Adding paging<\/h4>\n
The scroll needs to be paged, so it actually stops moving when an icon is perfectly aligned in the top centre position. Right now it aggressively scrolls back to the original Radio\u00a01.<\/p>\n
At this point I got stuck, very stuck. I wasted nearly an hour trying to make the scroll<\/em> patch flow nicely, only to realise it could only ever move one page at a time, no matter how far I moved the spinner round. This is a limitation of the scroll<\/em> patch. (e.g. a quick spin to the right from icon 1 to 10 would just jump back to icon 2\u00a0?).<\/p>\nChange of plan?\u2014?Use the drag<\/em> patch with rounding
<\/strong>In the end I used the much simpler drag<\/em> patch. This was great, but the patch offers no paging. I needed to round the drag<\/em> position output to the nearest page size (my page = 360 \/ 20 = 18). I now have smooth, paged circular\u00a0spinner!<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/01\/12AEeh_AXGbGPqTSrXmxA4H6A.png?w=900\")
Patches used to convert dragging the spinner group into an angle offset. Pop animation<\/em> smoothes the rounding.<\/figcaption><\/figure>\n[ Step 5 ] Real data\u00a0loops<\/h3>\n
I was getting a bit tired of only listening to Radio 1. Despite being conscious to only focus on the unique challenges (looping images certainly isn\u2019t one), it was becoming difficult to test how well the spinner was working when all the icons were identical.<\/p>\n
Luckily the BBC website had all the hero images and SVG icons on one page: http:\/\/www.bbc.co.uk\/radio#stations<\/a> ?<\/p>\nThe decision instantly paid off, too. I noticed that my trigonometry positioned station #1 at 3 o\u2019clock on my spinner, instead of 12 o\u2019clock. Surprisingly I didn\u2019t notice this with 20 identical icons.<\/p>\n
A working\u00a0version<\/h4>\n
Below is a screenshot from the end of day 2, a working spinner with real icons. The hero image horizontal scroller is present, but not hooked up to move just\u00a0yet.<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/01\/12AeA8tmc05AKJ2iP60_mSKrw.png?w=900\")
End of day 2. A correctly aligned spinner, with the full set of stations.<\/figcaption><\/figure>\n[ Step 6 ]?\u2014?Determine the Selected\u00a0Station<\/h3>\n
To update the hero image and the station info text, I needed to know which station the user selected, aka which icon was at the top of the spinner, aka which icon was in position = (0,\u00a0-247).<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/01\/12ASJ5cLiUjIxrOF7drTK7xHQ.png?w=900\")
3 patches to determine current\u00a0station<\/figcaption><\/figure>\n[ Step 7 ] Animate Data Based on Selected\u00a0Station<\/h3>\n
With this new knowledge I can animate the hero image scroll<\/em> patch to \u2018jump to\u2019 the correct position when the selected station changes. I also linked the selected station loop to an opacity transition for my station info\u00a0text.<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/01\/12Ar3H7AjUrn1TYcFIY9RAgfw.gif?w=900\")
Patches to change hero and station info text when spinner\u00a0moves<\/figcaption><\/figure>\n[ Step 8 ] Little Visual\u00a0Touches<\/h3>\n
I had 15 minutes left, so I decided to pick two small items from my task\u00a0list:<\/p>\n
\n- Grow the selected station\u00a0icon.<\/li>\n
- Desaturate de-selected station\u00a0icons.<\/li>\n<\/ul>\n
Making the icon grow was simple: attach the \u2018selected station\u2019 loop to a pop animation<\/em> and transition<\/em>?\u2014?which were then linked to the icon scale<\/em>\u00a0value.<\/p>\nChanging image saturation isn\u2019t supported in Origami, however you can use a blur component to desaturate anything in the same\u00a0group.<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/01\/12AFX1cORXBn80jGh91pOJMrw.png?w=900\")
<\/figure>\n5 hours is up!\u00a0??<\/h3>\n
The gif below shows the prototype is pretty much done if you use the spinner to choose station, however the hero can still be scrolled independently of the\u00a0spinner.<\/p>\n![\"\"](\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2018\/01\/12AKCIuxXYZGUuqcr9levS9Sw.gif?w=900\")
Done! 4hr\u00a053min<\/figcaption><\/figure>\nI did try to start work on syncing the spinner drag<\/em> and hero scroll<\/em>, I even created my own modified drag<\/em> patch with a \u2018jump to\u2019 feature. Unfortunately there was too much of a recursive relationship between spinner and hero in my initial logic, so a full refactor would be needed (aka no longer a simple, lean prototype).<\/p>\nFortunately swiping a hero carousel is quite a common interaction (unlike the spinner), so for user testing sake I think this prototype would be sufficient. I would just keep an eye for users trying to swipe the hero to see if it\u2019s even worth adding in development.<\/p>\n
If I had one more hour\u2026\u00a0?<\/h3>\n
I\u2019m pretty happy with the limitations of this prototype, however I would love to work out how to sync the scrolling hero with the spinner?\u2014?for my own learning.<\/p>\n
Oh and I would tidy up (and speed up) the Origami Studio file with grouped components. Luckily the performance was fine for this prototype.<\/p>\n
Lessons learnt\u00a0?<\/h3>\n\n- See if the drag<\/em> patch can help with a difficult scroll<\/em> patch problem, before wasting an\u00a0hour.<\/li>\n
- Limit the amount of fields using looped data, but use full<\/strong> datasets for those fields right from the\u00a0start.<\/li>\n<\/ul>\n
Files ?:<\/strong> If you would like to open up and explore the Origami Studio file, all the files are in a Dropbox folder<\/a>. Why not see if you can crack the synced hero and spinner problem\u00a0?<\/p>\nThank you ?:<\/strong> As always, to the Origami Community<\/a> for help on tricky problems. In particular Peter Ryan Zich who helped a lot with the scroll\/drag patch issue and Ryan Yoshinobu Barkataki who suggested the desaturation solution.<\/p>\nhttps:\/\/medium.com\/media\/b85dfbb5286d8a25cf2e754b9462cf45\/href<\/a>![](\"https:\/\/medium.com\/_\/stat?event=post.clientViewed&referrerSource=full_rss&postId=c7c6702c12e6\")
<\/p>\n
\n5 hour Prototype Challenge: BBC iPlayer Radio app using Origami Studio<\/a> was originally published in Prototypr<\/a> on Medium, where people are continuing the conversation by highlighting and responding to this story.<\/p>\nPowered by WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"5 hour Prototype Challenge: BBC iPlayer Radio App using Origami\u00a0Studio Focus area: the station selector\u00a0wheel In this series for Prototypr I will be prototyping interesting interactions from my favourite apps and some client projects, using Origami Studio. I will be focussing on one unique, challenging concept in each app, to increase my knowledge of the… Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":43585,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[15],"tags":[],"class_list":["post-43584","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general-info"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t
Background:
<\/strong>The BBC iPlayer Radio app<\/a> is one of my most used apps. The home screen has a great spinning wheel to scroll through 20 BBC stations.<\/pre>\n?? Goal<\/strong>: Understand how to animate content on a circle using Origami's Cartesian coordinate system
? Focus: <\/strong>Recreate the spinning station selector wheel
? Time taken<\/strong>: 5 hours
? Tool<\/strong>: Origami Studio
?<\/strong> Files: <\/strong>Origami studio, Sketch and source files are available in this Dropbox folder<\/a><\/pre>\n[ Step 1 ] Decide What to Make, and What to\u00a0Fake<\/h3>\n
For this Medium series, I will try to only prototype things I can learn from. Here\u2019s my make\/fake list:<\/p>\n
Make<\/h4>\n
\n
- Scroll wheel of\u00a0icons<\/li>\n
- Hero image and text info for the selected\u00a0station<\/li>\n<\/ul>\n
Fake<\/h4>\n
\n
- Menu bar<\/li>\n
- Listen now\u00a0bar<\/li>\n
- Currently listening bar<\/li>\n<\/ul>\n
The elements to make<\/em> are displayed in red, the rest (black) will be\u00a0faked<\/em>:<\/p>\n
Elements to prototype in\u00a0red<\/figcaption><\/figure>\n [ Step 2 ] Creating a Basic Interface in\u00a0Sketch<\/h3>\n
Device<\/h4>\n
For this prototype I will be designing for iPhone 8 only. Future challenges will use auto-layout style logic<\/em> to be responsive, but not\u00a0today.<\/p>\n
Thought Process<\/h4>\n
First, make sure I\u2019m not reinventing the\u00a0wheel:<\/p>\n
Worth a\u00a0try.<\/figcaption><\/figure>\n It\u2019s a pretty simple design, but I will still use screenshots where possible to save time. Designing straight in Origami is ok, but Sketch is still far easier and copying from Sketch to Origami works\u00a0great.<\/p>\n
After 20 minutes I had created a sketch file for the app. There\u2019s just one radio station icon, as I will be duplicating these in Origami. If I have time, I\u2019ll create icons for each station, but for now we will be heavily promoting Radio\u00a01.<\/p>\n
Design of the app in\u00a0Sketch<\/figcaption><\/figure>\n [ Step 3 ] Importing into\u00a0Origami<\/h3>\n
Copy and pasting the Sketch artboard almost worked perfectly. Sadly the spinner\u2019s background oval (with a grey gradient) didn\u2019t come across correctly. This was pretty simple to make in\u00a0Origami:<\/p>\n
\n
- Create an oval\u00a0<\/em>layer<\/li>\n
- Set it as a\u00a0mask<\/li>\n
- Apply the mask to a fill<\/em> layer which has a\u00a0gradient<\/li>\n<\/ul>\n
If I go over 5 hours by those 2 minutes, it\u2019s not my\u00a0fault.<\/p>\n
[ Step 4 ] The\u00a0Spinner<\/h3>\n
I setup a loop builder<\/em> of 20 station icons (all using the Radio 1 icon for now). Positioning this looped content with staggered Cartesian coordinates, such as Icon 1 at (0,0), Icon 2 at (10,0), would be easy in Origami?\u2014?however these icons are positioned in a\u00a0circle.<\/p>\n
Point on a circle\u2019s perimeter to Cartesian coordinates<\/h4>\n
I needed to use trigonometry to calculate the Cartesian coordinates for a point on the perimeter of my spinner\u00a0circle.<\/p>\n
I need to calculate x and y to position my\u00a0icons<\/figcaption><\/figure>\n The following simple equations will do the\u00a0job:<\/p>\n
x = cos(?)*r + x0
y = sin(?)*r + y0<\/pre>\nWhere ? is angle around the circle,
r is circle radius,
(x0,y0) is the origin point if it's offset from (0,0).
This will help: https:\/\/en.wikipedia.org\/wiki\/Unit_circle<\/a><\/pre>\nMake it\u00a0spin<\/h4>\n
I have the radius of the spinner, so I just need an angle for each of the 20 stations. They\u2019re equally spaced around the peremiter, so ? = (360 \/ 20 * loop\u00a0index).<\/em><\/p>\n
A spinner of\u00a0icons!<\/figcaption><\/figure>\n Ok, so now the spinner needs to spin, or in other words the icon angles need to be offset. My first attempt was to put the icons in a group and horizontally scroll that group. The scroll x value would then be added onto my original loop of angles at the start of the trig calculations:<\/p>\n
The spinner is spinning! (Using a scroll\u00a0group)<\/figcaption><\/figure>\n This was one of those short lived moments of celebration. It quickly dawned on me I\u2019d taken one step forward on my to-do list, but added another 10 on to the end of\u00a0it\u2026<\/p>\n
Adding paging<\/h4>\n
The scroll needs to be paged, so it actually stops moving when an icon is perfectly aligned in the top centre position. Right now it aggressively scrolls back to the original Radio\u00a01.<\/p>\n
At this point I got stuck, very stuck. I wasted nearly an hour trying to make the scroll<\/em> patch flow nicely, only to realise it could only ever move one page at a time, no matter how far I moved the spinner round. This is a limitation of the scroll<\/em> patch. (e.g. a quick spin to the right from icon 1 to 10 would just jump back to icon 2\u00a0?).<\/p>\n
Change of plan?\u2014?Use the drag<\/em> patch with rounding
<\/strong>In the end I used the much simpler drag<\/em> patch. This was great, but the patch offers no paging. I needed to round the drag<\/em> position output to the nearest page size (my page = 360 \/ 20 = 18). I now have smooth, paged circular\u00a0spinner!<\/p>\nPatches used to convert dragging the spinner group into an angle offset. Pop animation<\/em> smoothes the rounding.<\/figcaption><\/figure>\n [ Step 5 ] Real data\u00a0loops<\/h3>\n
I was getting a bit tired of only listening to Radio 1. Despite being conscious to only focus on the unique challenges (looping images certainly isn\u2019t one), it was becoming difficult to test how well the spinner was working when all the icons were identical.<\/p>\n
Luckily the BBC website had all the hero images and SVG icons on one page: http:\/\/www.bbc.co.uk\/radio#stations<\/a> ?<\/p>\n
The decision instantly paid off, too. I noticed that my trigonometry positioned station #1 at 3 o\u2019clock on my spinner, instead of 12 o\u2019clock. Surprisingly I didn\u2019t notice this with 20 identical icons.<\/p>\n
A working\u00a0version<\/h4>\n
Below is a screenshot from the end of day 2, a working spinner with real icons. The hero image horizontal scroller is present, but not hooked up to move just\u00a0yet.<\/p>\n
End of day 2. A correctly aligned spinner, with the full set of stations.<\/figcaption><\/figure>\n [ Step 6 ]?\u2014?Determine the Selected\u00a0Station<\/h3>\n
To update the hero image and the station info text, I needed to know which station the user selected, aka which icon was at the top of the spinner, aka which icon was in position = (0,\u00a0-247).<\/p>\n
3 patches to determine current\u00a0station<\/figcaption><\/figure>\n [ Step 7 ] Animate Data Based on Selected\u00a0Station<\/h3>\n
With this new knowledge I can animate the hero image scroll<\/em> patch to \u2018jump to\u2019 the correct position when the selected station changes. I also linked the selected station loop to an opacity transition for my station info\u00a0text.<\/p>\n
Patches to change hero and station info text when spinner\u00a0moves<\/figcaption><\/figure>\n [ Step 8 ] Little Visual\u00a0Touches<\/h3>\n
I had 15 minutes left, so I decided to pick two small items from my task\u00a0list:<\/p>\n
\n
- Grow the selected station\u00a0icon.<\/li>\n
- Desaturate de-selected station\u00a0icons.<\/li>\n<\/ul>\n
Making the icon grow was simple: attach the \u2018selected station\u2019 loop to a pop animation<\/em> and transition<\/em>?\u2014?which were then linked to the icon scale<\/em>\u00a0value.<\/p>\n
Changing image saturation isn\u2019t supported in Origami, however you can use a blur component to desaturate anything in the same\u00a0group.<\/p>\n
5 hours is up!\u00a0??<\/h3>\n
The gif below shows the prototype is pretty much done if you use the spinner to choose station, however the hero can still be scrolled independently of the\u00a0spinner.<\/p>\n
Done! 4hr\u00a053min<\/figcaption><\/figure>\n I did try to start work on syncing the spinner drag<\/em> and hero scroll<\/em>, I even created my own modified drag<\/em> patch with a \u2018jump to\u2019 feature. Unfortunately there was too much of a recursive relationship between spinner and hero in my initial logic, so a full refactor would be needed (aka no longer a simple, lean prototype).<\/p>\n
Fortunately swiping a hero carousel is quite a common interaction (unlike the spinner), so for user testing sake I think this prototype would be sufficient. I would just keep an eye for users trying to swipe the hero to see if it\u2019s even worth adding in development.<\/p>\n
If I had one more hour\u2026\u00a0?<\/h3>\n
I\u2019m pretty happy with the limitations of this prototype, however I would love to work out how to sync the scrolling hero with the spinner?\u2014?for my own learning.<\/p>\n
Oh and I would tidy up (and speed up) the Origami Studio file with grouped components. Luckily the performance was fine for this prototype.<\/p>\n
Lessons learnt\u00a0?<\/h3>\n
\n
- See if the drag<\/em> patch can help with a difficult scroll<\/em> patch problem, before wasting an\u00a0hour.<\/li>\n
- Limit the amount of fields using looped data, but use full<\/strong> datasets for those fields right from the\u00a0start.<\/li>\n<\/ul>\n
Files ?:<\/strong> If you would like to open up and explore the Origami Studio file, all the files are in a Dropbox folder<\/a>. Why not see if you can crack the synced hero and spinner problem\u00a0?<\/p>\n
Thank you ?:<\/strong> As always, to the Origami Community<\/a> for help on tricky problems. In particular Peter Ryan Zich who helped a lot with the scroll\/drag patch issue and Ryan Yoshinobu Barkataki who suggested the desaturation solution.<\/p>\n
https:\/\/medium.com\/media\/b85dfbb5286d8a25cf2e754b9462cf45\/href<\/a>
\n5 hour Prototype Challenge: BBC iPlayer Radio app using Origami Studio<\/a> was originally published in Prototypr<\/a> on Medium, where people are continuing the conversation by highlighting and responding to this story.<\/p>\n
Powered by WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"
5 hour Prototype Challenge: BBC iPlayer Radio App using Origami\u00a0Studio Focus area: the station selector\u00a0wheel In this series for Prototypr I will be prototyping interesting interactions from my favourite apps and some client projects, using Origami Studio. I will be focussing on one unique, challenging concept in each app, to increase my knowledge of the… Read the full article…<\/a><\/p>\n","protected":false},"author":4,"featured_media":43585,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[15],"tags":[],"class_list":["post-43584","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-general-info"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t