Hi guys ,
I believe they programmed a AS3 based 3D
Rasterizer to create this flip - AS3 can do that quite easy since
it provides all necessities to do so :
ByteArray to hold the pixels
Matrix to do the transforms
BitmapData to manipulate and draw .... and more ....
I am currently working on building a 3D Graphics
Engine in AS3 - and if anybody would come to me
and ask me to program something like this -
that would be the way I would go about it.... (
but I am a programmer - so my solutions are often
very programmer centric - not an animator :)
next week I will contact the developer and ask
him/them how he / they do/did that :) if he tells :)
I am VERY curious wether or not I guessed right ....
What do you guys think about that - would you say my suggestion is correct ?
I made a couple of screenshots and noticed that
the lines are definitely DRAWN BY FLASH @RUNTIME
- look at the Alias its almost nonexistent
therefore I believe they are probably using a
Bresenham Algo on a BitmapData to draw lines.
Think about it, its not as hard as it may sound -
all you need is a simple Polygon whithout any
depth - no camera , it runs in a fix perspective mode.
Then you create a transform matrix ( rotation
only ) and transform the Polygon in place ( only inside model space ).
The next step would be to create a simple concat
Matrix that does the Model-to-Perspective and the
Perspective to Screen transform.
Done ! well I admit its a shot in the blue - but
as i said thats how I would do it.....
Second question would be the maintainability of
'flippable' content - If they were to use images
they would need to 'recreate' each image once its
content changes - even twice if they would use
two images per flip - doesnt sound maintainable to me :)
Besides if content is retrieved from inside a DB
or from some kind of Backend, chances are you
would not have a way to transform the content ON
THE CLIENT - meaning you would have to convert
the content from Text to Image on the Server -- arrghhh sounds tricky :)
Anyone finds out ... let us know ... this flip is
done VERY NICELY - nice craftmanship
Have a nice Weekend
Amir
Am 08:12 PM 6/29/2007 schrieben Sie:
If you check the code they are using bitmap classes from
http://www.group94.com/. Ask em about com.group94.graphics.TransformImage.
It looks like its using triangles and texture bitmapFills.
-----Original Message-----
From: [EMAIL PROTECTED]
[mailto:[EMAIL PROTECTED] On Behalf Of Matthias
Dittgen
Sent: Friday, June 29, 2007 3:50 AM
To: [email protected]
Subject: Re: AW: [Flashcoders] Turn image around effect?
have you tried to contact their developer directly? ;-)
2007/6/29, Peter Oliver Geller <[EMAIL PROTECTED]>:
> But when you use the image distortion effect (Bitmap Data)
> with a two image flip, it´s tricky to program your mask on the point of
> intersection where the image turns around, because on that moment you
> display the front and backside and I think group94 use another type of
> technique which is definitely easier.
>
> Hmm or you can really simple do a gradient alpha flow on the two images in
> an inversely direction?
>
> Thanks
> Peter
>
> -----Ursprüngliche Nachricht-----
> Von: [EMAIL PROTECTED]
> [mailto:[EMAIL PROTECTED] Im Auftrag von Cedric
> Muller
> Gesendet: Freitag, 29. Juni 2007 11:40
> An: [email protected]
> Betreff: Re: AW: [Flashcoders] Turn image around effect?
>
> maybe by creating the illusion of only one image that is front and
> back ??
> My guess is that there are two images flipped in the same time: one
> from visible to invisible and the other one from invisible to visible
>
> hth,
> Cedric
>
> > I know the card flip effect,
> > but I think its more like the effect Jesse Graupmann posted.
> >
> > The question is how ja shows the image backside???
> > I have no idea how to combine the image distortion to switch from
> > front to
> > backside and vice versa?
> >
> > Any ideas?
> >
> > Peter
> >
> > -----Ursprüngliche Nachricht-----
> > Von: [EMAIL PROTECTED]
> > [mailto:[EMAIL PROTECTED] Im Auftrag von
> > Pedro
> > Taranto
> > Gesendet: Donnerstag, 28. Juni 2007 19:37
> > An: [email protected]
> > Betreff: Re: [Flashcoders] Turn image around effect?
> >
> > Card Flip Effect:
> > http://pixelfumes.blogspot.com/2006/07/business-card-flip-effect-
> > class-with.
> > html
> >
> > --Pedro Taranto
> >
> >
> > Peter Geller escreveu:
> >> Hi list,
> >>
> >>
> >>
> >> can somebody give me an answer how this turn around effect was
> >> made when
> >> you click on the speech bubble?
> >>
> >>
> >>
> >> http://www.ja-ik-doe-mee.be/
> >>
> >>
> >>
> >> Or is it done with a visual flatted 3D Image made with
> >> http://www.flashsandy.org/ ?
> >>
> >>
> >>
> >>
> >>
> >> Another nice technique which interests me is used on this side:
> >>
> >> http://lab.mathieu-badimon.com/ same technique?
> >>
> >>
> >>
> >> Maybe some of you have a link for me how this is done?
> >>
> >>
> >>
> >> Thanks a lot
> >>
> >>
> >>
> >> Peter
> >>
> >> _______________________________________________
> >> [email protected]
> >> To change your subscription options or search the archive:
> >> http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
> >>
> >> Brought to you by Fig Leaf Software
> >> Premier Authorized Adobe Consulting and Training
> >> http://www.figleaf.com
> >> http://training.figleaf.com
> >>
> >>
> > _______________________________________________
> > [email protected]
> > To change your subscription options or search the archive:
> > http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
> >
> > Brought to you by Fig Leaf Software
> > Premier Authorized Adobe Consulting and Training
> > http://www.figleaf.com
> > http://training.figleaf.com
> >
> >
> > _______________________________________________
> > [email protected]
> > To change your subscription options or search the archive:
> > http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
> >
> > Brought to you by Fig Leaf Software
> > Premier Authorized Adobe Consulting and Training
> > http://www.figleaf.com
> > http://training.figleaf.com
>
> _______________________________________________
> [email protected]
> To change your subscription options or search the archive:
> http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
>
> Brought to you by Fig Leaf Software
> Premier Authorized Adobe Consulting and Training
> http://www.figleaf.com
> http://training.figleaf.com
>
>
> _______________________________________________
> [email protected]
> To change your subscription options or search the archive:
> http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
>
> Brought to you by Fig Leaf Software
> Premier Authorized Adobe Consulting and Training
> http://www.figleaf.com
> http://training.figleaf.com
>
_______________________________________________
[email protected]
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training
http://www.figleaf.com
http://training.figleaf.com
_______________________________________________
[email protected]
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training
http://www.figleaf.com
http://training.figleaf.com
_______________________________________________
[email protected]
To change your subscription options or search the archive:
http://chattyfig.figleaf.com/mailman/listinfo/flashcoders
Brought to you by Fig Leaf Software
Premier Authorized Adobe Consulting and Training
http://www.figleaf.com
http://training.figleaf.com
