How would you create this in Articulate?

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

31 Replies
Jeanette Brooks

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.

Gina Hoekstra

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

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.

Holly MacDonald

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

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.

Holly MacDonald

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! 

Eric Bybee

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.