scrolling pictures that you click and pop out at you...

alright so i guess i will be using how many pixels have gone by to determing the location of the image...
like we did before here using clickspot:

on mouseUP me
 clickSpot = (the mouseH) - sprite(spriteNum).left
 --now get the spot in teh scroll...
 actual = clickSpot - pScroll
 if actual < 0 then
    actual = pTiles * pTileRect.width + actual
 else if actual > pTiles * pTileRect.width then
   actual = actual - pTiles * pTileRect.width
 end if

so how do i adapt this to serve my purpose...and how do i get that image to align itself with the image in the scroller?

Well once you know the image we can find hte scoll location of it.

clickImage = (actual / (pTileRect.width)) + 1
scrollRect = pTileRect.offset((pTileRect.width * (clickImage - 1)) + pScroll)
sendAllSprites(#place, clickImage, scrollRect)
That gives you the rectangluar are of that image.  You still need to see if its beyond the left or right edge of the sprite and if so wrap it back but that will let you place it.  Then you cna have a single image on the screen witht he blend set to 0.  

on place me, whatImage, whatRect
  sprite(spriteNum).memeber = member(string(whatImage))
sprite(spriteNum).rect = whatRect
sprite(spriteNum).blend = 100
end

Look on my site for some behaviors to zoom in and out to take this to the next level and scale the newly placed image up, etc.

so did i want to place both of those scripts under the "on mouseUp me" command?

this is how i put it together in the last part of the script...

on mouseUP me
  clickSpot = (the mouseH) - sprite(spriteNum).left
  --now get the spot in teh scroll...
  actual = clickSpot - pScroll
  if actual < 0 then
    actual = pTiles * pTileRect.width + actual
  else if actual > pTiles * pTileRect.width then
    actual = actual - pTiles * pTileRect.width
  end if
 
  --then see which its inside
  clickimage = (actual / (pTileRect.width))+ 1
  go string(clickimage)
 
  scrollRect = pTileRect.offset((pTileRect.width * (clickImage - 1)) + pScroll)
sendAllSprites(#place, clickImage, scrollRect)

on place me, whatImage, whatRect
 sprite(spriteNum).memeber = member(string(whatImage))
sprite(spriteNum).rect = whatRect
sprite(spriteNum).blend = 100
end
 
end

when i try this tho... it says: "three parameters expected"  
and it has a problem with this part of it:

scrollRect = pTileRect.offset((pTileRect.width * (clickImage - 1)) + pScroll)

i havent been able to find any of the behaviors you told me to look up on your site... i searched for "zoom" and didnt find anything that related to it directly

Here are a few

http://www.mediamacros.com/item/item-966878309/
http://www.mediamacros.com/item/item-1006687252/ - imaging lingo to scale a bitmap member

Also look in the library palett. I think there is a zoom behavior in there as well.  Basically you are just chaning the rect of the sprite each frome to make it "grow"

yea i like th epallete one...its nice and simple and it gets the job done...

so again, where do i put those previous lines of code? sorry that i am such a beginner...hehe, but im deffinitly learning alot lately

on mouseUP me
 clickSpot = (the mouseH) - sprite(spriteNum).left
 --now get the spot in teh scroll...
 actual = clickSpot - pScroll
 if actual < 0 then
    actual = pTiles * pTileRect.width + actual
 else if actual > pTiles * pTileRect.width then
   actual = actual - pTiles * pTileRect.width
 end if
 
 --then see which its inside
 clickimage = (actual / (pTileRect.width))+ 1
 go string(clickimage)
 
 scrollRect = pTileRect.offset((pTileRect.width * (clickImage - 1)) + pScroll)
sendAllSprites(#place, clickImage, scrollRect)
end

on place me, whatImage, whatRect
sprite(spriteNum).memeber = member(string(whatImage))
sprite(spriteNum).rect = whatRect
sprite(spriteNum).blend = 100
end
 

ok, so i inserted that code into the view window...

so now that will define whatImage & whatRect, right?

now i am not quite sure what i am supposed to do with the actual image that is going to be displayed... i am gonna put the pallette zoom behavior on it... but i am not sure how i get it to originate from where the image in the scroller is... i dont know how we use the whatImage & the whatRect to do this

Well this gets a little more tricky as you are controling 2 sets of functionality together but again, lets take it one step at a time.  Lets get it placing and zooming, then we can look at making it hide again. :)

The on place me.... code goes ont on teh slider, but instead into the zoom behavior.  Also on the zoom we need to hide it off screen at first...

on hide me
  sprite(spriteNum).rect = sprite(spriteNum).rect.offset(-1000,-1000)
  sprite(spriteNum).blend = 0
end

And in the zoom behavior add this at the END of the begin sprite...

me.hide()

That shoudl hide it initially and then when you click it calls the place script that shoudl move it to the correct location on screen.

ok, so i am not sure where to put those scripts into... i put the "me.hide()" at the end of the beginesprite in the zoom behavior...

on beginSprite me
  pZoomed = resolve(pZoomed)
  pAuto = resolve(pAuto)
  mInitialize me
  me.hide()
end beginSprite

thats just gives me an error...

as for:

on hide me
 sprite(spriteNum).rect = sprite(spriteNum).rect.offset(-1000,-1000)
 sprite(spriteNum).blend = 0
end

i am not sure where to place it in the zoom behavior
everywhere i try it tells me "variable used b4 assigned a value"

Some programmer's do nto use spriteNum as it was intended.  Just add

property spriteNum

to the top of hte script with the other properties.  Then make sure the hide handler is not inside another handler but is inside the same behavior.

ok, so i replaced the beginsprite me part in the zoom behavior and i also put the

on hide me
sprite(spriteNum).rect = sprite(spriteNum).rect.offset(-1000,-1000)
sprite(spriteNum).blend = 0
end

in the zoom behavior right after the last property SpriteNum that i added to the list...

so now whenever i play it it goes fine...but when i click anywhere on the viewwindow it says:

error: 3 parameters expected
scrollRect = pTileRect.offset((pTileRect.width * (clickImage - 1)) + pScroll)

scrollRect = pTileRect.offset((pTileRect.width * (clickImage - 1)) + pScroll, 0)

ok, now it works...and i found another one of ur spelling mistakes that was holdling me back...lol

so now whenever click the first one... it goes to the top left of the screen and when i click the second one it goes to the middle of the screen... it is going to the markers that i have made in the score as expected :)

so we're makin progress here! hehe

errr... i would say to send it to you...but the file size is like 6mb... if u have the patience to download that.. i'll send it over like the other ones

Sure. I have broadband, but it will be tomorrow before I can look at it.

alright, i'll upload it 2nite and we'll take a look at it again 2m

link will b up here at:

http://www.del.by.cs.com/tests/WIP/works_in_progress-clubquarters-noresize2.zip

ty again and talk to u 2m

Ok.  THis sohudl fix it.  First you want to make your large images the same as the small ones (IE the black border) so the proportions are hte same.  THen here are the 2 behaviors.  This goes on teh scroller....


------------------Start scroller
property spriteNum --the sprite
property pScroll --the currentScroll
property pWidth -- width of the "window"
property pTileRect -- rect of the tiles
property pTiles -- number of tiles
property pMember -- the current member
property pMaxScroll

on beginSprite me
  pTiles = 6
  pWidth = sprite(spriteNum).width
  pTileRect = member("pano-1").rect
  pScroll = 0
  pMaxScroll = pTiles * pTileRect.width - sprite(spriteNum).width
  pMember = sprite(spriteNum).member
  me.drawPano()
end

--now a handler to scroll it
--call this from your buttons with sendAllSprites()
on scrollIt me, vAmmount
  pScroll = pScroll + vAmmount
  me.drawPano()
end

--and then the draw handler
on drawPano me
  --if we are over 1 wrap in the scroll then wrap it back to one "wrap"
  if pScroll > pMaxScroll then
    pScroll = pScroll - (pTiles * pTileRect.width)
  end if
 
  --if its below 0 reset it back to a positive number based on wraps
  repeat while pScroll < -(pMaxScroll)
    pScroll = pScroll + (pTiles * pTileRect.width)
  end repeat
  --draw each of the tiles in
 
  repeat with x = 1 to pTiles
    --which member to copy...
    r = pTileRect.offset((pTileRect.width * (x-1)) + pScroll, 0)
    if r.left <  -(pMaxScroll) then
      r = r.offset(pTiles * pTileRect.width, 0)
    end if
   
    if r.left > pMaxScroll then
      r = r.offset(-(pTiles * pTileRect.width), 0)
    end if    
    if r.right < 0 or r.left > sprite(spriteNum).width then next repeat
    m = member("pano-" & x)
    pMember.image.copyPixels(m.image, r, m.rect)
  end repeat
 
on mouseUP me
  clickSpot = (the mouseH) - sprite(spriteNum).left
  --now get the spot in teh scroll...
  actual = clickSpot - pScroll
  if actual < 0 then
    actual = pTiles * pTileRect.width + actual
  else if actual > pTiles * pTileRect.width then
    actual = actual - pTiles * pTileRect.width
  end if
 
  --then see which its inside
  clickimage = (actual / (pTileRect.width))+ 1
 -- go string(clickimage)
 
  scrollRect = pTileRect.offset((pTileRect.width * (clickImage - 1)) + pScroll, 0).offset(sprite(spriteNum).left, sprite(spriteNum).top)
  sendAllSprites(#place, clickImage, scrollRect)
end

---------------end scroller



This goes in place of the current zoom on the zoom picture.  ALso place the zoom picture on teh same frame as the scroller for this to work....



-----------start zoom
property spriteNum
property pBaseRect
property pDestRect
property pActive
property pFrames
property pStep


on getPropertyDescriptionList me
  p = [:]
  p.addProp(#pFrames, [#format : #integer, #default : 10, #comment : "How Many Frames"])
  return p
end

on place me, clickImage, scrollRect
  put scrollRect
  pBaseRect = scrollRect
  m = member(string(clickImage))
  r = m.rect
  dw = (r.width - pBaseRect.width)/2
  dH = (r.height - pBaseRect.height)/2
  pDestRect = pBaseRect + rect(-dw, -dh, dw, dh)
  put pDestRect && pBaseRect
 
  pACtive = pFrames
  pStep = (pDestRect - pBaseRect) / float(pFrames)
  sprite(spriteNum).member = m
  sprite(spriteNum).rect = pBaseRect
end

on exitFrame me
  if pActive > 0 then
    sprite(spriteNum).rect = pDestRect - (pStep * pActive)
    pACtive = pACtive - 1
  end if
end

on hide me
  sprite(spriteNum).rect = rect(-10,-10,-10,-10)
end

on beginSprite me
  me.hide()
end

on mouseLeave me
  me.hide()
  end
--end zoom

ok, so i have the black window... i put the first script on that.
then i have the picture that i want to zoom... i dropped the second script on that.

i am confused by what you meant by making my large images the same as the small ones...u mean using the same ones that i use for the pano for the blown up picture?

and also, if u look at how i have it set up, the scroller is in all of the frams and the picture is within sum of those frames... do u mean to just make them both in one frame? im havin a lil trouble following

You need the large image present on the screen at all times (it will hide itself) so that the scroller cna send it commands.

What I mean by making them the same is that they need the same border.  Run it as you have it now and you will see the scaling is a bit strange because they are scaling from a set rectangle to all different sizes because the large versions don't ahve hte black border.

ah i get it now... so i made the image occupy all the frames that are in use...and when i click play it hides itself...but then when i click on a pic in the scroller it gives me this error:
cannot divide by 0

pStep = (pDestRect - pBaseRect) / float(pFrames)... i guess i would b adding a "1" somewhere in there?

i completely forgot about the black borders on the actual pictures...lol... so i'll just make the large images have the same proportion of a black border

Click the image that is on and go to the behavior inspector.  OPen the dialog box to set the properties for that sprite. ;)

i dont really get what you want me to do in the behavior inspector... are you talkin abuot the large image that gets hidden or the scroller view window?

If you click on any sprite then go to Window>Inspector>Behavior inspector it opens up a window that shows all the behaviors on the sprite.  Click the "gear" icon in there to open up the behavior properties for the code and this wil let you fill in values in the dialog that opens.

wow cool there it goes! hehe :)

i wasnt sure what to fill in under the properties so i jsut left it at its default of 10 frames.

and it does it for the first 5 images... i dont understand why it does this, not complainin at all! haha...but it doesnt do the last one....

hmm... and i figured out that it also doesnt work when i am scrolling using the left arrow... when i do... only the first 3 images work... strange

i also only had to place one of the large images on teh stage... hmm... is it part of the code to recognize what the other images are called in the cast? did u do that or is it just super-smart like that?

It does that. ;)  It takes what you click on and swaps that cast member in as needed.

