Work in progress III

The work in progress so far is that several puzzles have been created showing different stages of the puzzle, the first piece, finishing a collection and a puzzle from the beginning. The actual content hasn't been finished - this is the bare bones for now.

When a QR code is scanned this will be the screen they come to. The login lets the user access their account anywhere and store the data to their account.

Once in, the user can flit between the piece and a letter (content depending on the piece). An example of this can be seen in a previous post. From here the user can either go to the puzzle or go to the menu. 

 The piece will appear on the puzzle. With a simple drag and drop action the piece can be slotted into the correct position.

On the menu, currently the icons for each puzzle are the actual puzzle themselves, however I may change these so that they have a different appearance like maybe a company logo for the companies collection. Just so that icons don't remain blank and empty.

This is the puzzle for what happens at the end of finishing one. One idea is that some sort of mini-game can become available, or the user can enter a competition relating to that product.

This is the menu screens. The user can go between these screens for their puzzles. The red icon means that there is a piece that needs to be placed. One problem here is that the red icon doesn't go away yet when the remaining piece has been placed. This is something which I will deal with next time I sit and finish the app.

This is going to be the puzzle which will demo the final one. It demonstrates the whole puzzle, starting and finishing. 

To be finished is the menu glitch, contents like the piece and letter. and if there is time, icons images changed.

Making the App - work in progress II

Here is the puzzle ready to use in the app. It still do have all the piece in as I just created the whole thing, which at a later date will be edited so that it demonstrates different stages of the puzzle.

The difference with this puzzle is that the actual pieces disappear when the piece is put in place and the 'shadow' piece turns transparent reveling that part of the image. This is so it creates a much better final image that doesn't have the outlines of the pieces shown as you can see in the earlier puzzle.

Making the App - work in progress

When I've come to design the application, I have started from the user receiving the puzzle piece. This, again, has been created in Flash using Action Script 2.0. Some of the illustrations were created in Illustrator.

The user receives the piece, enters their log in which keeps all the data about what they have collected. Once the details are entered the user then logs in.

The user then views the piece. A tap/click on the piece takes the user to the letter and another tap/click takes them back to the piece. From either screen the user can go to the main menu by clicking on the menu button or they can carry on to the puzzle with the next button. 

Here is the new puzzle being made. I am making some adjustments from the previous one which I will explain in my next post when it has be completed.

Making the Puzzle

I started to make the puzzle in Flash. I have used Action Script 2.0. It works by matching up the puzzle piece to its "shadow" and slowly fits the puzzle together. This is ideal as I only need to the puzzle to fit just one piece at a time. The images do have more than one piece on as I was trying to produce the whole puzzle first. The pieces were made in Photoshop and imported nto Flash.

The pieces ready to use. 

Some of the pieces in place.

All the pieces put together.

The Pitch

Here is the presentation I created to present my idea to the rest of the class.

QR Code

This is another test of the QR codes. This one links to a page of my website with a puzzle piece on it.

The Concept

After a few discussions in the seminars, I have decided to create a app with focuses on people go out and exploring Fairtrade for themselves and finding out how they can bring it into their own lives. To do this, I will use a QR code which links up to the content the user gets.

Here is an example of one which I used as a tester to see how it works. It should come up with the words It Works!.

It does require a QR scanner to view which you can get for free for iPhones and Androids. I have an Android and have used ScanLife.

The idea is that there will be several of these on a variety of FairTrade products which the users will "collect".