Page 1 of 2 (32 items)

 

How would you create this in Articulate?

Holly MacDonald

303 posts

Posted Thursday, January 12, 2012 at 9:21 AM  

I've been gathering design thoughts and inspirations in Evernote and wondered if this http://www.napp.org.uk/ was doable in Articulate Studio.

 

On the page, the images that you see at the top slide from right to left to reveal a new image when you click on the words/label and I think this is a neat way to think about navigation or do an interaction. I tweeted the question and Jeannette suggested that I post it in the forum. 

 

Anyone done this before/think they have an answer to how to do it? Thanks community!

Holly

 

 

 


All Replies

Jeanette Brooks

3,630 posts

Posted Thursday, January 12, 2012 at 1:16 PM  

Hey Holly! That's a nice site! You could create something *kinda* similar in Articulate Presenter... here's a super-simple mockup that I threw together quickly.

 

There are a couple challenges with a vertical sliding menu like this... one is the fluidity and "smoothing" effect that you see in the website example - where the  vertical menu bars slide into place from one side or another, and they kind of slow down before they stop moving. Unfortunately that slow-down isn't possible to replicate in content that you publish from PowerPoint to Presenter.

 

Another challenge is the direction of the sliding motion. There isn't really a way in PowerPoint/Preseneter to predict which slide a user will be coming from when they arrive at any particular slide - which means you can't really apply intelligence that tells the animation which direction to start from. (Wow that sentence was really a grammatic mess, lol!)

 

So, those are the reasons why in my mockup I just used a fade animation on each of the content slides. It's not horrible, but it's not as slick as the example you posted.

 


Posted Thursday, January 12, 2012 at 4:46 PM  

Hi Jeannette,

 

Was just looking for ideas to freshen up some process learning and found this... I am in Australia so it is already Friday the 13th here, so a very auspicious and lucky day for me...haha... I digress...That is really neat - will you be doing a quick screenr for this or could I just get instructions?

 

Thanks as always


Gina Hoekstra

93 posts

Posted Thursday, January 12, 2012 at 7:06 PM  

I am working on it. I am SO CLOSE!!! I got all the sliding functions out to work, except for having them move together if you press the second or third tab instead of doing it in order. Hopefully I can figure it out. If not, I will post what I have and maybe someone else can figure the rest out.


Gina Hoekstra

93 posts

Posted Thursday, January 12, 2012 at 9:49 PM  

OK, so after trial and error....here are my findings. I don't know about the recreation to Articulate specifically...but using simply PowerPoint functions (which I think translate smoothly to Articulate although I have not had the great honor of being able to purchase it yet...working on that), I was able to get another *sort of idea working.

 

As Jeanette says...you cannot anticipate which one the user will click on, so I had to make each one react as it would whether it was the first second or third piece to be clicked. With that in mind, I had to duplicate the sliding options. Here is the link to the video of it working (I don't have articulate so I cannot reproduce it in a presenter method.

 

http://www.youtube.com/watch?v=eXrhKQ0mHvw

 

Sorry about the watermarking on it. I am working on my stinky home laptop which is in a tremendous need of a format c: and reinstall!!! I had to use a freebie converter to get the video to work because I coudln't get screenr to work on my home computer. blah!


Jeanette Brooks

3,630 posts

Posted Friday, January 13, 2012 at 2:35 AM  

Looks really nice, Gina - thanks for sharing that!!

 

One of the challenges with using PowerPoint triggers is that although they're a great tool to use in PowerPoint presentations, they're not preserved when you publish the content to Flash with Articulate Presenter, as PowerPoint triggers are not a supported effect. A workaround is to simulate a trigger-like experience by creating separate slides, which are invoked by hyperlinks... that's the method I used in the mockup I posted, and it sort of works okay, but as you mentioned, there's still that pesky problem of not being able to build in "intelligence" that allows PowerPoint to know which slide the user is coming from when they arrive at a new slide. It's an interesting challenge, for sure! When Articulate Storyline launches, there will be new ways of tackling challenges like this... Storyline includes the ability to construct logic via variables, so effects like these become much more feasible.

 

@Katherine - happy to share the file & will do a screenr a little later & post it here.


User Rank Mike Taylor

882 posts

Posted Friday, January 13, 2012 at 5:40 AM  

I think this is doable but as Jeannette mentioned you'll need a whole bunch of slides and branching logic since you'll need to account for every possible combination/order of how they click each option.

 

Here is my quick & dirty take on it.   http://t.co/tuUl1CCr


Jeanette Brooks

3,630 posts

Posted Friday, January 13, 2012 at 6:21 AM  

Nice, Mike! Thanks for posting! Yeah the prospect of creating the "intelligent" sliding direction is kind of a bugaboo, isn't it!


User Rank Mike Taylor

882 posts

Posted Friday, January 13, 2012 at 6:24 AM  

Maybe a good project to play with in Storyline on a cold, snowy midwestern day? 8-)


User Rank Natalia Mueller

696 posts

Posted Friday, January 13, 2012 at 9:54 AM  

I saw something similar to that by following a trail someone started in the community once. It took me here

 http://www.iceltd.ca/   The site menu slides, but only in one direction.

and I put this on my list of things to replicate in PPT. It's right along the lines of what Mike threw together. I think it captures the same overall feel and cuts out that need for logic.  


Holly MacDonald

303 posts

Posted Friday, January 13, 2012 at 11:16 AM  

 

Mike Taylor said:

Maybe a good project to play with in Storyline on a cold, snowy midwestern day? 8-)



