Is the morale of your office’s team down due to your boss’ inability to lead? Is he a dick when it comes to managing projects or being reasonable? When that happens, most employees just go to a bar where they can drink to their anger while they tell everybody – usually fellow employees – how much their boss sucks. But now you can make an anonymous video and send it to your boss – with complaints from all the team members, such as the programmer, the webdesigners and the account manager – by way of the Middle Finger Pub, Gringo.nu’s debut website.
This Flash website was developed in around a month and, to me, it’s a fine example of something that we will see a lot more in the future in Flash 8 websites – special effects. Sure, we’ve seen all kinds of crazy tricks done on Flash interfaces, but I believe that right now, due to the new Flash 8 features (specially BitmapData) we’re getting to a state where the question is not whether Flash can do something or not, then use it on the entire navigation concept, but whether if the developer can do it or not (or if he has the time to do it); it’s moving the limits further away from the boundaries of the tool features and more to the limits of the developer knowledge or time spent on visual gimmicks.
In concept, the Middle Finger Pub is a simple website – select some videos, sort them out, preview them, and send them away. However, time has been invested in making some of the interface elements a bit better visually, be it with the pseudo-3d video selection cylinder, or with the animation of placing the video on the list that emulates OSX’s genie effect (which I hope doesn’t make Apple sue us since it’s just a parody).
In the end, the new features in Flash 8 do help a lot in current development – I must have used the BitmapData class for just about everything on that site – but it’s in creating new stuff on something that otherwise could be pretty plain (and still work well) that I think the term special effects fits best; programmatical makeup of sorts, but one that can help on many visual-driven websites.
Bem, não é só a ideia que está fabulosa, visualmente está um mimo!! De uma simplicidade incrÃvel, mas tudo feito ao pormenor. Parabéns à equipa!
Pergunto-me como se implementará o cilindro pseudo-3D. Onde posso encontrar info de como implementar algo semelhante?
Obrigado, e os votos de um bom trabalho!
Well, not only the ideia is fantastic, but visually it is eye candy!! Very intuitive, everything done in detail. Congratulations to the team.
I ask myself how to implement the pseudo-3D cylinder. Where can i find info on how to implement something like that?
Thanks, and keep up the good work!
João,
Obrigado.
Apesar de que tiveram alguns detalhes no cilindro que tornaram a coisa toda muito mais difÃcil (o fato de que os pedaços “se esticam” ao passar por trás, é imperceptÃvel mas era necessário pelo fato de cada pessoa ter só 6 vÃdeos), no geral só o que é necessário pra fazer algo nesse sentido é conhecimento da projeção de pontos 3d (xyz) pra 2d (xy). E um pouco de trigonometria. Aquilo nada mais é que um monte de pontos criados e projetados, e aà desenhados usando os comandos de desenho; as imagens são simplesmente escaladas pra caber nas laterais, e mascaradas na borda pra parecer que estão sendo curvadas. É um efeito bem simples, e como a imagem é pequena, não dá pra perceber que é “errado”.
Projeção 3d é um assunto complexo, mas tudo que você precisa aprender pra fazer algo semelhante pode ser encontrado pode ser encontrado aqui:
http://www.kirupa.com/developer/actionscript/3dindex.htm
Não usei os ensinamentos desse site pra fazer essa coisa (já que já faço esse tipo de projeção há alguns anos) então você não vai achar nenhuma tradução direta ou receita de bolo para fazer aquilo; no entanto, o que você vai encontrar aà são todas as informações necessárias pra criar coisas semelhantes. É o link que sempre recomendo para pessoas que queiram aprender projeção 3d num ambiente 2d. É um assunto bem grande, mas bastante bacana depois de compreendido.
–//–
João,
Thanks.
Although there were a few details on the cylinder that made the thing a lot more difficult (the fact that slices on the back of the cylinder “increase” in size, it’s impossible to notice but it was needed because each employee only had 6 videos), in general all that’s needed to do something like that is knowing how to project 3d points (xyz) on 2d (xy). And a bit of trigonometry. That’s nothing more than a bunch of points created and projected, then draw using the drawing API; images are simply scaled to fit the sides, and masked on the border to look like they’re being bended. It’s a pretty simple effect, and since the image is small, you can’t notice it’s “wrong”.
3d projection is a complex issue, but everything you need to learn to do something similar can be found here:
http://www.kirupa.com/developer/actionscript/3dindex.htm
I didn’t learn from this website to do the thing (I’ve been doing that kind of projection for a few years), so you won’t find a direct translation of what I did there or any easy recipe to redo it; however, what you’ll find there is all the information needed to create similar stuff. It’s the link I always recommend for people wanting to learn 3d projection on a 2d environment. It’s a pretty complex issue, but pretty cool after you “get” it.
Very, very nice. It is such a coincidence that I stumbled upon this sight this morning – I am currently putting together a CD-ROM which uses the same pseudo 3d effect – onlt the objects that I rotate are 3d studio max models brought in as flash video files with an alpha channel – Really nice effect. The coincidental part is that fact that one of the designer suggested that we try to mimic the genie style osx transition for moving between screens – How on earth did you achieve this?
David: it isn’t much secret, but I don’t think it’s easy to describe.
Well, I basically have the sides, which have their position defined by an easeinoutexpo equation (see Robert Penner’s equations). Based on these positions I define the correct x1 and x2 for each row of the animation. Then for the animation, I make a value go from 0 to 1, and when going from 0 to 1, I update the screen “projecting” the current area of the box to the correct rows. This is just to define the screen boundaries.
Based on the screen boundaries, I capture portions of the original image and project them to the correct position using copyRect. It has a low quality (you’ll notice it’s not pixel-perfect) because it has speed in mind, but the effect is good enough.
Of course it’s important to use some transition/tweening engine too so things will be smooth. I used my own Tweener which is still undocumented (www.osflash.org/tweener), but on that aspect, you’ll also be fine using MC Tween, Laco’s tween, the Fuse Kit, etc.
I don’t know if I’ve made myself clear, but that’s what I do.
However, you can forget most of that and do that with a DisplacementMapFilter instead. It’d probably have a much better quality even, and be much faster, although it would be a bit more complex to generate the initial grayscale displacement map (I didn’t want to go through that when I created the thing because I needed to do it fast).
Thanks for taking the time to reply – looks like I’ve got some reading to do. Fantastic work! Really nice site concept and very well put together.