Shifting from coding in Processign to ActionScript 3.0 took a little while to get into the language. The main differences are the less strict logic of the programming language and the possibility of using both the timeline and pure coding.
Each of us developed a different part of the programme. Then we combined them. Therefore it was neccessary to have a clean and understandable code. The most relevant aspect, to this extent, was understanding how to manage children and movieclips. Firstly, we focused on creating movieclips that contained all buttons and activators, so that we had miniprograms working by their own.
This revealed itself to be quite complex because of the structure of the program itself. To understand better how the different parts of the application related one to the other we used the metaphor of an elevator. In this sense, we set each screen as a layer. All screens were set invisible by default. In this way, we made visible only the part of application needed to be seen, according to the position in the flow of interaction. Thanks to this method, we avoided the standard iPhone coming in and out of screens, and developed a crossfading change of screens. Once we fully understood how the structure of the application worked, we combined the different parts of Madeleine and cleaned up the code in order to have a coherent and consistent way of coding.
Tips
Drag and drop
To have a working drag and drop interaction we explored different ways of doing it. We first tried to insert targets responding to each object, but we figured out that this way could lead to misunderstandings. So, we decided to set sensisible areas for the interested layer to have unequivocal responses.
Three dimenstions in two
Even if our setting was surreal, we needed a coherent 3-dimensional interaction in a 2-dimensional environment. To reach this objective, we overlaied graphics in different parts of the flow of interaction. Therefore the user can believe that his/her actions relate to a 3dimensional space.
Secret room
To let the user explore the secret room, we had to figure out how to make only a little part visible and make it according to the finger movement. To do this, we overlaid a big .png mask and its x and y positions where related to the finger movement but not the same (otherwise, the finger would have covered the visible area). Instead of having a specific element to recieve the input, we had to have the whole stage sensitive to finger movements.
Another issue concerning the secret room was its behaviour to when entered. From a logical-sequential point of view, entering the secret room meant knocking on the door, typing in the password, waiting for the door to open, exploring the secret room. Since the secret door was part of the main stage this means that there is a shifting between screens that from the coding point of view is pretty different than from users’ expectations. To better understand how the coding worked in this case, we would like to recall the elevator metaphor. From the main stage level we need to go up to the typewriter level, then come back to the stage to see the door animation, then once again up (upper than before, skipping the typewriter level) to reach the secret room. From here to come back we have to go two levels down, back to the main stage (telling the program to block the door animation reverse).
Animations
In order to have smooth and coherent animations, we used caurina library. Using this library we could use tweenings, delaying or lasting them as long as we needed.
Feedbacks
One of the aims of the Madeleine application was to have an interaction at the same time unexpected but deducible. We wanted to suggest instead of telling clearly. To reach this kind of affordance in a surrealist enviroment we gave some feedbacks, expecially audio ones. Fortunately AS 3.0 manages audio files quite easily. In fact, we only had to import audio libraries and tell the programme to start or stop according to user input. We think this little piece of interaction gave a definitely more complete and immersive enviroment, and examples are the opening peck of the pigeon-mannequin or the getting in and out of the secret room.
Input on press and on release
One of the most evident differences between mouse interaction and touch-mobile interaction concern the user input on press or on release. While in mouse actions most of them are on press, on touch-mobile devices almost all actions are activated on release. This seems a very little displacement but has two very important consequences.
First, even if the user might not be aware of the different behaviour, activating actions on release lets the user make more mistakes without causing any misbeahaviour of the service according to the users expectations. For example, the user can press on a “wrong” place but, moving the finger, can reach the intended place and act without frustrating expectations.
Second, the possibility of using these two different behaviours separately, greately increases the number of the possible interactions.
Developments
The prototype we developed has parts not fully developed or not developed at all.
As an example of the first case, we didn’t have time to have all the “back”s working, so it might happen that from a certain point it’s impossible to get back, but only forward. Moreover, the hourglass appearing during the uploadings was meant to last as long as the scanning was completed. In this way, the sand would have represented the real flow of time. Unfortunately, for technical reasons we didn’t manage to do that, so we had to cycle the animation, but that was not our intention.
The part we didn’t develop at all is the secret room, because the design wasn’t fully worked out yet.
Finally, even if now the interactivity with other users are only simulated, AS 3.0 in the new version of Adobe Flash Professional CS5 will permit to export native iPhone applications. Therefore we believe that there will be libraries and ways to connect devices effectivly.
Here you can try the ongoing prototype
.fla file – sourcecode
Madeleine | Concept | Design | Interactions | Interactions 2 | Code | Process |
Critical reflection | Teamwork | Downloads