I may need to recheck the code.  I wrote most of it here in the browser, so I need to verify it.  Let me know what is broken and I will test it.

http://www.del.by.cs.com/tests/WIP/works_in_progress-clubquarters-noresize2.zip

here, i posted it up again... that way you can take a look at it and see what it is im doing wrong...hehe

we're almost there! hehe dont give up on me now :)

we just need to get that working that whichever way u scroll it works and that when you click on it and it does the szoom thing... it comes into the center and the rest fades out

The file you sent appears to be scrolling fine here.  If you want to have it zoom from the center instead of zoom from the location of the image you click then just set a rect in the script on the "zoom" image instead of accepting hte paramter from the scroller.  IE...

on place me, clickImage, scrollRect
 pBaseRect = scrollRect

would be...

on place me, clickImage, scrollRect
 pBaseRect = rect(200,200,400,400) --put the rect here that you want it to zoom to for all images.

Just alter the rect above to the rect you want it to zoom to.

i cuold use that for a future project...
but what i meant is...that it starts at location and then it moves into the center of the movie as it zooms in... i want it to take center stage and i want it to originate from the current image

in the on place handler change this...

 pDestRect = pBaseRect + rect(-dw, -dh, dw, dh)


to

 pDestRect = pBaseRect + rect(200,200,400,400)

