12
Dec
08

Grids: Image Gallery

By Zevan 17,707 views
1 Star2 Stars3 Stars4 Stars5 Stars (28 votes, average: 4.11 out of 5)
Loading ... Loading ...
Categories: Ch03: Properties, Methods, Events, Ch07: Motion and Ch13: Loading Assets

Making image galleries in flash is very common. There are lots of different approaches, but the basic concepts stay the same. They're usually XML driven and they usually have external image files that are dynamically loaded into Flash. This post contains an image gallery shell that builds off of the Grids: Arranging Clips post. This post assumes you are familiar with that post, and with AS3 XML parsing. We won't be building this image gallery from scratch. Instead, I'll walk you through the key aspects of the code This post also contains source for the shell with some TweenLite animation added.

This is the shell, simply click a thumbnail to view the full sized image:

This movie requires Flash Player 9. Please update your player.

I've included both this demo and the slightly more advanced TweenLite version within the same zip. Be sure to use image_gallery_simple.fla while reading through this post.

Download: Image Gallery Shells  Download Image Gallery Shells (297.6 KB, 2,848 hits)

Once you've downloaded the above zip, the first thing you should look at is the xml file:

SHOW PLAIN TEXT
XML:
  1. <gallery title="IMAGE GALLERY" folder="images/" cols="4" spacing="4">
  2.  
  3.    <image thumb="float_head_thumb.jpg" detail="float_head.jpg">
  4.     <![CDATA[
  5.       float head <br/>
  6.       - 2008
  7.       ]]>
  8.    </image>
  9.  
  10.    <image thumb="rubber_mask_thumb.jpg" detail="rubber_mask.jpg">
  11.     <![CDATA[
  12.       rubber mask<br/>
  13.       - 2007
  14.       ]]>
  15.    </image>
  16.  
  17.    <image thumb="resting_thumb.jpg" detail="resting.jpg">
  18.     <![CDATA[
  19.       resting<br/>
  20.       - 2007
  21.       ]]>
  22.    </image>
  23.  
  24.    <image thumb="red_in_the_face_thumb.jpg" detail="red_in_the_face.jpg">
  25.     <![CDATA[
  26.       red in the face<br/>
  27.       - 2007
  28.       ]]>
  29.    </image>
  30.  
  31.    <image thumb="noise_maker_thumb.jpg" detail="noise_maker.jpg">
  32.     <![CDATA[
  33.       noise maker<br/>
  34.       - 2007
  35.       ]]>
  36.    </image>
  37.  
  38.    <image thumb="neck_cramp_thumb.jpg" detail="neck_cramp.jpg">
  39.     <![CDATA[
  40.       neck cramp<br/>
  41.       - 2007
  42.       ]]>
  43.    </image>
  44.  
  45.    <image thumb="gaine_thumb.jpg" detail="gaine.jpg">
  46.     <![CDATA[
  47.       gaine<br/>
  48.       - 2007
  49.       ]]>
  50.    </image>
  51.  
  52. </gallery>

Often times, when i start on a small project, I'll start by writing out some XML. This works like a sketch, it gets me thinking about the programming and the way I need to set up my Flash file. This XML file is self-explanatory. Everything is wrapped up in the gallery node. Any attributes that I add to my top-most node always have some kind of global effect on the Flash file. In this case I have the title to show above the gallery, the folder where the images are located, the number of columns in the grid and the spacing between the thumbnails. Since they're in the xml I can change any of these attributes and not have to republish the SWF file. So if I wanted two columns, I could just change the cols attribute and that would be it:

This movie requires Flash Player 9. Please update your player.

This is the exact same swf, just the xml file has been changed

Each image node in the xml file contains an attribute for the thumbnail to use and the detail (or full sized) image. Any descriptive text that you want to appear below the full sized image is placed with the image node itself and wrapped up in a CDATA tag to allow for simple HTML formatting.

 

Loading the XML

The XML load code works together with the loading code for the actual swf. I like to use this technique for small scale projects:

