New tutorial on 3D photo panels
 |
I just uploaded a new tutorial that shows how to make a cool 3D photo panel. This type of 3D effect is very common and is a good skill to have in your toolbox. When you click on an image it scales up into focus. This tutorial also serves a dual purpose as being a good introduction to using TweenLite. The tutorial uses the new 3D features of FP 10 rather than a library like Papervision3D. Click the image below to see the result. |
Lee
I was actually working on something similar to this for my portfolio. Il definitly look into this tutorial. Thanks Lee.
Regards,
David.
This is a great tutorial.
Thanks Lee!
Thanks Lee. You have done a great job!
One other thing I noticed. The container movieclip remains sharp when it rotates in 3D space. Ive created a similar effect to the rotating container but when I start rotating the my movieclip, flash blurs the movieclip. I looked into this problem. Its something to do with the tansform.matrix? If anyone knows about this and is willing to help I would greatly appreciate it.
Code
/*
// Listener for the rotating MovieClips
this.addEventListener(MouseEvent.MOUSE_MOVE, mouseActive);
// Function for the rotating MovieClips
function mouseActive(event:MouseEvent):void {
var centerX:Number=stage.stage.width/2;
var centerY:Number=stage.stage.height/2;
xxi_mc.rotationY = Math.round((this.mouseX-centerX)/30);
xxi_mc.rotationX = (this.mouseY-centerY)/30;
xxi_mc.z = (this.mouseY-centerY)/3;
holder_mc.rotationY = (this.mouseX-centerX)/30;
holder_mc.rotationX = (this.mouseY-centerY)/30;
holder_mc.z = (this.mouseY-centerY)/10;
xxi_mc.xxi_mc_gloss.alpha = (this.mouseY-centerY)/50;
holder_mc.holder_mc_gloss.alpha = (this.mouseY-centerY)/50;
}
*/
Thanks,
David
Very cool tutorial thank you
Thanks Lee,
I just want to say that I have don’t something like that but instead doing it using the distance between mouse position and the center point I just equaled the rotationX and rotationY to mouseX and MouseY multiplying with double number like:
rotationX:mouseX*0.8;
rotationY:mouseY*0.8;
and it gives me the same effect but your method is another useful one to use
Thanks again
Nabeel
Excellent tutorial! Thank you very much! Now I will try to do XML based loading to add some more pictures and align them. Thanks!
How would you modify the code to put hyperlinks on the enlarged image?
Awesome! Lee, how do you get ideas to do these great examples/tutorials?
Before Flash CS4 came out I had a similar project.
http://www.youravatar.com/DDME/index.aspx
Since I did not have Flash Player 10 and it’s built in 3D I had to go the Papervision route. Not only did I have to learn the in’s and outs of Papervision but I also had to do it in AS3 which I had just started getting into…
The sad part is I’m no longer with the company that I built it at and the end client has asked for changes since and the remaining developers have never worked in Papervision and have hosed up the live version at:
http://www.designateddriver.com/dd/index.aspx
Your approach is pretty straight forward and clean. Very nice.
Great tutorial, as always !
I learn a lot with you, thanks !
There is still a little issue with the ‘unlarge’ thing.
An example here : http://img12.imageshack.us/img12/8618/enlarge.jpg
But i can’t determine when does it come.
Very nicely done, Lee. And I think that Jack’s work on the TweenLite/TweenMax engines is awesome. Have been using those for a while in preference to the others out there. They are very actively maintained and updated and it still amazes me that guys like him can find the time to work so diligently on something which they then give away for free! Makes me feel quite unworthy…
Thanks for continuing to encourage us all to explore the Flash envelope. As these tools become more and more accessible to those of us without an IQ of 624 and the ability to operate seven computers while existing on 2 hours of sleep a week, it opens up some very real and exciting possibilities for taking a concept and making it happen. Maybe not as a commercial app but certainly as far as creating a viable presentation. I for one am very excited to see the Flash platform finally assert itself within the gaming arena, for example…
Thanks another great tutorial!
@Marcin Do you have any links for a good tutorial on using AS 3.0 to load bitmaps through an XML document?
This is something I’ve been looking into for a while so that I can build something that can be scaled easily without having to go back to my original SWF every time I add a new image.
@Kevin have you considered SlideShowPro Director?
http://slideshowpro.net/products/slideshowpro_director/slideshowpro_director
If you take a look at the wiki it gives a lot more info on the various ways to interact with the XML generated from the back-end system, whether it’s from the SlideShowPro plug-in or via PHP accessing the API…
http://wiki.slideshowpro.net/SSPdir/API-API
[...] Link [...]
Thanks nice tutorial!
Great Tut lee. Just wanted to ask which wp theme you use for gotoandlearn?
Thanks a lot for sharing!! Great techniques to know !
However, i think TweenLite has a newer version after your tutorial published. I’m getting errors while i try to compile the flash movie.
Kindly find the print screen via http://www.360-creation.com/download/prob.jpg
That would be so much appreciate if you could provide me the info where i can download the earlier version of TweenLite which works from your tutorial video?
Thanks in advance
hi, i manage to make it works after i extra and copy the entire gs folder, thanks alot
maybe it’s just me, but I find this kind of interface really annoying. It’s cool to look at and even use the first time, but really doesn’t work in the long term.
This kind of interface shows off the interface, not the photos.
I wish I got paid to cool stuff with flash, actionscript and flex all day
Nice tut and great cat!
Thanks! Your code is just what I was looking for to display multiple YouTube streams in an interesting way:
http://prlwytzkofsky.com/2009/03/streaming-multiple-youtube-videos/
Thanks again,
Robin
Hey there Lee,
great tutorial, I made a version that generates dynamically and you can input the number of columns and total number. The issue im having is that when I add these dynamically generated clips to my movieclip plane to rotate them on (MovieClip con in your example) The registration point is always in the upperleft hand corner of my container plane. So all my rotations are done around the upperleft corner. Anyway of fixing this easily? I looked around online and didnt find much help.
here is what it looks like
http://dl.getdropbox.com/u/58333/3DGallery.swf
Thanks for the great tutorial Lee!
Jon – can you give me some clues as to how you loaded the images dynamically. Thanks,
charity
Jon, I had a similar problem myself and managed to find a solution. When you create a movie clip in Flash you can choose the registration point by clicking one of the 9 little boxes. It must have been set to the top left when you made your movie clip, so just make sure that you change it to the centre registration point and it should work fine for you.
Hi !
Would anyone now how to do that in Flash CS3 ??
Hi, thank you for all your great tutorials.
i use flash CS3.
I try to apply this tutorial but the panel keep static, it doesn’t move.
i would like to know if it’s normal…
When i want to read the file (PhotoPanelsFINISHED.fla) i got this message in Flash : “format of unexpected file”.
Thanks for your help.
ferdi
You can also use MOUSE_MOVE instead of ENTER_FRAME.
You’ll get the exact same effect but it’s less processor intensive.
May not matter when it’s only an image gallery like this but in my experience it’s best to avoid ENTER_FRAME if possible.
Cheers and keep up the great work!
How can I modify the codemake this effect:
http://www.iamunique.com.au/#!ha9NtYnRkqgARUUlpfLCA
Thanks
I’ve modified the 3D Photo Panel to my needs, but I am having trouble figuring out how to pull the ‘Child Name’ out of the ‘For Loop’ that returns the integer of the Child that is moused over. In the following code, it will only return the very last Child name no matter which I mouse over:
//CODE
private function getNames(mc:MovieClip):void
{
var len:int = con.numChildren;
for(var i:int=0; i<len; i++)
{
var mc:MovieClip = MovieClip(con.getChildAt(i));
myTextClip.myText.text = “photo”+i;
}
}
//END CODE
Any suggestions on how to A.) impliment navigation, and/or B.) simply return the Child Name from the loop, would be greatly appreciated.
Bill
Actually, I made a mistake in that previous code, but even still, the following edit doesn’t return what I want either:
//CODE
private function getNames(mc:MovieClip):void
{
var len:int = con.numChildren;
for(var i:int=0; i<len; i++)
{
var mc:MovieClip = MovieClip(con.getChildAt(i));
myTextClip.myText.text = “photo”+mc;
}
}
//END CODE
This returns “photo[object MovieClip]“. I simply want it to return the exact value of i, depending on what clip is moused over at that moment.
HI!
I am new in Flash and have no knowledge about AS. I love what you showed in your tutorial. I would like to create the same effect that you did, but just for a single object (logo). I want on my entry page have a logo moving in 3d space. Could you please write a script for that or how should I modify your previous one to achieve that?
Thank you Lee!
Przemo
It’s me again I would like to get exactly this effect for my logo:
http://www.designateddriver.com/dd/index.aspx
Thank you!
Hi,
This is one great tutorial, great quality,great explanation and you made it one shot congrats. When i tried it tough, it worked fine, but the rotation was greater when the mouse is lower on the scene so the movie clip always looks like your looking to it from below, it looks god but i hate not to know why it this way.
oh and thanks for the tutorial, people like you make the internet so cool.
Hi,
Thanks Lee this is a great tutorial. I am trying to create another layer for the same, as the first layer is the MAIN CATEGORY and the inner layer is the dynamic content SUB CATEGORY and then once the sub-category is clicked then it shows the actual picture and also opens an URL.
Appreciate if you can help out.
Thanks
SID
Hello,
This is a great tutorial, and very timely. I do have a question…
I’m trying to add a reflection to the thumbnail by creating a movie clip inside the thumbnail with an instance name of ‘reflect’. I want the reflection to disappear when the thumbnail is clicked on by adding this code to the scaleUp function…
TweenLite.to(mc.reflect, 0.5, {alpha:0});
So far so good… then I want the reflection to fade back in when you click back by adding this to the else if(inFocus) statement…
TweenLite.to(mc.reflect, 0.5, {alpha:0.6});
Again, so far so good…
However, it seems that because else statement uses a dynamic method to switch the ‘on focus’ movie clip I can’t find the right method to make the reflection reappear when I click a different clip.
In other words, I only get the reflection to reappear when I click the enlarged photo to scale the thumbnail back. Clicking another thumbnail reduces the ‘on focus’ clip but does not allow its reflection to come back.
Any help would be appreciated.
Mike
Where is the library ??? without don´’t function the files,
Help me please.
Hi folks. I am a newbie to flash and can’t get this working. I downloaded the files, and then I open the finished fla and try to preview the movie, I get a bunch of errors, shown in this screen cap:
http://aaronpenton.net/screen.html
Can anyone help me? Sorry for the ignorance.
Thank you!
Hi Lee, Thanks for the great tutorial. I have a problem though. When I test my movie it comes up with all these TweenLite errors. I downloaded a copy of the TweenLite software but I still can’t make it work. Any suggestions?
Thanks in advance!
Lee I managed to make the Flash work up the point where the photos are rotating but I can’t seem to click on each of the photo panels. The following two error messages come up. If you can give me more direction on how to fix this problem, I’d appreciate it a lot!
TypeError: Error #1009: Cannot access a property or method of a null object reference.
at com.greensock::TweenLite/init()
at com.greensock::TweenLite/renderTime()
at com.greensock.core::SimpleTimeline/renderTime()
at com.greensock::TweenLite$/updateAll()
TypeError: Error #1010: A term is undefined and has no properties.
at PhotoLayout/scaleUp()
at Function/http://adobe.com/AS3/2006/builtin::apply()
at com.greensock.core::TweenCore/complete()
at com.greensock::TweenLite/renderTime()
at com.greensock.core::SimpleTimeline/renderTime()
at com.greensock::TweenLite$/updateAll()
P.S. I’ve added a third panel of photos (9 photos in total). Does this make any difference?
Hi Lee, I figured it out. It was just a small mistake on my end. I forgot to give the enlarge mc an instance name. After that it started to work.
Thanks
I’m also trying to get this working and im getting the same errors as post 40 ( Aaron ) . I’m placing the COM folder in the Photopanels folder. Is that it?
Is there anyway to fix the enlarge bug. which is when the enlarge stays on the photo even when you are not rolling over the image?
Here is an example.
http://img29.imageshack.us/img29/8618/enlarge.jpg
did not modify the file at all, this is straight from the downloaded files.
Hello,
This was a great tutorial and just what I needed! How could I make it so the images all point to different links? I tried the forum, but no luck.
Thanks Lee!
I have the exact same problems as (40) Aaron.
I get a bunch of errors. I downloaded the tweenlite files from greensock
and put them in the same folder as the fla. Is this correct?