{"id":635,"date":"2014-10-02T10:09:42","date_gmt":"2014-10-02T13:09:42","guid":{"rendered":"http:\/\/ashleychiasson.com\/blog\/?p=635"},"modified":"2014-10-02T10:12:04","modified_gmt":"2014-10-02T13:12:04","slug":"e-learning-challenge-52-using-interactive-sliders-in-e-learning","status":"publish","type":"post","link":"https:\/\/ashleychiasson.com\/blog\/e-learning-challenge-52-using-interactive-sliders-in-e-learning\/","title":{"rendered":"E-Learning Challenge #52 – Using Interactive Sliders in E-Learning"},"content":{"rendered":"

This week’s challenge<\/a> is a fun one! Storyline 2 offers the ability to easily create slider interactions, a feat which was previously completed by using states….and LOTS of ’em! Think hundreds (depending on what you’re trying to accomplish). Now, you can create sliders with a few clicks of some buttons – presto, tada!<\/p>\n

I was also excited to jump on the bandwagon this week, because last week I started something and didn’t finish…and it’s always nice to sneak in right before the recap is posted – I like living on the edge!<\/p>\n

The Concept<\/strong><\/p>\n

Use interactive sliders to\u00a0focus on functionality and\/or design. For this challenge, I chose to focus on both. I wanted to illustrate how you could use sliders to create an interactive website mockup – fun and practical (for some)! You could take my colour customization approach to another level and use states to incorporate different layout options – that would be cool!<\/p>\n

The Method<\/strong><\/p>\n

I thought up how I might want to work with the sliders to make my imagined design come to life, so I first created a little mock up website layout. Then, I pulled some elements from the mock up (background colour, title text colour, and body element colours) to and made some quick colour palettes – some, when combined, are more appealing than others (…basically the default looks the best – don’t hate).<\/p>\n

Once I decided how I was going to roll this all out, I created my sliders. I created one slider for each element, created a four colour-way palette for each element, and then created four states (well – three, because one was normal) for each element, one for each colour. Then, I set the sliders to show each state when the user drags the slider to a certain point, using triggers to change the states.<\/p>\n

After it was all said and done, I added a little intro slide, customized the player, and the rest is history!<\/p>\n

The Result<\/strong><\/p>\n

\"Screen<\/a><\/p>\n

Click here<\/a> to view the full, interactive demo!<\/p>\n

Click here<\/a> to download the source file to learn how you too can create a comparable interaction!<\/p>\n","protected":false},"excerpt":{"rendered":"

This week’s challenge is a fun one! Storyline 2 offers the ability to easily create slider interactions, a feat which was previously completed by using states….and LOTS of ’em! Think hundreds (depending on what you’re trying to accomplish). Now, you can create sliders with a few clicks of some buttons – presto, tada! I was […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","jetpack_post_was_ever_published":false,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[3],"tags":[10],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p4s3cq-af","_links":{"self":[{"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/posts\/635"}],"collection":[{"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/comments?post=635"}],"version-history":[{"count":2,"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/posts\/635\/revisions"}],"predecessor-version":[{"id":638,"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/posts\/635\/revisions\/638"}],"wp:attachment":[{"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/media?parent=635"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/categories?post=635"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ashleychiasson.com\/blog\/wp-json\/wp\/v2\/tags?post=635"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}