SHOW PLAIN TEXT
ActionScript 3.0:
  1. stop();
  2. var galleryData:XML;
  3.  
  4. var galleryLoader:URLLoader = new URLLoader();
  5. galleryLoader.addEventListener(Event.COMPLETE, onGalleryDataLoaded,
  6.                                false, 0, true);
  7.  
  8. galleryLoader.load(new URLRequest("gallery.xml"));
  9.  
  10.  
  11. function onGalleryDataLoaded(evt:Event):void {
  12.     galleryData = new XML(evt.target.data);
  13.     // start checking if the movie is loaded
  14.  
  15.  
  16.     addEventListener(Event.ENTER_FRAME, onCheckLoaded,
  17.                      false, 0, true);
  18.     galleryLoader.removeEventListener(Event.COMPLETE,
  19.                                       onGalleryDataLoaded);
  20. }
  21.  
  22.  
  23. function onCheckLoaded(evt:Event):void {
  24.     if (root.loaderInfo.bytesTotal == root.loaderInfo.bytesLoaded) {
  25.         gotoAndStop("main");
  26.         removeEventListener(Event.ENTER_FRAME, onCheckLoaded);
  27.     }
  28. }

This code appears in the first frame along with a static text element on the stage that says "LOADING". The only trick in the above code is that we don't start checking if the movie has loaded until the XML has finished loading.

Once everything has loaded we go to the frame labeled "main" and remove the enter frame event.

 

The Main Frame

This is where all the rest of our code is. There is a dynamic text field on this frame with the instance name galleryTitle. There's also a movie clip with the instance name detail on this frame. Take a look within the detail movie clip before reading through this code if you have the FLA open.

This might look like a lot of code, but consider what we're actually doing... We're reading xml, loading external assets and doing detailed property manipulation. Take a minute to skim through the code and then move on to the explanation below.