Or a cool west coast day!

 

Thanks Mike, it is so appreciated. I just love this community's willingness to share and collaborate.

 


Holly MacDonald

303 posts

Posted Friday, January 13, 2012 at 11:17 AM  

 

Natalia Spurgin said:

I saw something similar to that by following a trail someone started in the community once. It took me here

 http://www.iceltd.ca/   The site menu slides, but only in one direction.

and I put this on my list of things to replicate in PPT. It's right along the lines of what Mike threw together. I think it captures the same overall feel and cuts out that need for logic.  



Stephanie does haz some mad skills, doesn't she? Thanks for pointing that one out too, Natalia.

 


Gina Hoekstra

93 posts

Posted Friday, January 13, 2012 at 11:26 AM  

Thanks for all the information! I can't wait to get Articulate (hopefully in the next couple of weeks) and start learning how to balance all these. I use Captivate right now, so when I built that demonstration, I had Captivate skills in mind since I can do that functionality with that software. I am sure it will be a learning curve for me to balance between the two programs.


User Rank Natalia Mueller

696 posts

Posted Friday, January 13, 2012 at 11:42 AM  

Heck ya. Stephanie's work inspires me on a daily basis. 

Gina, I have no doubt you'll be an Articulate rock star. There just aren't that many things in ppt that don't carry over and many that do have a  work-around 


User Rank Natalia Mueller

696 posts

Posted Friday, January 13, 2012 at 12:37 PM  

Alright- I made a quick one. This is NOT identical. It's more taking the idea and seeing how I could use it in a course. There are definitely more things that would need to be taken into consideration once all of the links are added, but I still like the general effect. 

 

Thanks for starting this thread, Holly!

 

 

Sliding Menu


Holly MacDonald

303 posts

Posted Friday, January 13, 2012 at 12:57 PM  

 

Natalia Spurgin said:

Alright- I made a quick one. This is NOT identical. It's more taking the idea and seeing how I could use it in a course. There are definitely more things that would need to be taken into consideration once all of the links are added, but I still like the general effect. 

 

Thanks for starting this thread, Holly!

 

 

Sliding Menu



Cool, thanks for sharing your sample for this - I like it!

Glad to offer a little design challenge, I think it is such a good way to build up design portfolio ideas and very thankful to have a range of samples to draw upon too.

 

You guys rock! 

 


Jeanette Brooks

3,630 posts

Posted Monday, January 16, 2012 at 7:11 AM  

 

For Katherine & any others who wanted more details on how to make something similar to the mockup I posted earlier, here's the source file and here's a screencast that shows the gist of it:

 

 

<iframe src="http://www.screenr.com/embed/t7es" width="550" height="335" frameborder="0"></iframe>

 

 


Posted Monday, January 16, 2012 at 9:01 AM  

I know that someone in the Articulate community did this effect a year or two ago on his blog, will have to go thru my stuff and see if I can find the link.  I can picture his face, but his name escapes me.

 

Linda


Jeanette Brooks

3,630 posts

Posted Monday, January 16, 2012 at 12:04 PM  

Ooh, good find, Linda! I'd forgotten about that one. Sasha does amazing work. Thanks for posting!


Kristin Savko

222 posts

Posted Monday, January 16, 2012 at 12:22 PM  

Thanks everyone for posting! I've been trying to design more interactions just like this lately! Very helpful!!


Eric Bybee

33 posts

Posted Monday, January 16, 2012 at 1:13 PM  

This is a very neat idea.  It got me thinking about a project I have coming up which requires about four pages (SECTIONS) of data to read but there is no need for audio.  So I took what I saw here and starting tinkering.  I was going to try and post the module, but honestly I have never done that so I have no idea of how to put it here so folks can see it.  Anyway, thanks for finding the site Holly, yet another very useful topic.


Eric Bybee

33 posts

Posted Monday, January 16, 2012 at 1:32 PM  

I forgot I have Dropbox, so here is the link.  http://dl.dropbox.com/u/29969882/Sliding%20Presentation%20Test/player.html

I do not have PPT 2010 so I was not able to clean up the edges where the colored rectangle and square meet.  This was a fun quick project that taught me a few new tricks.  Thanks to everyone.


Holly MacDonald

303 posts

Posted Tuesday, January 17, 2012 at 4:54 PM  

Wow, this style must be "in" with web developers - here's another great one I found with the vertical sliders, it has a few additional elements for those who are more advanced: http://www.alumni.hbs.edu/careers/pitch/. Kind of ties the other question I asked about cumulative input to this: http://community.articulate.com/forums/t/8556.aspx 

 

Love all the samples, templates, shares, etc. Such a fab community to be a part of, really appreciate the effort of all involved. 


Posted Tuesday, January 17, 2012 at 5:39 PM  

Thank you Jeanette - I am going to play around with the template and see what I can come up with. A really great thread!


Posted Tuesday, January 17, 2012 at 11:32 PM  

The sliders are very, I am in the process of thinking up some new navigation slide templates for our internal elearning templates and this is a very nice one! I was also thinking about setting up a Windows8 Tablet kind of navigation: http://content.hwigroup.net/images/articles/Windows8dev1.png

 

Has anyone ever made something like this?


Posted Wednesday, January 18, 2012 at 12:15 AM  

Here's my first "quick" attempt at the Windows8 tablet style navigation. Colors could vary and Icons could make this nicer design wise but not that bad I think.


Template.pptx

Page 1 of 2 (32 items)