Creating a Dynamic Portfolio in Flash We previously published a tutorial on how to create a simple portfolio in Flash that...
 Well start off with the images as stated earlier. We will use the Loader Component to load our images, so once you have o...
comp3_btn respectively starting from the top. Assign the instance name main_mc to our main display component at the centre...
portfolioLoader("image3.jpg"); } Unlike the first part, I did not provide you with the external text that will be loaded i...
 We will now have to set this as a dynamic text field and give it an instance name so that we can control its contents via...
 This should complete the setting up of the stage for loading the external textual content. We will now add the required c...
comp1_btn.contentPath = "thumb1.jpg"; comp2_btn.contentPath = "thumb2.jpg"; comp3_btn.contentPath = "thumb3.jpg"; function...
Upcoming SlideShare
Loading in …5
×

flash : (as2) Membuat gallery foto sederhana

3,381 views
3,259 views

Published on

tutorial membuat album foto sederhana dengan menggunakan adobe flash - actionscript 2

2 Comments
0 Likes
Statistics
Notes
  • Be the first to like this

No Downloads
Views
Total views
3,381
On SlideShare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
47
Comments
2
Likes
0
Embeds 0
No embeds

No notes for slide

flash : (as2) Membuat gallery foto sederhana

  1. 1. Creating a Dynamic Portfolio in Flash We previously published a tutorial on how to create a simple portfolio in Flash that features a selection of thumbnails and an image display unit. This tutorial will teach you how to create an advanced portfolio that dynamically loads images and text from external sources. An example SWF movie could be seen below featuring images and texts which are being loaded at real time from external image and text files.  The movie that we see above loads all the images, their titles, and the description from external files that are loaded when the user clicks on the specified button. Not only that this makes updating the content of your portfolio much easier as you will only have to alter your text files and the images without touching your FLA again, but it also gives the user the choice to load whatever content he chooses to view instead of forcing him to load all the content in advance whether he ends up watching it or not. This is an intermediate level tutorial that will require basic knowledge on how to use the Loader Component, the LoadVars Class, and functions. I have previously written short tutorials on these three topics and you should be able to follow this tutorial easily if you read these three pieces before attempting this tutorial. This tutorial will be divided into two parts: the first will deal with the images and the second will deal with the text. Creating a preloader for those images and text goes beyond the scope of this tutorial and hopefully will be explained in a future tutorial.  Part I ‐ Loading Images Dynamically I will provide you with all the material that you will need to follow this tutorial so that you can concentrate on learning how to make it work instead of worrying about the images and the graphics. The following zip file contains the FLA (Works with MX2004 and later) file with the background graphics ready for you. The zip file also contains three small thumbnails and three larger copies of the images. You will need to extract all these from the zip file and place them in a single folder for this tutorial to work. 
  2. 2.  Well start off with the images as stated earlier. We will use the Loader Component to load our images, so once you have opened your FLA, access the Components Panel (Window>Components) and drag a copy of the Loader Component ‐ it should be found under the User Interface category. You will have to place four of these in our Components Layer on the timeline, the three vertical ones will act as our buttons while the main one in the centre will load our larger copies of the images. You can resize them using the scale tool and the properties panel to reach a result similar to the one below. (The dimensions of a thumbnail box is 90x60, while the main display box is 340x200 ‐ you can precisely set these using the properties inspector.)    We will now give our components instance names to be able to manipulate them via ActionScript. Access the Properties Inspector and give the side components the names comp1_btn, comp2_btn, 
  3. 3. comp3_btn respectively starting from the top. Assign the instance name main_mc to our main display component at the centre.   Its time to put the code, click on the single frame in our Actions layer and then access the Actions (Right click the frame>Actions) to assign our script to the timeline and not any of the objects. You should put all your code in a single place on the timeline instead of scattering the code all over the place. Well start off by simply loading all of our thumbnails of the buttons. This should be easy if you read the other Loader Component tutorial: comp1_btn.contentPath = "thumb1.jpg"; comp2_btn.contentPath = "thumb2.jpg"; comp3_btn.contentPath = "thumb3.jpg";  You can test the movie to see the buttons take their images if you would like to. We will now make each of these components a button that tells the main component to load a specific image according the button clicked. Any movie clip in modern Flash can act as a button by simply attaching a button event handler property such as .onRelease. We will combine the usage of this with a function to make the scripting faster and to reduce the amount of code written. You should review the functions tutorial if you do not know how to use functions. Our function will simply tell the main component to load the image that we specify, button 1 will load image 1, button 2 will load image 2, and button 3 will load image 3.  function portfolioLoader (image) { main_mc.contentPath = image; } comp1_btn.onRelease = function (){ portfolioLoader("image1.jpg"); } comp2_btn.onRelease = function (){ portfolioLoader("image2.jpg"); } comp3_btn.onRelease = function (){ 
  4. 4. portfolioLoader("image3.jpg"); } Unlike the first part, I did not provide you with the external text that will be loaded into your SWF movie. We will have to start by creating those text files. The portfolio we are creating will load (1) the title of each item and (2) its description from an external text file that we can update at any time without going back to the FLA. We will create three text files for each of our items in the portfolio. Open the folder that contains your FLA, SWF, and your image files and create three text files named text1.txt, text2.txt, and text3.txt.    Each of these files will contain a title and a description. We will use the variable name theTitle and theDescrip to label our content. Revise the LoadVars tutorial if you do not understand how this works. The contents of the first text file should be like this: theTitle=Bangles&theDescrip=This is the description of my first image.    Edit the contents of the second and third text files to have a title and a description for the other items. Make sure that you do keep the variable identifiers as theTitle and theDescrip. Go back to Flash when youve done this easy job.  Our external content is now ready, we will create the text fields at which this content will be displayed when loaded. Well start with the Title field, use the text tool to create a text field in the layer labeled Text to create a text field similar to the one displayed in the image below.  
  5. 5.  We will now have to set this as a dynamic text field and give it an instance name so that we can control its contents via ActionScript. Access the Properties Inspector and change the Text Type to Dynamic, then assign the instance name myTitle_txt to the text field. You can also configure the other properties of the text such as the size and the style, but remember to embed the font characters if you would like to use any special font for your text. Revise the LoadVars tutorial for more details on this.    Create another text field for the description content. You will have to change the text type to Dynamic and then assign the instance name myDescrip_txt to it.  
  6. 6.  This should complete the setting up of the stage for loading the external textual content. We will now add the required code to command the buttons to load the text when needed. Right‐click the only frame in the Actions layer and click on Actions. Our current code should look like this: comp1_btn.contentPath = "thumb1.jpg"; comp2_btn.contentPath = "thumb2.jpg"; comp3_btn.contentPath = "thumb3.jpg"; function portfolioLoader (image) { main_mc.contentPath = image; } comp1_btn.onRelease = function (){ portfolioLoader("image1.jpg"); } comp2_btn.onRelease = function (){ portfolioLoader("image2.jpg"); } comp3_btn.onRelease = function (){ portfolioLoader("image3.jpg"); } We will edit our portfolioLoader function to load the external text and will give it an extra parameter to put the name of our text file in it. You will then have to put the name of each text file to load in below as illustrated.  
  7. 7. comp1_btn.contentPath = "thumb1.jpg"; comp2_btn.contentPath = "thumb2.jpg"; comp3_btn.contentPath = "thumb3.jpg"; function portfolioLoader (image, textFile) { main_mc.contentPath = image; myData = new LoadVars(); myData.onLoad = function() { myTitle_txt.text = this.theTitle; myDescrip_txt.text = this.theDescrip; }; myData.load(textFile); } comp1_btn.onRelease = function (){ portfolioLoader("image1.jpg","text1.txt"); } comp2_btn.onRelease = function (){ portfolioLoader("image2.jpg","text2.txt"); } comp3_btn.onRelease = function (){ portfolioLoader("image3.jpg","text3.txt"); } This should conclude our tutorial, test the movie to see your text and images loaded at the command of the user. I hope that you learnt how to use all the various skills taught in the previous tutorials to create a practical portfolio such as this one. Here is the FLA for the end result, if you have any questions or other queries related to Flash feel free to post at the Oman3D Forum. ‐ End of Tutorial.    

×