Just change that rect to the actual place you want it to open, or to center it..

change this...
 r = m.rect
 dw = (r.width - pBaseRect.width)/2
 dH = (r.height - pBaseRect.height)/2
 pDestRect = pBaseRect + rect(-dw, -dh, dw, dh)


to...

 r = m.rect
 dw = ((the stage).rect.width - r.width)/2
 dH = ((the stage).rect.width - r.height)/2
 pDestRect = r.offset(dw, dh)

nicely done! :)

this is gonna turn out great once i get the details down! :D

now i would like to make it so that it only goes away when you click somewhere (not when your mouse leaves the image)
so i will probably wnat to change this here:
on mouseLeave me
 me.hide()
 end

but i dont want it to conflict with the fact that when i click on an image it brings up the image i clicked on...
what i mean is:
when i already have one image centered and zoomed in and i click over another image... i dont want it to bring up the image i click on, but i want it to just return to the scroller.

hmm..noticed something strange...

when i begin by scrolling to the left... and i click on one of the pix that just appeared from teh left... it comes from the right side (instead of the locatoin the image is at) and then centers

cool, i am catchin onto this stuff... u had made a mistake on line: dH = ((the stage).rect.width - r.height)/2 and i realized it cuz it wasnt centering height-wise right... so i just went ahead and changed that "width" in tehre to "height" and it fixed it :)

