Monday 28 February 2011

Things are (finally) moving forward !

Hey there everyone !

Been a little while.
Just like on the other blog, this is quite a massive post so I'm a divide it into subsections.
And arm, yeah, enjoy and ... good luck

(if U're gonna read the whole lot) !



The vortex effect
I introduced this hellish website in a previous post.
It basically uses a sort of "vortex effect" (that's what I'm gonna call it), basically U zoom in/out of the picture forever.
I really love this effect and thou I'm not planning on doing anything with it on the short term, I was thinking of using it before this module started for some kind of work and I'm definitely gonna use it sooner or later !
I'm not too sure what actually gave me the idea, it's very reminiscent of music visualizations (Windows Media Player/Winamp), that could be it.
Anyways I did a bit of research on that and there's a couple other thingies that also use this really cool effect :
- Röyksopp - Eple -  a classic, beautiful song
- Je Danse Le Mia (suggested by Neil) - Gondry is just a genius
- Arrival - this is a video presenting still from a comic which Neil also showed us a couple of times in the lectures and that I noticed. There's that precise sequence in there that uses this particular effect, see the screenshots I took from the video below

You could argue that it's a mere zoom-out effect but I think the picture in the frame on the 1st images really acts like a link, there's more to it than that. Like family > guy in the cabin > boat.
It's an effect I'm very interested in, I might use it in my 3rd clock concept during he 3rd term, and even if I don't, it's still a really interesting effect/concept I will investigate further in the future.

Lastly, Duane Michaels's Things are Queer, which I was introduced to back in Level 0, features a similar effect.
I kind of used a vortex effect for the exercise page when you click on an app and that the whole page comes towards you while twirling, but there'll be more details on that in the other post.


Display problem > solved
One of the reoccurring problems I first came across while fixing the Haunted House and then while working on the website is : how to get rid of graphics on the screen, and especially buttons ?
On the website I just moved stuff out of the display area 'cause that was the simplest way but I wanted to do something better for the website, more elaborate, more professional let's say.
I experimented with addChild/removeChild.

The 1st experiment kinda worked but had a problem : if you removeChild a button that's moused over, when you addChild it, it's still moused over, whether or not your mouse is over it ! That was unexpected ... This seems 2 be an issue with Mozilla & Internet Explorer mainly, maybe it won't show on your browser, but it upset me greatly.

In the 2nd experiment, I experimented with another function that would disable the button function but keep the graphic on stage as a non-interactive item. See I want buttons to be clickable at precise points only, but the rest of the time I'll replace them with identical movie clips, so if a button could just stop being a button on demand that would save me the hassle of having to use 2 identical movieClip & button. Check out the 2 buttons at the button, the one at the bottom left toggles the button function of the one at the bottom right. It works until you use TAB.
For those unaware of that, you can use TAB in any Flash application to browse through all the interactive objects on screen, like you would in Windows or what have you. Try it, it should look something like that. See when the button is inactivated, it can't be selected with the mouse normally, BUT IT CAN if you use TAB. So that was a fail.

In the 3rd experiment I just got rid of that button enabler/disabler function and just fixed addChild/removeChild, and thought I'd just use stills (movieClip & buttons) instead.

Now the problem with addChild/removeChild is that unlike the visibility toggle, you can use it an infinite amount of times, if you remove a child twice you'll get an error and if you add one twice they will overlap and one will stay behind the next time you remove it.
Very frustrating and inaccurate stuff in my opinion !

So after spending a couple of days getting the addChild/removeChild-based script for the archive feature of the website to work (NOT a piece of cake), I realized that actually, the easiest way to do it was to use ... gotoAndStop !
You get a movie clip, stop it, add 2 frames 2 it, on frame 1 you stick a button, on frame 2, a movieClip identical to it ! Whenever the button is pressed then you get the movieclip to gotoAndStop(2).
Child's play ! AND flawless. It's what I used for all the buttons on the homepage, I just added a bit of code on top of that so all the button movieClips gotoAndStop(2) whenever ANY button is pressed on stage so functions won't interfere with each other.

Bottom line, what have we learned ? KEEP - SHIT - SIMPLE !
So nothing new, basically.




The missing link
I had totally forgotten that I had taken that pic of the Metro & plane tickets I used for my game ... there you go, for your eyes only :



















Inspiration from way back
I managed to digg up a couple of Flash apps I used to have on my PC back in the day (around Middle School).
They've probably not all been developed with Flash but they're small .swf or .exe files that don't require installation and have probably been programmed using pretty basic script so I'm a post a link to them here.

YETISPORTS was a collection of games (there's more than 8 of them by now I'm sure) themed around North Pole animals & sports what have U. That's just a link to a picture, they must not be that hard to find. I'm pretty sure they were developed on Flash, they're fun, simple & effective, deffo what U'd aim 4 if U're developping a minigame.

BASKET (! link to .exe file !) I have no idea what the game is actually called but it's made in Flash too and is just as simple yet effective ... perhaps a bit dull actually but it's a good standard to aim for if you're working on your 1st game I think. I mean, it works ...

FISTIK (! link to .exe file !) Same here, not too sure what the actual name is ... and what language it's in. Except for the fact that torturing some dude on screen might not be every1's favourite hobby, it's another application that, thou very simple, works very well, a good interface reference to get started. I'm sure it was developed using Flash as well.

STRESSREDUCER (also known as "StressDeucer" for peoplez with no English skillz ... we used to call it like that lol) Thou this one was definetely not developed using Flash it's a really cool program that uses very simple mechanics also (a screenshot of your desktop ... that's about it !), check it out if you don't know it !