SHOW PLAIN TEXT
ActionScript 3.0:
  1. var imgNum:int = galleryData.image.length();
  2.  
  3. var spacing:int = galleryData.@spacing;
  4.  
  5. var cols:int = galleryData.@cols;
  6.  
  7. var rows:int = Math.ceil(imgNum / cols);
  8.  
  9. var imgCount:int = 0;
  10.  
  11. var gallery:MovieClip = new MovieClip();
  12. addChild(gallery);
  13.  
  14. buildGalleryGrid();
  15.  
  16. var detailImage:Loader = new Loader();
  17. setupDetail();
  18.  
  19. function setupDetail():void {
  20.    detail.visible = false;
  21.    detail.buttonMode = true;
  22.    detail.closeMessage.mouseEnabled = false;
  23.    detail.desc.mouseEnabled = false;
  24.    
  25.    detail.addChild(detailImage);
  26.    // put border above loader;
  27.    detail.addChild(detail.border);
  28.    // make sure detail is above the gallery
  29.    addChild(detail);
  30.  
  31.    detail.addEventListener(MouseEvent.CLICK, onCloseDetail,
  32.                      false, 0, true);
  33. }
  34.  
  35. function onCloseDetail(evt:MouseEvent):void {
  36.    detailImage.unload();
  37.    detail.visible = false;
  38. }
  39.  
  40. function buildGalleryGrid():void {
  41.    for (var py:int = 0; py <rows; py++) {
  42.       for (var px:int = 0; px <cols; px++) {
  43.  
  44.          var thumb:Thumb = new Thumb();
  45.          thumb.scaleX = thumb.scaleY = .5;
  46.          
  47.          // because the registration is centered we make sure
  48.          // to position thumbs so that the upper left corner 
  49.          // is at the registration point of the gallery movieClip
  50.          
  51.          thumb.x = thumb.width / 2 + (thumb.width + spacing) * px;
  52.          thumb.y = thumb.height / 2 + (thumb.height + spacing) * py;
  53.  
  54.          gallery.addChild(thumb);
  55.  
  56.          // only add listeners and loader if thumb should be active
  57.          if (imgCount <imgNum) {
  58.  
  59.             var imageData:XML = galleryData.image[imgCount];
  60.            
  61.             var loader:Loader = new Loader();
  62.             var path:String = galleryData.@folder + imageData.@thumb;
  63.             loader.x = 0;
  64.             loader.y = 0;
  65.             loader.load(new URLRequest(path));
  66.             loader.contentLoaderInfo.addEventListener(Event.COMPLETE,
  67.                                             onThumbComplete);
  68.  
  69.             thumb.addChild(loader);
  70.             thumb.addChild(thumb.border);
  71.  
  72.             thumb.buttonMode = true;
  73.  
  74.             thumb.detail = galleryData.@folder + imageData.@detail;
  75.             thumb.desc = imageData;
  76.  
  77.             thumb.addEventListener(MouseEvent.CLICK, onThumbClick,
  78.                               false, 0, true);
  79.  
  80.             thumb.addEventListener(MouseEvent.ROLL_OVER, onThumbOver,
  81.                               false, 0, true);
  82.  
  83.             thumb.addEventListener(MouseEvent.ROLL_OUT, onThumbOut,
  84.                               false, 0, true);
  85.          } else {
  86.          
  87.             // thumb is inactive
  88.             thumb.alpha = .5;
  89.          }
  90.          imgCount++;
  91.       }
  92.    }
  93.  
  94.    // center the gallery clip
  95.    gallery.x = stage.stageWidth/2 - gallery.width/2;
  96.    gallery.y = stage.stageHeight/2 - gallery.height/2;
  97.    
  98.    // position and setup gallery title
  99.    galleryTitle.autoSize = TextFieldAutoSize.LEFT;
  100.    galleryTitle.text = galleryData.@title;
  101.    galleryTitle.x = gallery.x-2;
  102.    galleryTitle.y = gallery.y-50;
  103. }
  104.  
  105. function onThumbComplete(evt:Event):void {
  106.    var img:Bitmap = Bitmap(evt.target.content);
  107.    img.x = -img.width/2;
  108.    img.y = -img.height/2;
  109. }
  110.  
  111. function onThumbOver(evt:MouseEvent):void {
  112.    var thumb:MovieClip = MovieClip(evt.target);
  113.    gallery.addChild(thumb);
  114.    thumb.scaleX = thumb.scaleY = 1;
  115. }
  116.  
  117. function onThumbOut(evt:MouseEvent):void {
  118.    evt.target.scaleX = evt.target.scaleY = .5;
  119. }
  120.  
  121. function onThumbClick(evt:MouseEvent):void {
  122.    detail.visible = false;
  123.  
  124.    detail.desc.condenseWhite = true;
  125.    detail.desc.htmlText = evt.currentTarget.desc;
  126.  
  127.    try {
  128.       detailImage.close();
  129.    } catch (err:Error) {
  130.       // this is here in case another image
  131.       // is loaded before the detail has finished
  132.       // loading (not possible with current layout)
  133.       // trace(err);
  134.    }
  135.    detailImage.load(new URLRequest(evt.currentTarget.detail));
  136.    detail.visible = true;
  137. }

There are a few important things to note about this code. On lines 1 through 9 we set up some variables that relate to the thumbnail grid. Notice that we're populating some of these based on our XML document. On line 11 we create a movie clip called gallery. All the thumbnails are added to this movie clip. Whenever dealing with a large number of similar clips its always good to wrap them in a container. This makes it easy to treat them as a group.

On line 16 we define a loader that we then nest within the detail movie clip. This nesting occurs within the setupDetail() function defined on line 19. From lines 31 through 38 we add a listener and define a listener function for detail. When someone clicks on detail, it unloads detailImage and turns invisible.

We call buildGalleryGrid() on line 14, but it is defined on lines 40 through 102. This function is really the heart of the program. It attaches a grid of Thumb instances (Take a look in the library to see this clip). For the most part, this code is the same as it was in the Grids: Arranging Clips post. The main difference is that we create loader instances to nest within each thumbnail. We figure out which image to load by reading through the XML.

On lines 64 through 65, we start the loading process and listen for its completion. The listener function onThumbComplete() simply repositions the bitmap once its loaded. We do this because the registration point of our thumbnail is centered. On lines 74 through 75 we create two local variables on each thumbnail. Storing these values locally is very important because it allows us to use the same listener function for all thumbnails (see lines 120-136). This is possible because, unlike most AS3 classes, the MovieClip class is dynamic.

