LoaderMax, XMLLoader,ImageLoader are pretty awesome class that can save you a lot of time.The part2 tutorial we are going to make a Simple Photo Viewer with those classes.You can download the latest version of the classes here.
Step 1: Save as New File
Open Main1.fla save as "Main2.fla".

Step 2: Nav_mc
Rename the layer called "nav_mc".Drag 8 btn_mc instances on the stage from the library panel.Resize them 50% in the transform panel.Make it a movieclip symbol and call it "nav_mc".Set a Instance name "nav_mc" and x:400,y:360 in the Properties panel.



Step 3: Description_txt and Photo_mc Layers
Create two more layers. Name them: "description_txt" and "photo_mc".

Step 4: Description_txt
Create a dynamic text.Select the dynamic text in the description_txt layer.Set a Instance name "description_txt" and x:25,y:280 in the Properties panel.


Step 5: Photo_mc
Create a gray(#333333) primitive rectangle 750×250 px and with no stroke. Make it a movieclip symbol and call it "photo_mc".Set a Instance name "photo_mc" and x:25,y:25 in the Properties panel.


Step 6: Get Some Images
Crop 8 images and save them in the "pictures" folder.
Size:750 x 250px
Name:photo01.jpg,photo02.jpg,photo03.jpg,photo04.jpg,photo05.jpg,photo06.jpg,photo07.jpg,photo08.jpg

Step 7: XML
XML file will be loaded by XMLLoader; this file will contain all information about images such as URL of the image, and description.
Open your favorite XML editor and add the following lines:
Save and name it "imagelist.xml" with Main2.fla.Light tour life images/photo01.jpg Dalongdong Baoan Temple images/photo02.jpg Country roads images/photo03.jpg Lakeside images/photo04.jpg Evening images/photo05.jpg TAIPEI INTERNATIONAL FLORA EXPOSITION images/photo06.jpg Flowers in the park images/photo07.jpg A tint of green images/photo08.jpg
Step 8: Document Class
Inside Flash IDE set Main2.as as your Document class.

Step 9: ActionScript
Create an ActionScript file.

Step 10: Save with Main2.fla
Name it "Main2.as", save it in the same folder as your Main2.fla.

Step 11: Main2.as
Main2.as structure will be like this...
package { public class Main2 extends Sprite { public function Main2() { } } }
Step 12: Import Necessary Classes
Start by importing these Classes inside your package:
package { import flash.display.MovieClip; import flash.display.Sprite; import flash.events.MouseEvent; import flash.text.TextField; import com.greensock.loading.LoaderMax; import com.greensock.events.LoaderEvent; import com.greensock.loading.XMLLoader; import com.greensock.loading.ImageLoader; import com.greensock.loading.data.ImageLoaderVars; import com.greensock.loading.display.ContentDisplay; import com.greensock.TweenMax;
Step 13: Variables
Inside your class define these variables:
public class Main2 extends Sprite { //Declare instance on the stage public var photo_mc:MovieClip; public var description_txt:TextField; public var nav_mc:MovieClip; //new XML instance private var xml:XML = new XML();
Step 14: Constructor
The constructor is a function that runs when an object is created from a class.
public function Main2() { //load xml loadxml(); }
Step 15: loadxml()
private function loadxml():void { //new XMLLoader instance and load imagelist.xml,when it complete execute completeHandler(). var xmlldr:XMLLoader = new XMLLoader("imagelist.xml", {onComplete: completeHandler, estimatedBytes: 50000}); xmlldr.load(); }
Step 16: completeHandler()
private function completeHandler(e:LoaderEvent):void { xml = e.target.content; //load the first description showDescription(1); //load the first photo showPhoto(1); //associates an onClick method to the button nav_mc.addEventListener(MouseEvent.CLICK, onClick); }
Step 17: onClick()
Let's now handle the CLICK MouseEvent:
private function onClick(e:MouseEvent) { //get BtnMC instance you click var _mc:BtnMC = e.target.parent as BtnMC; //get currentNum of BtnMC instance you click var _currentNum:int = _mc.currentNum; //display the current photo description showDescription(_currentNum); //according to _currentNum show the photo showPhoto(_currentNum); }
Step 18: showDescription()
private function showDescription(_int:int):void { //show photo description in the dynamic text description_txt.text = xml.picture[_int - 1].description; }
Step 19: showPhoto()
When you click button load image,it will create a new ImageLoader instance.
If you add this line below in the showPhoto()
trace(photo_mc.numChildren);You will find that "photo_mc.numChildren" is continuously increasing,it is also continuously occupy memory too.So we need to remove previous photo to free memory.(use removeChildAt() at first)
private function showPhoto(_int:int):void { //first time it will remove the gray rectangle,after that when new photo load,the previous photo will be removed to free memory. photo_mc.removeChildAt(0); //get current file path var fileSrc:String = xml.picture[_int - 1].src; //new ImageLoader instance,set width and height then load into photo_mc var imgldr:ImageLoader = new ImageLoader(fileSrc, new ImageLoaderVars().width(750).height(250).container(photo_mc).smoothing(true)); //when image is loaded complete,execute imageLoaded method imgldr.addEventListener(LoaderEvent.COMPLETE, imageLoaded); //ImageLoader start to load image imgldr.load(); }
Step 20: imageLoaded()
private function imageLoaded(e:LoaderEvent):void { //get currentTarget var _photo:ContentDisplay = LoaderMax.getContent(e.currentTarget.name); //add exposure effect from 2 to 1,when image loaded TweenMax.to(_photo, 0, {colorTransform: {exposure: 2}}); TweenMax.to(_photo, 1, {colorTransform: {exposure: 1}}); }
Step 21: The Complete Code
package { import flash.display.MovieClip; import flash.display.Sprite; import flash.events.MouseEvent; import flash.text.TextField; import com.greensock.loading.LoaderMax; import com.greensock.events.LoaderEvent; import com.greensock.loading.XMLLoader; import com.greensock.loading.ImageLoader; import com.greensock.loading.data.ImageLoaderVars; import com.greensock.loading.display.ContentDisplay; import com.greensock.TweenMax; public class Main2 extends Sprite { public var photo_mc:MovieClip; public var description_txt:TextField; public var nav_mc:MovieClip; private var xml:XML = new XML(); public function Main2() { loadxml(); } private function loadxml():void { var xmlldr:XMLLoader = new XMLLoader("imagelist.xml", {onComplete: completeHandler, estimatedBytes: 50000}); xmlldr.load(); } private function completeHandler(e:LoaderEvent):void { xml = e.target.content; showDescription(1); showPhoto(1); nav_mc.addEventListener(MouseEvent.CLICK, onClick); } private function onClick(e:MouseEvent) { var _mc:BtnMC = e.target.parent as BtnMC; var _currentNum:int = _mc.currentNum; showDescription(_currentNum); showPhoto(_currentNum); } private function showDescription(_int:int):void { description_txt.text = xml.picture[_int - 1].description; } private function showPhoto(_int:int):void { photo_mc.removeChildAt(0); var fileSrc:String = xml.picture[_int - 1].src; var imgldr:ImageLoader = new ImageLoader(fileSrc, new ImageLoaderVars().width(750).height(250).container(photo_mc).smoothing(true)); imgldr.addEventListener(LoaderEvent.COMPLETE, imageLoaded); imgldr.load(); } private function imageLoaded(e:LoaderEvent):void { var _photo:ContentDisplay = LoaderMax.getContent(e.currentTarget.name); TweenMax.to(_photo, 0, {colorTransform: {exposure: 2}}); TweenMax.to(_photo, 1, {colorTransform: {exposure: 1}}); } } }
Conclusion
Thanks for reading!Now we finish the part2 tutorial.Please feel free to drop a note for any comments, concerns, or suggestions.Here is cs4 and cs3 versions up on the zip file.
CS3 version:
Simple_Photo_Viewer_part2_cs3.rar
CS4 version:
Simple_Photo_Viewer_part2_cs4.rar
.
c'est un super tutoriel, clair, instructif, pour apprendre à coder proprement avec les outils de greensock. Merci
ReplyDeleteMax8371
Thanks for the response Max8371!
ReplyDeleteTo organize every step takes me a lot of time,but I am happy to see someone like it. :)
I recommend iDealshare VideoGo as the most professional audio converter and video converter.https://www.idealshare.net/3ga-to-mp3-converter.html
ReplyDelete