• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 365
  • Last Modified:

Flash Image Gallery "pushes" other images

I would like to make an image gallery like the posted link using actionscript and external images. I need there to be more than one row of images, and they are both portrait and landscape. I have some actionscript under my belt, but only 1.0. Any possibility someone knows of a good tutoral or something that can point me in the right direction?
0
dolcezzza
Asked:
dolcezzza
  • 9
  • 6
1 Solution
 
julianopolitoCommented:
you need actionscript 3 code?
0
 
dolcezzzaAuthor Commented:
that would be fine, or 2 would be ok as long as it works.
0
 
julianopolitoCommented:
The link you postes is not working
0
Take Control of Web Hosting For Your Clients

As a web developer or IT admin, successfully managing multiple client accounts can be challenging. In this webinar we will look at the tools provided by Media Temple and Plesk to make managing your clients’ hosting easier.

 
julianopolitoCommented:
*posted
0
 
dolcezzzaAuthor Commented:
The link is working fine for me, but if you go to http://ohmyflash.com/ click photo gallery on the left vertical menu, then go to page 3 you will see it. It is #122 with a black background.

Thanks.
0
 
julianopolitoCommented:
nope. maybe it is my provider. I can't access neither. I'll try to access via some online proxy
0
 
dolcezzzaAuthor Commented:
Since I didn't get a solution... I'd like to modify my request a bit. It doesn't have to be exactly like the example, I just need something that sets up thumbnails in a grid style, the images grow when you click on them, and it moves the other thumbnails out of the way. Even something along the lines of the osx style dock (genie or tsunami effect) but without the side images growing with it. I could probably figure out how to add captions and multiple rows. Any ideas?
0
 
julianopolitoCommented:
I can't write a full example right now, but it is kind of simple. Then you should hndle preload and stuff. The tricky part would be the grow->push other items.
//Actionscript 3
var icons:Array = [ic1,ic2,ic3,ic4,ic5,ic6,ic7,ic8,ic9,ic10,ic11,ic12,ic13,ic14,ic15,ic16];// let's say they are all in the library, exported for actionscript
var numCols:int = 5;//number of colums
var xgap:int = 10; // gap between icons in x axis
var ygap:int = 20;// gap btwn icons in y axis

for(var i:int=0, col:int=0, row:int = 0;i < icons.length;i++){
        var icon:DisplayObject = stage.addChild(new icons[i]());
        icon.x = (50+xgap)*col;//Let's assume all icons are same size (50x50 pixels) for the sake of brevity
        icon.y = (50+ygap)*row;
            icon.addEventListener(MouseEvent.ROLL_OVER,onItemOver);
            icon.addEventListener(MouseEvent.ROLL_OUT,onItemOut);
        col++;
        if(col == numCols){
                 col = 0;
                 row++;
         }
}

function onItemOver(e:MouseEvent):void{
      e.currentTarget.scaleX = 1.3;//scales current over object to 130% scale
      e.currentTarget.scaleY = 1.3;
}
function onItemOut(e:MouseEvent):void{
      e.currentTarget.scaleX = 1;//scales current over object back to 100% scale
      e.currentTarget.scaleY = 1;
}


this works, but will not push other images. For that you should add to the listeners functions so that whenever an item is moused over you should update other items positions. I'll try completing that later, now I can't. hope that gives you a first idea
0
 
dolcezzzaAuthor Commented:
Thanks... I have a better example of what I'm looking for:
http://www.flashloaded.com/flashcomponents/gridnavigation/?id2=htscgrid
I'm going to try to play with what you gave me so far, but the thumbnails are both horizontal and vertical.
If it's too difficult I may just crop them, but I really need the full version to be uncropped.

If you get the chance later, any help would be appreciated!
If this is a large amount of work, I'd be happy to increase the points if you need them!

0
 
julianopolitoCommented:
As I said, the thing you want , it is very difficult for one to simpy make to you here. I gave you the base to understand how to layout the grid, but the logic to have things animating is far more difficult. This would require lots of other actions and bindings in code, and a very complex algorithm.
About the different size images, you can make that on the basis I gave you, just change the calculus for total row size and column size. For every item you need to calculate the sum of all previous items.
For this to animate when clicked,  you need to integrate the animation algorithm and code so when an item is clicked you should update all other items in each animation cycle, so they are in sync.

It is a bit complicated.Here there is a tutorial that has some of the logic I think you may find useful, but it is in spanish:
Read this first to learn some basic stuff:
http://www.cristalab.com/foros/viewtopic.php?t=32086&highlight=
here you will find algorithm and explanation for a mac osx like menu:
http://www.cristalab.com/tips/39041/crear-menu-dock-de-mac-os-x-en-flash

Hope that helps. If you need that to be done, you can hire me at julianopolito at gmail. Sorry I can't do more for you here.

0
 
