Guitar Chords

It's been awhile since I've participated in one of Articulate's weekly eLearning Challenges. But it's the end of the year and things always seem to slow down around this time. So with the extra time on hand, I figured I'd spend some time honing my skills.

The Challenge

The challenge this week was to use a dial to create an interactive infographic. So to start, I had to break it down. What exactly is an infographic? Info = information. Graphic = graphical representation or image. So basically, an infographic is a visual representation of information. Marketers use these all the time to share statistics. Infographics, while extremely effective, are often static images. But they do a great job at moving your eye across the image, pulling you into the pertinent information.

The Topic

Now that I narrowed down what was expected, I wanted to find a topic that interested me. I'd read an interesting article about Baby Boomers putting their homes up for sale over the next decade. But while this was interesting, it didn't pull me in enough to want to create a mini interaction on it. I mulled over the idea for a few days to think of something better. And then today as I went to pick up my guitar (ha, that still sounds funny), it hit me.

I started learning guitar exactly 7 days ago. Tuesday night to be exact. A few weeks ago we went to Israel. While there, we had a picnic with some friends we'd met there. Someone had brought a guitar, so we spent the afternoon eating amazing "Caucasian food" (which I later learned actually means East Asia - Armenia, Georgia, Azerbaijan, etc.) and singing songs together. I decided that afternoon I wanted to give the guitar another try. In elementary school I played the piano. In 5th grade I started playing the trumpet. In 9th grade I started playing the French Horn. And in High School I played the guitar for maybe 2 weeks. It hurt my fingers too bad and I couldn't stretch them out enough so I gave up. But now I've decided to give it another try.

I've been trying to learn a few simple chords, so I pulled out my iPad to play the ones I'd written down. I figured if I wrote them down (in my GoodNotes app, of course!), it'd help me to remember them better and visualize them. And then I thought, that's it! I'll do an infographic on guitar chords. Everyone's seen those posters with all the guitar chords, right? That's the perfect visual representation of information - where to place your fingers and on what frets to play specific notes.

Building It Out

First, I had to find an image. I thought about drawing out the lines and frets as in most books and posters you see. But then I thought, it would be nice to see it on an actual guitar. So I went to my trusty unsplash (I love them - they have great images for free). I did a quick search for "guitar" and found the perfect image. I was flat, straight on, and a simple background. I could rotate it and easily put the chords on there. I downloaded it and started building it out. But then...I only had four strings. The guitar I have has six, and all the chord charts I've seen have six lines. So...I don't know enough about guitars to know what's up with that yet, but I had to start all over again.

So I did another search and found an image that would work. It wasn't perfect, it had a person in it, but it was slanted, so I could actually get it a bit bigger on the screen, and the guy in the picture wasn't too big of an issue.

Now I needed to figure out what kind of dial to use. I thought it would be neat to make the dial a guitar pick. I'm not using a pick, and I think I read that they're actually not good to use on acoustic guitars, so if you're a guitar person, don't call me out for that! I still thought it was a cute idea. So for that I went to flaticon and searched "guitar pick." I quickly found one that would be perfect, so downloaded it as a png.

Setting Up the Storyline File

The first thing I did was set up my Storyline file. I wanted a landscape image, so I could get more of the fingerboard on the screen and zoom in on the frets. (Look at me and my guitar lingo - it sounds like I actually know what I'm talking about, huh?) To do this, I went to Design and then chose Story Size. I set the ratio to 720x405 (16:9) and hit OK.

What I should have done after that is gone to the Player and set up the Player Properties, but I always forget about that until I after I publish the course the first time around. But I'll put it here so it's in the correct order.

I wanted a nice clean look, so under the Player Properties Features tab, I turned everything off.

Then I went into the Other tab and set the Player size to "Scale player to fill browser window." I had a good quality image that I knew wouldn't look pixelated at large sizes, so knew this was a safe option, and it would make it easier to see information I wanted to display on the frets. If I had a smaller image or one that wasn't great quality, I would have set it to "Lock at optimal size," just so it wouldn't be blurry or look unprofessional.

Inserting the Image

Before I started building the dial, I wanted to get my image on the screen so I could place the dial in the right spot. I inserted the image, enlarged it so that I could easily see the frets, and then cropped it to fit the screen. It's a pet peeve of mine when designers enlarge images and don't crop them to fit the screen - it just looks sloppy when you go in there to make edits. And then it's hard to tell where exactly the screen is for when you put the other content on there.

Building the Dial

Now it was time to build the dial. This took me awhile because I wasn't exactly sure how to change the dial image. First, I chose the third dial option with the compass looking pointer, but when I tried changing the pointer to look like the guitar pick, it wasn't working. I then deleted that one and tried the second option, and that one worked. So here's how to do it:

  1. Under the Insert tab, choose Dial. Then select the second option, the one that has a circle pointer.

  2. I then placed the dial near the base of the fingerboard, in the bottom left corner. I wanted it in line with the guitar, so I rotated it a bit.

  3. Under the Dial Tools, click Format.

  4. Under Face Fill, choose Picture.

  5. Select the image you want to use as your dial pointer.

  6. Under Face Border, select No Outline.

  7. Under Pointer Fill, select No Fill.

  8. Under Pointer Border, select No Outline.

  9. Click the Design tab.

  10. I set the Start Value at 0.

  11. Since I have 6 chords to show, I set the End Value at 5 (with 0, 1, 2, 3, 4, and 5 I have 6 total values)

  12. I wanted the pick to point directly in the middle when the screen opens, so I set the Initial Value to 2.5 (that's half of 5 - puts it right in the middle).

  13. I set the Step Value to 0.5. When I put it to 1 and opened the preview, the dial didn't start in the middle. So because I have the Initial Value set to 2.5, I guess I need to have the Step Value set to 0.5 for it to hit that half mark.

Building the Layers

Now that I had my dial built, it was time to build my layers! I had 6 chords I wanted to display, and they were all basically the same, I worked the most of building out my first layer. I set the markers where I wanted them and got the formatting down of how I wanted it to look. Once I was happy with that, all I had to do was copy the layer six times and change the markers to each corresponding spot.

I also thought it would be a nice addition to have some audio play for each chord, so you could hear what it's supposed to sound like. So I did a quick search on Google for "guitar chord sounds" and found this neat little Virtual Guitar. But how would I get those audio files?

I remembered that a while back I'd purchased a screen recording software called Bandicam. A cool thing about Bandicam is that not only does it let you record your screen, but it also creates a separate audio file for whatever sounds the computer is making. So I turned that feature on and recorded each of the chords I needed. Then I loaded those files onto each layer.

Building the Triggers

Now it was time to build the triggers! This may sound intimidating, but it was actually the easiest part. The basic formula is:

Show layer _____ when the dial turns, if the dial is equal to _____.

So to show my first layer, for the C chord, it came out to:

Show layer C when the dial turns, if the dial is equal to 0.00 .

Now all I had to do was copy/paste the trigger, and swap out the layer names and step values. Since I didn't really care what order the chords showed up in, I just put them in the order I created them. I'm sure if I were more musically talented, I could come up with some theoretical reason as to why they should be put in a specific order, but I'm not there yet. So here's what I came up with:

Now everything was all built out. All I needed to do was add in a text prompt on the base layer (and hide it on the others) so the learner would know how to use the interaction. Then preview and test it to make sure everything worked correctly.

Here's the final product. Click the image to view the demo of this interaction.

I hope you enjoyed this tutorial! I'd love to hear how you've used dial interactions in your courses. Share your comments below!