Project Completed

April 6, 2011

After the entire workshop term, Now You Know is finally up and fully functioning. A lot of work went into creating this project, it drew on my visual, technical and conceptual skills.

Feel free to see the finished product for yourself at:

http://www.mikefafalios.com/motion/nowyouknow

Advertisements

Process Review

April 6, 2011

With the Workshop project coming to an end I thought it would be beneficial to reflect on the process. The idea for my project initially stemmed from thinking of different ways to visually represent and communicate information. Infographic and interface design came together to guide my initial idea. The bulk of the project was learning the new programming language of Actionscript 3, I feel as though I have gain a lot of knowledge through this project, I can now code buttons, preloaders, scroll panes, drop down menus, random number generators and variable counters.

The quiz game is functioning perfectly and testing the interface has gone quite well, people seem to find the design quite straightforward and engaging. The side deliverable of the mini-booklet provides a print counterpart for the interactive quiz game which draws on the vector art information slides for content.

I’ve decided to upload some process work which has helped guide my development from early on to the project’s final steps.

An early sketch of how I wanted the interface to look and function.

Survey Results from downtown participants

a finalized list of topics which lend themselves well to vector art. This helped me keep track of the work I created and guided me through the design steps.

Late Night Progress

March 16, 2011

It’s been a while my last post but that’s actually a good thing. I’ve been so busy working on the project I hadn’t had time for posting blog posts. I thought I’d post a quick update to let everyone know how the project is progressing.

I’ve been stressing over the quiz results and how the code would work. I got into a large issue with movieclips calling other movieclips (apparently they don’t like doing that) , layers needing to operate on top and under other layers at the same time, (basically some sort of impossible group sandwich), I really need to keep vectoring images for next week’s presentation to the class but I couldn’t focus on anything else until I got the final element of code working. (I lied, I also need to create a randomizer at some point but I think I know how to do it…conceptually)

I am happy to announce that the quiz results are fully functional and look pretty good as well. Staying up was definitely worth it and now I should be able to sleep a little easier knowing that portion is functioning. (I apologize in advance for my tiredness tomorrow morning in class.) It turns out the solution to my issues was not a complex obscure coding technique but a practical use of colour blending/revealing. I would go into the process more but I don’t want to give all my secrets away…the important thing is, it works and works well.

In other project-related news, I am considering binding the different information pages together to create a physical book which will allow gradshow guests to browse through the topics right from my booth. My next step in the process is getting more visual info slides on to the interface before next week’s presentation! But for now I’m off to bed.

Interface Design

February 16, 2011

The drop-down menu is completely functional and with the code generally under control I have shifted to designing the layout. I have changed the colour palette and worked with navigation. Next I will have to consider how the quiz aspect of the project will work. Here are some screenshots.

Milestone Review

February 9, 2011

With the project being reviewed today, I thought it would be helpful to take a look at my initial timeline and see how many of my goals I have accomplished. Some of the things I initially had planned are no longer applicable as ideas have evolved and changed. These are indicated on the list in red. Highlighted in green are the components of the project already completed and everything on the list that is not highlight has yet to be accomplished. I’ve also added “New Items” to display some other tasks that have been occupying my time which were not on the initial list.

Looking at the list, I had pleased to have completed some of the more difficult tasks. Everything left is quite manageable and I feel that I can complete most of the remaining tasks in less than the estimated time allocations. Also, it helps knowing I have enough code figured out to get a working database at this point. I’m still pushing to learn all the user-input so the experience will be more engaging and interactive.

Drop-down Menu Rethink

February 4, 2011

I have been working with the coding aspect and I have managed to get a working counter, it’s the part of the code that determines if the question has been answered correctly. If the correct question is chosen, 1 point is added to the counter, if there are 5 labels on a page, the program would look for 5 point to proceed to the “you win” screen, if the number is less than that, it would show you the correct answers.

This is working great but now I’m having trouble with the drop-down menu, I have been thinking about taking an alternative route and creating the menu visually rather than through code. It should work the same way and be even more customizable.

That would mean the code I really need to learn is the “make movieclip appear” and “make movieclip disappear”. This would allow me to display different things without having to move to another frame on the timeline. I would be working with layers instead of keyframes. I’ve never done this before but it seems to work in my head, plus it would be really great to have a working prototype for my upcoming project evaluation.

Drop-down menu/ComboBox coding

January 26, 2011

I managed to get a working preloader, I was hoping the preloader would have helped speed up the scroll time but when on the web it still seems to scroll at quite a slow pace. I will be looking into that further but for now I want to focus on the user-input elements. In AS3 they have a variety of code snippets that can be dragged into a flash document. I am experimenting with the ComboBox interface. The default menu will need to be redone into the style of the rest of the project and the actionscript will need to be customized to my needs.

I found this adobe tutorial that will hopefully help in understanding what code needs to be implemented. Adobe ComboBox Tutorial

The next step after getting this down is to create a tallying system which works in the background to collect correct answers and output a score at some point. Also randomizing which questions will be asked has to be looked into as well.

<—- Example

Here is a link to a question asked about a score counter. I will need to look into this as well to collect user inputs. Link Here

Coding Progress

January 25, 2011

The project has been coming along nicely and I have a working prototype. I will be posting the progress in steps so the development will be easy to track. Right now I have got the scrolling effect working and button navigation is also functioning. I should be able to create a working archive of information at this point which is great news. I’ve tried to copy over a working preloader but for some reason it pauses the file. I’ll have to rework that part of it.  My next step is to get the user input and randomizing code up and running. I will be posting my progress online.

http://ysdn4004-f10w11.wikispaces.com/mike_demoflash

Scroll Code Prototype

January 12, 2011

I have started creating some of the original code for the scrolling menu. I’ve used basic mouse coordinate tracking to get the scroll effect to work. Next I will try to keep it contained within the frame as well as stopping the motion when the cursor leaves the frame.

Check out the prototype progression at the following link:

http://ysdn4004-f10w11.wikispaces.com/mike_demoflash

User input code exploration

January 12, 2011

I have been looking through examples and tutorials for user input. Here is an example of a working quiz game structure that stores your score while you choose from 10 randomly chosen multiple choice questions. http://www.gothlyfe.com/games/season2quizgame/

Here’s a tutorial that was somewhat beneficial in at least showing some layout options for the quiz aspect. http://www.vineyardesigns.com/tutorials/flash/quiz/index.shtml

That quiz game was made entirely in ActionScript 2, which I can manipulate and understand completely. The issue with using it is that I would really like to get to an intermediate level with ActionScript 3. Ideally I would like to learn the new coding language but getting a working project done on time is also very important to me. I’m going to try to hang in there a bit longer with the new code and at least take comfort in knowing I have a plan B if it all goes terribly wrong.

Here’s the format I am currently trying to capture. The finished project should include three initial options (names pending):

  • “test your knowledge” -allows users to view quiz questions one by one (as many as they want) with immediate answers.
  • “expand your knowledge” -allows users to navigate through the answer cards to learn more about the topics.
  • “speed round” -randomly generates 10 questions in a row, percent results are revealed when all the questions have been answered.