Lines 93 through 101 do some positioning so that the grid is always centered and so that the gallery title is always positioned relative to the grid. Lines 110 through 118 define straightforward over and out states for each thumbnail. The onThumbClick() function defined in lines 120 through 136, sets the text field detail.desc based on the local variable evt.currentTarget.desc.

Lines 126 through 133 try to close any existing url streams. It's good practice to make sure that a loader is only trying to load one asset at a time. Not doing so can cause inconsistent results. Line 135 calls the Loader.load() method of detailImage based on the local variable evt.currentTarget.detail. Lastly, we make detail visible so that the user gets loading feedback while the larger image loads.

 

TweenLite Version

The next thing to do is add some motion to the gallery. I used TweenLite to take the above demo and give it a bit of life. If you're unfamiliar with TweenLite, and would like to learn it, take a look at the TweenLite Introduction post. I added an enter button so that you could easily see the intro animation without refreshing your browser. The source file doesn't have this button.

This movie requires Flash Player 9. Please update your player.

 

Creating a More Modular Image Gallery

If you find yourself making lots of image galleries you might get tired of tweaking timeline code. When that happens you could consider creating a re-usable image gallery class. A future post will build on this shell to do exactly that.

Share This:
  • Digg
  • del.icio.us
  • Netvouz
  • DZone
  • ThisNext
  • MisterWong
  • Wists
  • blogmarks
  • BlogMemes
  • Fark
  • feedmelinks
  • Furl
  • Ma.gnolia
  • Netscape
  • Reddit
  • Slashdot
  • SphereIt
  • Spurl
  • StumbleUpon
  • Technorati
  • YahooMyWeb
  • BlinkList
  • DotNetKicks
  • LinkaGoGo
  • NewsVine
  • blinkbits
  • co.mments
  • MyShare
Print This Post Print This Post

33 Responses to “Grids: Image Gallery”

