A cool and general purpose 3d image/media grid/wall gallery, with smooth transitions, clean style and lots of XML argument adjust, which is very flexible to satisfy different kinds of needs.
FULL SCREEN PREVIEW
Key Features
3D
1. Carefully treat the interactive behavior in 3d environment. Make the transitions smooth, clean and trustable.
2. The 3D interactive could be adjusted through some arguments, like rotate range, rotate speed and icon pop up z depth.
3. Build with Flash CS4 3D API , which requires no 3rd-part 3d package, makes it very light(only 60kb for the gallery part) and extremely easy to be integrated into your original project or to be modified for your own needs.
APPLICATION
1. XML Driven, Dynamic Smooth Refresh Solution with xml.
2. Support Fullscreen both for the whole application and the video player.
3. These features of the image icon could be customized: the image grid row number and column number, the icon width/height, bg color, border width/height, the width/height between the two icons.
4. Tooltip on/off.
5. Pre/Next functions when in the highlight status.
5. Information text field for the highlight status, with html and scrollbar support, autohide.
6. The icon could be image/swf.
7. The background color and alpha of the whole application could be customized.
9. Carefully treat on memory recycle and performance.
10. Build with AS3 , both support flash cs4+ and flex builder 3+ (with flex sdk 3.4+).
11. Well organized UI resources in fla, good formatted/commented code and documents.
MEDIA
1. The media (video/audio) player used here is a solid one which has been sold on activeden (my product), check it here:
http://activeden.net/item/simple-as3-videoaudio-media-player/129942
With simple style but full functions, makes the media play part become very stable and trustable.
2. Smooth played time seek for video/audio player (an improvement of the NetSteam.time, which is unstable), buffered status included.
3. Draggable for the loaded part.
4. Loop, Autoplay on/off.
5. Play, Pause, FullScreen(for video player) and Sound Control.
XML Node Explanation
GLOBAL SET
<global>
<!--the logo on the up left corner-->
<logo offx="10" res="imgs/logo.png" offy="10" link="http://www.activeden.net" />
<rownum>4</rownum><!--the image row number-->
<colnum>5</colnum><!--the image column number-->
<bgcolor>0x000000</bgcolor><!--the whole background color for the gallery-->
<bgalpha>1</bgalpha><!--the whole background alpha for the gallery-->
<tooltip>0</tooltip><!--tooltip on/off 0:off,1:on-->
<highlight><!--setting for the highlight part -->
<maskcolor>0x000000</maskcolor><!--the color of the highlight mask layer-->
<maskalpha>0.7</maskalpha><!--the alpha of the highlight mask layer-->
</highlight>
<!--The Set for the unit icon (global set)-->
<units>
<bg>
<bgcolor>0xeeeeee</bgcolor>
<bg_highlight_color>0x0098ff</bg_highlight_color>
<!--the extended part(just like the border) for the image icon-->
<extended>
<width>2</width>
<height>2</height>
</extended>
</bg>
<width>100</width><!--the icon unit's width and height-->
<height>75</height>
<w_tween>25</w_tween><!--the width len bewteen two icon images-->
<h_tween>25</h_tween><!--the height len bewteen two icon images-->
<offz>50</offz><!--the unit pop up depth(recommand:0-100)-->
</units>
<threed>
<!--The Rotation Range Ratio around XAxis,recommand:0.01-0.08-->
<rotatespanxaxis>0.043</rotatespanxaxis>
<!--The Rotation Range Ratio around YAxis,recommand:0.01-0.04-->
<rotatespanyaxis>0.0214</rotatespanyaxis>
<!--The Rotation Speed around XAxis,recommand:0.1-0.7-->
<rotatespeedx>0.2</rotatespeedx>
<!--The Rotation Speed around YAxis,recommand:0.1-0.7-->
<rotatespeedy>0.2</rotatespeedy>
</threed>
</global>
MEDIA UNIT SET
<!--the image node sample--> <unit> <icon>imgs/1_m.jpg</icon> <media_res>imgs/1_b.jpg</media_res> <title><![CDATA[The Image Size Set Sample]]> </title> <information><![CDATA[HTML FORMAT SUPPORT]]> </information> <link />http://www.activeden.net <!--optional arguments--> <!--the image width&height limit,the image will be zoom to this size limit, but keep the ratio--> <width>600</width> <height>450</height> </unit> <!--the video node sample--> <unit> <icon>imgs/video_1.jpg</icon> <media_res>videos/video_1.flv</media_res><!--the media link--> <title><![CDATA[The Video/Audio Title]]> </title><!--the media title--> <information><!--the media information--> <![CDATA[Html Formatted Support]]> </information> <link />http://www.activeden.net<!--the jump link for the title field--> <!--optional arguments--> <!--the video width&height limit--> <width>600</width> <height>450</height> <autoplay>0</autoplay><!--0:not auto play,1:auto play,default:1--> <loop>0</loop><!--0:not loop,1:loop,default:0--> <bgcolor>0x999999</bgcolor><!--the bgcolor for the player tool bar bg,default: 0xe6e6e6--> </unit> <!--the audio node sample--> <unit> <icon>imgs/audio_1.jpg</icon> <media_res>audios/audio_1.mp3</media_res><!--the media link--> <title><![CDATA[The Video/Audio Title]]> </title><!--the media title--> <![CDATA[ Html Formatted Support]]> <!--the media information--> <link />http://www.activeden.net<!--the jump link for the title field--> <faceimage>swfs/swf_1.swf</faceimage><!--the face image/swf for the audio player--> <!--optional arguments--> <!--the audio face image width&height limit--> <width>450</width> <height>350</height> <autoplay>0</autoplay><!--0:not auto play,1:auto play,default:1--> <loop>0</loop><!--0:not loop,1:loop,default:0--> <bgcolor>0xa6c8e2</bgcolor><!--the bgcolor for the player tool bar bg,default: 0xe6e6e6--> </unit>
Credits
The author of the great preview videos which been used here is Dorde. If you are interested with any of them, you can go to below links to buy:
http://videohive.net/item/end-titles-moonlight-music/61039
http://videohive.net/item/movie-intro/121951
The author of the great preview audios which been used here is Slats. If you are interested with any of them, you can go to below links to buy:
http://audiojungle.net/item/french-guitar-jazz/13832
http://activeden.net/item/electronica-theme/9601
Easy Use Sample
Sample Code 1
//the stage’s align and scalemode setting
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
//do the init
var imageGallary:ThreeDMediaGridGallery = new ThreeDMediaGridGallery();
imageGallary.init("xmls/config1.xml");//do init before add it to the stage.
addChild(imageGallary);
Sample Code 2 (Smooth Refresh Mode)
//the first init
imageGallary.init(some_xml_address);
//as there is a fade out effect when doing dispose, its need a listen function to get the end of dispose
this.addEventListener("GALLERY_DISPOSE_OVER",galleryDisposeOver);
//….sometimes later
imageGallary.dispose(); //dispose before re-init
private function galleryDisposeOver(evt:Event):void
{
imageGallary.init(some_other_xml_address);
}
If you have problems using this 3d image/media grid/wall gallery or want to modify the code for your own specific needs, just leave a comment here let me know.