I don't know if any of these apps will have a direct link to what I'll be creating this year but I know them by heart, I played them over and over again and they're where I come from so I think they will be relevant to what I do, even if it's only by encouraging me to keep things simple (*that's a good thing :-D).




AddChild-based apps
AddChild seems to be the new cool thing !
I want to have little hearts floating out of a char's head for one of the apps I'm planning on developing and Andrew said that this technique would be the easiest way to do that, so he came up with this app very quickly to show me the mechanics.
It's extremely simple but I think it looks really cool so there it is.
I wanna develop it more, maybe have a 2nd loop that does something more similar to what's on the screen now.
I haven't figured out how 2 remove all the children yet, that's a problem ... but I'll get there.
BE CAREFUL THOU because children just add up and add up it might get slow and crack after a while so just close it or restart it, it'c better for you and your browser :-)

This app works the same way as this one which was featured in an earlier post.

I also rediscovered last week that Latong, a great source of inspiration for me (I check his website for updates like 4~5 times/week) created Flash content also !!! I had totally forgotten. Enjoy !
They range from simple to complicated, they're well done and some are quite advanced and visually stunning (the one with the particles), definetely check it out !



Pixel Madness !
Sir Angrew said it wasn't possible to import .gifs into Flash ... and he was wrong !
I found out my mistake ... Anyways, there's the proof :

Homebrew animated .gif
Same thing but as a .swf

... and that's awesome 'cause I love working with pixels & .gifs. I might wanna use that later.
I spent an aweful lot of time on MPaint & GifView putting .gifs like the one above together until very recently (and I'll get back to it soon too).
GifView is a very simple basic software that a friend (one of them friends that are into coding and stuff, kno what I mean) gave to me ages ago, it lets you create .gifs frame by frame, the window looks like that. I like simple things and processes, it's less likely to mess up and thou it sometimes takes longer you get a real sense of achievement when you don't take shortcuts. I miss the old days, when I started using MSPaint Windows looked like this and it was actually called PaintBrush. The Old MSPaint is great but I'm so sick of the pimped version they got as default on Windows 7, I gotta get my hands on a vintage that's back compatible some time ...


Pretty sketches !
There's 3 pages of my sketchbooks that are relevant to this project and the website one.

Cool cover just for the crack
Experiments for the clue notes
Calculation, Haunted House fixing process (bottom of 1st page & top of 2nd)


Updated title graphics
I updated the title graphics so they follow the website's theme.
Also wherever you go on the website there's little icons to access other pages so if the blog is part of the website (which it is supposed to be) it should include a link to at least one other page too !
So I squeezed a homepage graphic in there.
If you still don't see what I'm on about, check out the following before-after comparison.




Unnecessary advanced link research
I was planning on doing some research to find out how to have separate HTML links within the same Flash application. I've seen that online before, I'll update if I can find the link back. That was also because I was originally planning of having each page as a separate Flash app but that I now have the entire website as one Flash app. Anyways, as the loading for the entire website happens at the very start, I can't link to separate pages 'cause I'd have to bypass the loading process and we don't want that. I also rather not go back to loading every time a page is clicked, it's better to get it done & over with at the start in my opinion (those things get on people's nerves if they happen 2 often, I rather avoid that). SO in the end I'm not gonna research how to have separate HTML links within the same Flash application. That was an update ...


V.3.2 FINALLY DONE !
... But not online.
Indeed, as I incorporated the loader inside the exercises page on the website and that the version with the exercises page is not online yet, you can't check it out !
I know, it blows ... sorry !
It will be online soon thou, I promise :-)
I'll keep this thing up to date ...



Real Flash Apps !
That's right !
After all this time !
There's my finals for the research :

Exercise 1 - Basic Tree
Exercise 1 - Red Tree
Exercise 1 - Colourful Tree

Exercise 2 - Domo

Exercise 3 - Random symbols

The Trees were not really inspired at all ... they just kinda happened. One thing I changed in the process of making them is that they were originally gonna be made up of the same MovieClip element repeated over and over again all within a main MovieClip, but because you have to play() & stop() the bastards every 5 minutes I decided to do everything by hand within the main MovieClip instead.

Domo was inspired by Domo-Kun, a weird character from Japanese descent, and by the fact that he really looks like a big turd (no hard feelings bro). I used codes from this classroom exercise in the process of making it. I gave up the idea of the little hearts coming out of its head, I might get back to it later. I used onion skins to draw the intro frame by frame for the 1st time as well, it was fun :-D. This animation and this one gave me the idea to do that.

Random was kinda inspired by last year's early Processing experiments (bottom of the page). It also uses this app's mechanics. You can change the icon that gets drawn if you click but it's sometimes a bit daft so your best bet is to click the hell out of it like in those minigames that count how many times you can click in 1 minute (don't overdo it thou, I broke a mouse like that, true story ... ). It's the only one that's not entirely straightforward so all in all it's not that bad I think.



Well that's all folks !
Thanks a lot for reading, I hope you learned something ... maybe not.
... But thanks anyways :-)

Expect a new update soon ... enough.

Ciao :-) !