Good job.  ;)  

For the hide, you can put a signal on the image and background like this...

on mouseUp me
sendAllSprites(#hide)
end

ok, strangeness revised:

after the 5th picture... they all come from the right side regardless of where the source picture is located

so by puting a signal on the image and background...

do u mean put it on the script that is on the scroller image?
and how do i put it on the background? not following u 100% there...hehe

i noticed somethingin the code...

it says if actual < 0 then
actual pTiles * pTileRect.width + actual

i figure when i am scrolling using the left arrow... it is turning into negative #s (<0)... so would that be why my images arent coming from the right spot when i scroll in that direction?
here is where that code came from:

on mouseUP me
 clickSpot = (the mouseH) - sprite(spriteNum).left
 --now get the spot in teh scroll...
 actual = clickSpot - pScroll
 if actual < 0 then
    actual = pTiles * pTileRect.width + actual
 else if actual > pTiles * pTileRect.width then
   actual = actual - pTiles * pTileRect.width
 end if
 
 --then see which its inside
 clickimage = (actual / (pTileRect.width))+ 1
-- go string(clickimage)
 
 scrollRect = pTileRect.offset((pTileRect.width * (clickImage - 1)) + pScroll, 0).offset(sprite(spriteNum).left, sprite(spriteNum).top)
 sendAllSprites(#place, clickImage, scrollRect)
end

i think that the problem has somethng to do with the size of the view window...
the window is about the size of 3 images... that would explain why only the first 3 images work and the rest dont.

i cant fiind anything in the code that i myself could change to fix that little glitch... any ideas MM?