dolcezzzaAuthor Commented:
I apologize if I made it sound like I wanted you to do it for me, I was really looking for a tutorial, or guidance as far as how to edit an existing tutorial.
I wish what you linked to wasn't Spanish, unfortunately I don't know a word of spanish, but it looks like it may have been along the right lines.
This is a learning project, and unfortunately has no budget, which is why I didn't just buy the component itself. I don't know if I bought the component you can see the actionscript. The first one I listed, I considered buying but I emailed them to see how it handles more than 8 images in a row, and if it can be changed to fit portrait and landscape images, and they don't get back to me. If I thought I could change it to suit my needs and see to learn from it, I'd gladly shell out the few dollars for it.
Thank You for your help, I'm going to leave the question open for a bit and play with what I have... maybe someone else will come up with a tutorial or something to help me.
0
 
julianopolitoCommented:
You can just pass that tutorial I sent you over some translation software. I did that in google for you:

http://translate.google.com/translate?u=http%3A%2F%2Fwww.cristalab.com%2Ftips%2F39041%2Fcrear-menu-dock-de-mac-os-x-en-flash&langpair=es%7Cen&hl=pt-BR&ie=UTF-8

Think here you can have a great start.
" I apologize if I made it sound like I wanted you to do it for me "
Don't worry , you did not, but I was just explaining that to give you instructions I would have to create and comment all for you, and I really do not have time to do that other than really working on it and writing a tutorial.

Any how, take a look at the link now, I think you can read and uderstand most of it. Then put the code into the translator (http://www.google.com/language_tools?hl=en), and translate the comments. I think you will be fine with that and I also save you from learning spanish in a week just to read the page.
0
 
julianopolitoCommented:
Here is a btter traslation of the comments (i did some fixing because the author mispelled some words in spanish, and also google had a hard time with formatting)

The code may not be correct, but the comment is better, so look here at the comments, and look at the code in the original link. replace comments
/ / = Align bottom; 
/ / This will make that point is a centre half in case we need to reposition it, the point 1.1 
/ / Always will be the point in the middle of this menu, is to assign variables to be flexible 
/ / If we need to do something with it 
Centerx = 0; centery = 0; 
/ / We set the menu items to know what we need to go to make the calculations 
Menucount = 6; 
/ / Width establish that the items are to make it dynamic, I am the last and assign the width 
/ / Items to be excellent should have the same anchurami 
Width = this [ "btn0" menucount + - 1]. _width; 
/ / Set that space between each item wish 
Miborder = 5; 
/ / Set the variable in the initial zero value, which lelvara control of the width of the menu 
AnchMen = 0; 
/ / This will make every find that the menu enterframe make a run and have constant monitoring 
OnEnterFrame = function () ( 
AnchMen var = 0; 
/ / This is the part of the previous tip, with the only difference that accumulates in the variable 
/ / Width AnchMen menu 
For (var i = 0, i <menucount i + +) ( 
Var = xxm this [ "btn0" + i]. _xmouse; 
Var = yym this [ "btn0" + i]. _ymouse; 
  Var = xm Math.sqrt (xxm * xxm + yym * yym); 
If (xm <80) ( 
This [ "btn0" + i]. _xscale This = [ "btn0" + i]. _yscale + = ((200 - xm) - this [ "btn0" + i]. _yscale) / 3; 
) Else ( 
This [ "btn0" + i]. _xscale This = [ "btn0" + i]. _yscale + = (100 - this [ "btn0" + i]. _yscale) / 3; 
) 
/ / This part accumulates the width of the elements 
AnchMen + = this [ "btn0" + i]. _width; 
) 
  / / We calculate total increase in the spaces between elements of the menu over the space of the elements 
AnchMen + = (menucount - 1) * miborder; 
/ / Begin positions 
/ / Taking the width divided between the two and it remains the centre ensuring that the menu remains focused 
Xpos var = Math.round ((centerx - AnchMen) / 2); 
/ / As the first item does not have a previous item on the basis of where the function provides the point of parida 
/ / Is the calculus of space element is increased and a part of the element 2 
Xpos + = Math.round ((this [ "btn0" + 0]. _width Miborder +) / 2); 
  For (var i = 1, i <menucount i + +) ( 
X = v - 1; 
Xpos + = (this [ "btn0" + x]. _width / 2) + miborder + (this [ "btn0" + i]. _width / 2); 
This [ "btn0" + i]. _x = Xpos; this [ "btn0" + i]. _and = Centery; 
) 
/ / As an element has not been established its width is subtracted least 2 element for achieving its position 
This [ "btn0" + 0]. _x = (This [ "btn0" + 1]. _x - This [ "btn0" + 0]. _width - Miborder); this [ "btn0" + 0]. _and = Centery; 
);

Open in new window

0
 
julianopolitoCommented:
if you don't understand some part of the comments just ask
0
 
dolcezzzaAuthor Commented:
Thanks for all of your work... I researched it a bit more, and I'm not sure I was going the right direction... I didn't mention I wanted the thumbnails to go through xml... my fault. Anyway your reads will help me a bit, to understand the "Flow". Thanks.
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 9
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now