Feed for this Entry Trackback Address
  1. 1 joe Dec 28th, 2008 at 10:07 pm

    Just brought your book. I can not wait to learn and use this knowledge. I really like this image gallery.

  2. 2 Rich Jan 11th, 2009 at 10:08 pm

    @Joe, thanks very much!

  3. 3 Bruce Jan 13th, 2009 at 3:47 pm

    Hi,

    I live in South Africa and have found your book very beneficial as a budding web developer. This post has been great, thank you. I am trying to construct more than one xml gallery in a single fla and the following errors are outputted:

    TypeError: Error #1009: Cannot access a property or method of a null object reference.
    at portfolio_fla::MainTimeline/gd_buildGalleryGrid()
    at portfolio_fla::MainTimeline/portfolio_fla::frame15()

    Basicly, i've just tweaked the main timeline code to add extra galleries using 4 xml documents.

    Trust this makes sense.

    Really looking forward to the re-usable image gallery class. Thanks again.

  4. 4 Chase Jan 17th, 2009 at 1:14 am

    First off I love your book, working my way though it as we speak!!

    I am building a gallery very similar to this and would love to use this same format, however I would like to add a row of small thumbs to the bottom of the pop up image so the user can then select another thumb to view, and make this fully dynamic as well so it will become scrolling if there is more images than fit on the stage. How would I go about adding that functionality to this?

    Thanks!
    Chase

  5. 5 QStorm7 Jan 19th, 2009 at 2:28 am

    I bought your book, and I appreciate the help on you website.

    Great Work!

    QS7

  6. 6 isik Jan 21st, 2009 at 4:41 pm

    thanks

  7. 7 Mike B Jan 26th, 2009 at 12:55 pm

    Just wanted to say thanks for the great book and site too!

    I was also wondering if you could help me figure out (conceptually) how to expand on your gallery. I am wanting to add a feature that will calculate additional grids based on the total number of items in the xml. So that, for example, a "Next 8 Items >>" link would appear and display items 9-16 when pressed and so on.

  8. 8 Eric Feb 5th, 2009 at 12:45 am

    Thank for expanding on the grid examples (and a right on time AS3 book, my favorite).

    More curious than anything.

    During experimentation, if I introduce the large images as thumbs (instead of the thumbs), and adjust the scale params respectively, the grid breaks (Irregardless of the load routine and not changing any of the example code, other than ScaleX/Y).

    Increasing the size of the Thumb class shape to match the larger size, does not fix it.

    Question:
    What dependency do you think is breaking the grid when using large image sizes and is it possible for this application to resize large images down to thumb size, or is it dependent on thumb resizing/batch processing?

    When analyzing the for loop logic, it looks like simple math, what does the image size matter?

    Sample my XML

    Using a different load routine.

  9. 9 chris Feb 12th, 2009 at 10:41 pm

    this is a great gallery, however, when i change the xml file to load my own images - which are saved at exactly the same resolution, the images look pixelated and squashed slightly in the y direction..

    i've tried to save it with a smaller y resolution, but then it leaves a gap at the bottom.

    it seems my resolution is fine...i've tried saving as high res jpgs and png files and it still looks the same...

    my images are screenshots - could this be why?

  10. 10 Roman Feb 26th, 2009 at 9:06 pm

    Hey there,

    firstable i have to say great article on how to create a xml based thumbnail grid.

    i would like to know how to do a little preloader for every single thumbnail loaded content and specially interested in how to create a next/preview function to the big size loaded content when clicking on a thumb and howto dynamicly tween resize big images if you navigate from one to the other.

    thanks in advance!

  11. 11 David Mar 5th, 2009 at 6:49 am

    Awesome tutorial and wonderful book!! Very helpful!!

    Just one question regarding this tutorial: I want to load the images from the XML-File by 2 different category parameters. I tried it with something like this...

    if(galleryData.image.(@category == "art"))
    {
    imgNum = galleryData.image.(@category == "art").length();

    //...load appropriate thumbnails...
    }

    I've also overwritten the 'imgNum'-variable to match the category parameter, but it doesn't seem to work this way. Any ideas, anybody...?!?!

  12. 12 Alan Collins Mar 5th, 2009 at 10:18 am

    I am building a website for a middle school magnet program and am using 4 instances of your gallery. three are pages for events, field trips etc for each grade - 6th, 7th & 8th. The fourth is a gallery of the teachers' photos and bios. I can use the desc text field for the bio and would like to add dynamic text fields for the teacher, grade & subject. I added a Detail1_mc with the text fields and put the new elements in the image node of the XML file. I can trace the data for each element with galleryData.image.@teacher (or @grade or @subject). I can not get the individual data for the current target. Any ideas of what I'm doing wrong?

    I'm enjoying your book and hopefully when I finish reading it I'll be a lot better at this than I am now.

    Thanks,

    Alan

  13. 13 Zevan Mar 25th, 2009 at 9:57 pm

    It's hard to say exactly what's wrong with your code without seeing it. Can you paste the code where you're having trouble reading the currentTarget?

  14. 14 Persian Version Mar 30th, 2009 at 5:59 am

    Guys, Incredibly Helpful!!
    Building on the project with a re-usable image gallery class would be really apprieciated.
    Please do this ASAP.

    How about touching on Horizontal Scrolling Slideshows as well you see very often? I am curious about the process of setting up a horizontal scrolling slideshow that reacts to where the mouse is placed over the row?

    Many thanks.

  15. 15 Rich Mar 30th, 2009 at 6:03 am

    @Persian:

    "Please do this ASAP."

    Slow down, Cowboy. Heh.

  16. 16 aaron Apr 1st, 2009 at 5:41 am

    Hi Zevan I am not sure if this is the right why to get my answer I am new to Flash I have read your book learn ActionScript 3.0 I understood 70% of it, some of it was hard going, however I am totally lost on TEXT Using a Multiuse Text Loader your book states "To use this class all you need to do is specify the path to data and the type of data you need to load' OK so the answer is probably starring me right in the face however my mind is blank. could you send me a generic example code that Specifies a path to XXXX data and bring it up to a XX frame or the stage and not the output panel. also what is even more important to me is how to make the(nav.xml) XML nav bar work from chapter 14 even though I have read the chapter two or three times I have know idea how it works, what am I missing? how can I make the links work could you send me an example of how to make that type of button work for example how would I bring up a video or an image or a text page to the stage with out loosing the menu bar or using a timeline thank you
    sincerly need your help
    Aaron Robson

  17. 17 Persian Version Apr 6th, 2009 at 4:08 am

    Rich, sorry to be so pushy :-) These posts are extremely helpful, keep rocking...

  18. 18 aaron Apr 10th, 2009 at 7:04 am

    HI Zevan I have just finished your book learning ActionScript 3
    good book however I am having problems with chapter 14 I can not get the buttons on the XML navigating bar to work. it states on page 326 this is the example button function for this exercise in the final project that can be found in the accompanying source files on the companion wed site the path is used to load some of the demo files. well I can not find this info and I have spent 2 days trying to make the link work and not just trace to out put panel. so could you please direct me to the info or just send me an example code for this purpose that makes the buttons work below is the code from the book thanks for your help Aaron

    addEventListener(MouseEvent.CLICK, onClick, false, 0, true);
    }

    private function onClick(evt:MouseEvent):void {
    trace(_label.text ": path = " _projectNode.@path);

  19. 19 Christina Apr 25th, 2009 at 9:58 pm

    thanks for great tuts and book!

  20. 20 Neve Jun 21st, 2009 at 2:48 am

    I am having trouble centering the loaded detail image and sizing the border to fit the image size. My images are all different sizes and I have too many to resize them to fit the layout. Many are portrait. If I try to use the stage width and height to center, the images load in the bottom right corner.

    I would have thought that these lines were to size the border to the image? If not what are they for?
    detail.border.width=detailImage.width;
    detail.border.height=detailImage.height;

    If I could figure out this issue this gallery would work really well for me.

  21. 21 Ashveer Jul 29th, 2009 at 1:47 pm

    Hey i managed to get ur "image_gallery_simple.fla" to work. Bt now i want to put this in my website bt its complicated. The way i have got my site layed out is complicated, bt im going to try and explain nd hope you can help me. 'Entire_site_mc' is my whole site in this movie clip, inside that i have 'menu_mc' for my buttons, 'allPages_mc' for my pages, inside 'allPages_mc' i have each page on key frames which are labeled. All my pages are movie clips because they have animations in them, my portfolio page is the most important because that has like another whole site in it just for my portfolio, from there i have 'portmenu_mc' for menu, 'portPages_mc' for my portfolio pages. Now i need to put your "image_gallery_simple.fla" into a movie clip so i can drop it into 1 of my portfolio pages and make it work when i click on a specific portfolio button. But when it appears its still needs to be active.

    Thanx

    Yours Sincerely
    Ashveer

  22. 22 Ashveer Jul 30th, 2009 at 7:17 pm

    Please Help me I need assistance asap.

  23. 23 Dean Nov 11th, 2009 at 5:25 am

    I'm a newbie and I reading your book. I have downloaded the "image gallery shells" zip.
    I am working on CS4 and when I open up the "simple gallery" fla and test the movie everything works great.
    When I test the animated/tweenlite movie it doesn't work. I downloaded the newest tweenlite for as3.
    I imported the package at the top of the actionscript ..."import com.greensock.*;".
    The animation happens on the thumbs but the thumbs when clicked don't show the enlarged detail.
    Is this because I'm using a newer version of tweenlite than you? Is it because I'm using Flash cs4 rather than cs3 as you did?

    Any help would be profoundly appreciated. Thanx

  24. 24 ezez Dec 7th, 2009 at 9:17 am

    To the people having gs issues try reloading the .fla after you put the folder in the directory. Also make sure the import statement corresponds with folder names com>gs

  25. 25 john andeson Dec 8th, 2009 at 10:11 pm

    Hi, I have been using your book as a source for learning AS 3.0.
    I recently tried to use your gallery grid but keep running into two errors that have me feeling lost.
    I created an xml list of my images and followed the steps outlined in your article.

    Everything seems to stop at var thumbs:Thumb = new Thumb();

    I keep getting: Type was not found or was not compile-time constant:Thumb.
    And/ Call to a possibly undefined method Thumb.
    What do I need to do to correct these errors.
    I feel like I need to declare a public function but I'm really just learning AS 3.0.
    Thanks for our help.
    John Anderson

  26. 26 Rich Dec 8th, 2009 at 11:39 pm

    @John, Thumb is a Library asset in the sample code FLA. The symbol is published with a Linkage class so you can create an instance of that class and add it to the display list at runtime. If you don't have the Thumb symbol in your Library, Flash will complain that it doesn't know what Thumb is.

  27. 27 Zevan Dec 8th, 2009 at 11:41 pm

    @John ... sounds like you need to make sure to export your Thumb movieClip for ActionScript from your library... right-click or control-click (mac) on the Thumb symbol in your library and check the "export for actionscript" checkbox. If you don't see that checkbox click on the button that says "Advanced" and it will show up.

  28. 28 Zevan Dec 8th, 2009 at 11:48 pm

    @Neve you should check out this code snippet over on actionsnippet.com. I think it will help you to do what you want: http://actionsnippet.com/?p=221

  29. 29 john andeson Dec 9th, 2009 at 12:57 am

    Thanks Everyone,

    It was staring me right in the face. I was focused so intensely on the code that I did not look closely at my library and the Thumb_mc and Border_mc were not included in my version of the "Gallery".

    John

  30. 30 Luis Feb 1st, 2010 at 5:20 am

    I'm a newbie and I reading your book. I have downloaded the "image gallery shells" zip.
    I am working on CS3 and when I open up the "simple gallery" fla and test the movie everything works great.
    When I test the animated/tweenlite movie it doesn't work. I downloaded the newest tweenlite for as3.
    I imported the package at the top of the actionscript ..."import com.greensock.*;".
    The animation happens on the thumbs but the thumbs when clicked don't show the enlarged detail.

    I have the same problem and I don't see any answer to that

    I'm also saying: Any help would be profoundly appreciated. Thanks

  31. 31 Luis Feb 2nd, 2010 at 12:26 am

    I found two solutions. If you download the new twenlite which now comes in a folder with a new name(not gs)and correct the path, it does not give you any error but you are not able to see the big images,
    at:function onCloseDetail(evt:MouseEvent):void {
    // only allow it to be closed it itas at least 90% opaque
    if (detailImage.alpha>.9){
    detailImage.unload();
    TweenLite.to(detail,.5, {autoAlpha:0});
    }
    }
    I added:
    detailImage.unload();
    detail.visible = false; so it reads like this:

    function onCloseDetail(evt:MouseEvent):void {
    // only allow it to be closed it itas at least 90% opaque
    if (detailImage.alpha>.9){
    detailImage.unload();
    TweenLite.to(detail,.5, {autoAlpha:0});
    detailImage.unload();
    detail.visible = false;
    }
    }
    And at:function onThumbClick(evt:MouseEvent):void {
    TweenLite.to(detail,.5, {autoAlpha:1});
    I changed it to this:
    function onThumbClick(evt:MouseEvent):void {
    detail.visible = true;
    TweenLite.to(detail,.5, {autoAlpha:1});
    The second solution is that I found an old versuon of twenlite with the folder name "gs"
    and with this everything worked fine without any code change.

  32. 32 Rich Feb 2nd, 2010 at 12:31 am

    Luis, great work. The issue behind this is that, when the v11 tween library was released, GreenSock changed the architecture a bit, and TweenLite was affected. As you noticed, the package changed and an issue or two arose. I think Zevan has plans to update this and the TweenLite posts sometime this week, to reflect the current TweenLite package directories. Thanks for sharing your solutions!

  33. 33 Imran Ali Feb 26th, 2010 at 12:40 pm

    Your book is the best resource for Learning ActionScript, you guys are the best, also the article you have written for Devx is very encouraging, thanks for the efforts.

Leave a Reply

« Flash on the U.S. Beach
Wow. Flash on the Beach Miami »