-
1. Re: Bing "like" Pictures
Ned Murphy Jun 23, 2009 9:42 AM (in response to zm15)See if using invisible buttons works for you as starter. To create one, simply create a new button symbol and only place something in the "hit" frame of its timeline.
If you were to place that on the stage at tis point you would see an aqua colored shape on the stage... this will not appear when you play, but is helpful in sizing and placement of the button.
Another thing you could do is add what you want displayed in the "over" frame of that button. Tha would make it so that when you hover over the button whatever you have in that over frame will appear. So it could be a small blurb or something that points to the thing your cursor is over (where the invisible button portion is).
There's other options you can pursue as well, but try those out first and see how you would like to change it if so.
-
2. Re: Bing "like" Pictures
zm15 Jun 23, 2009 10:37 AM (in response to Ned Murphy)Thanks for the reply Ned!
Ok, i've attached a picture for the look i am going for. I want the buttons to always be visible and when clicked on an picture pops up with a description.
I like your idea about making that the 'over' stage. Would it take much work to make it zoom out like in the picture?
-
Flash-Project-Example.jpg 78.8 K
-
-
3. Re: Bing "like" Pictures
Ned Murphy Jun 23, 2009 11:59 AM (in response to zm15)You would want to use movieclips for the zooming part--so you make a movieclip animation of the image zooming and stick it in the over frame. You could use a movieclip overall instead of a button, but the button lets you make the over reaction happen without the need for any code.
-
4. Re: Bing "like" Pictures
Ned Murphy Jun 23, 2009 1:09 PM (in response to zm15)To make a movieclip of that picture/info zooming, first create a Graphic symbol in Flash that contains the stuff you want shown for that... Insert -> New Symbol -> Graphic... put stuff in it.
Once you have that Graphic symbol complete, drag an instance of it onto the stage (just for creation of the mc), right click it and select Convert To Symbol -> Movieclip. Now that graphic is encased in a movieclip. Double click that movieclip to edit its innards.
The Graphic symbol will be occupying frame 1 of the timeline. Right click on frame 20 and select Insert Keyframe. That graphic now spans from frame 1 thru 20.
Note: if you are using CS4, the following may be a waste of my time... they changed the process... the following will work for CS3 and earlier versions
Click on frame 1 and then click on the graphic on the stage. Select Modify -> Transform -> Scale and Rotate... enter 0.2% in the scale entry field and click OK... I think that's as low as you can go.
Right click on frame 1 and select Insert Motion Tween... the frame from 1 thru 19 will now appear blue with an arrow... (if not, something is amiss)
Insert a new layer in the timeline and add a keyframe at frame 20. Select frame 20 and in the actions panel enter: stop();
Doubleclick elsewhere on the stage top exit the movieclip editing ( or select Edit -> Document) and test the movie... you should see the movieclip playing such that it grows and stops. Delete it from the stage... open a button for editing, select the over frame and drag an instance of that movieclip onto the stage. You'll probably need to fiddle and adjust things, but that's the basics of creating an animated zooming movieclip.
-
5. Re: Bing "like" Pictures
zm15 Jun 24, 2009 7:02 AM (in response to Ned Murphy)Thanks for the excellent instructions Ned. I'm using CS4 so i went and found out how to do tweening, so i have that part. I added a button, an dmade the over position the moviclip, but when i go to preview it, there is not button, and the image just keeps zooming, over and over. I put the stop command, but i keep getting an error. I attached a screen shot of how i have it set up, and the error too.
-
error.bmp 208.7 K
-
capture_1280x707.jpg 98.5 K
-
-
6. Re: Bing "like" Pictures
Ned Murphy Jun 24, 2009 7:37 AM (in response to zm15)If you want the buttons to be visible, as you said yesterday, then you need to have something in the first frame of the button.
The repeated zooming could be one of two things (I beleieve, anyways)... either you did not include a stop at the end of the timeline tween, or the movie is just going bonkers due to whatever that coding error is that you have... making the movie go bonkers is how AS3 throws a tantrum... aside from yelling at you about the problem.
I'm curious what you have in the lower frame at frame 20 that is making that cell look gray, as though there's some content there. The warning you are getting is pointing to Layer 1, so I don't know what's going on there since your code appears to be on Layer 6.
-
7. Re: Bing "like" Pictures
zm15 Jun 24, 2009 7:53 AM (in response to Ned Murphy)Ok, well i've made some progress. I had to put the stop command outside of the movieclip itself as well, on the main timeline. I attached the swf file of what i have so far. I'm almost there, now i just can't seem to get it to do the 'over' position correctly. You have to go over it twice. You can see what i mean in the file.
-
Flash Project Beta.swf 94.5 K
-
-
8. Re: Bing "like" Pictures
Ned Murphy Jun 24, 2009 9:34 AM (in response to zm15)If the Enter button is what I was supposed to be using, it worked on the first shot... rather nicely too... good animation work there (can be tricky to conquer at times)
-
9. Re: Bing "like" Pictures
zm15 Jun 24, 2009 9:52 AM (in response to Ned Murphy)yep, that's the right one. The only thing is, after you take your mouse off, and put it on again it doesnt work, you have to do that twice for it to work. Ideally i would like it to expand everytime you roll your mouse over it, not every other time. I'm sure it's something simple but i just can't quite get it. Any thoughts? ALSO, how can i get the left picture to be on top of the other small box? I guess, how can i get the active picture to always be on top?
attached is an updated look
-
Flash Project Beta.swf 66.6 K
-
-
10. Re: Bing "like" Pictures
Ned Murphy Jun 24, 2009 10:06 AM (in response to zm15)I don't remember it having any problem with having to rollover it twice. At the moment though, I don't see any button to go over.
-
11. Re: Bing "like" Pictures
Ned Murphy Jun 24, 2009 10:40 AM (in response to zm15)Do you happen to have any code in frame 1 of the animation? In the picture you show earlier there seems to be some actionscript in the first frame. The only code in the animtion should be the stop at the end
-
12. Re: Bing "like" Pictures
lemunchbunch Jun 24, 2009 10:58 AM (in response to Ned Murphy)What's going on????? I am getting everyone's reply
Help!!!!!!!!!!
-
13. Re: Bing "like" Pictures
lemunchbunch Jun 24, 2009 10:58 AM (in response to Ned Murphy)What's going on????? I am getting everyone's reply
Help!!!!!!!!!!
-
14. Re: Bing "like" Pictures
zm15 Jun 24, 2009 11:18 AM (in response to Ned Murphy)That extra code fixed the problem!!! Thanks!
updated the animation, let me know if it work ok on your end, ther eare 2 small icons, instead of the 'enter' button
How do i get them from overlapping on each other? To make sure the active picture is always on top
-
Flash Project Test.swf 98.8 K
-
-
15. Re: Bing "like" Pictures
Ned Murphy Jun 24, 2009 11:23 AM (in response to zm15)To have the currently hovered one always on top will require adding code for the buttons. Adding code for the buttons means you need to give the buttons instnace names (in the properties panel). Are you at all familiar with coding buttons with event listeners?
-
16. Re: Bing "like" Pictures
zm15 Jun 24, 2009 11:27 AM (in response to Ned Murphy)no i'm not, but i'm ready to learn!
-
17. Re: Bing "like" Pictures
zm15 Jun 24, 2009 12:07 PM (in response to zm15)EDIT: UPDATE
so i have all the pictures on there, and some of them overlap and some don't. I didn't do any coding or anything, and reason for this?
updated is attached
-
Flash Project Test 2.swf 164.9 K
-
-
18. Re: Bing "like" Pictures
Ned Murphy Jun 24, 2009 12:40 PM (in response to zm15)As you've seen, a button is already a self animating object that will react to mouse interactions, but only visually at this stage. The first thing you need to do to make it useful code-wise is to assign it a unique instance name. So select a button and enter that unique instance name for it in the Properties panel... let's say you name it "btn1"... move to the next button and maybe name it "btn2"... keep at it 'til all buttons have a unique instance name assigned to them.
In AS3, to make a button work with code, you need to add an event listener for it. You might need to add a few (for different events, like rollover, rollout, clicking it, but for now we'll just say you want to be able to rollover it and make it be on top of any other item on the stage. In the timeline that holds that button, in a separate actions layer that you create, in a frame numbered the same as where that button exists, you would add the event listener:
btn1.addEventListener(MouseEvent.ROLL_OVER, bringToFront);
Descriptively, that line of code contains the following:
buttonInstanceName . displayObjectMethod (eventClass . eventType, eventHandlerFunction);
The name of the unique function for processing the rollover event of that button was already defined at the end of the event listener assignment, so now you just have to write that function out:function bringToFront(evt:MouseEvent):void {
this.setChildIndex(evt.currentTarget, this.numChildren-1);
}
I have written that function so that any of your buttons will be able to use it, so all of your event listeners that you assign will be assigned the same listener information. Now if you name your buttons as I described, btn1, btn2, btn3,... you can use a loop to assign the event listeners and save some coding effort...
for(var i:uint = 1; i<=numBtns; i++){ // use actual number of buttons in place of numBtns
this["btn"+i].addEventListener(MouseEvent.ROLL_OVER, bringToFront);
}
-
19. Re: Bing "like" Pictures
zm15 Jun 24, 2009 1:22 PM (in response to Ned Murphy)ok, so i've made some progress. The coding is all new to me here in flash, but i am bearing with you. I have applied the first line of code, but am unsure where i write the function out at. I attached a screen shot and you can see where the code is at top, and the error at the bottom. I know i'm missing something, which is the function code, i just don't know where it goes.
I've put the function code below the first line of code, and just get an error too.
-
error2.bmp 4.1 MB
-
-
20. Re: Bing "like" Pictures
zm15 Jun 24, 2009 1:25 PM (in response to Ned Murphy)second error attached
-
error3_1280x544.jpg 101.0 K
-
-
21. Re: Bing "like" Pictures
zm15 Jun 24, 2009 1:43 PM (in response to Ned Murphy)possibly useful screenshot, shot of timeline
-
error4_1280x499.jpg 95.8 K
-
-
22. Re: Bing "like" Pictures
Ned Murphy Jun 24, 2009 3:10 PM (in response to zm15)AS3 can be a pain in the butt. Change the function's inner code to:
this.setChildIndex(SimpleButton(evt.currentTarget), this.numChildren-1);
If it'll save you from "bearing with" me (I wouldn't want you to go out of your way to do that... ) here's a link to a file that demonstrates the buttons swapping levels... http://www.nedwebs.com/Flash/AS3_Swap_Index.fla
-
23. Re: Bing "like" Pictures
zm15 Jun 25, 2009 1:21 PM (in response to Ned Murphy)You my friend, are a flash master mind, thanks! That worked! The fla file really helped me see the structure of the layout and layers. Thank you so much for all of your help and sticking it out with me in this! I sure appreciate it!!!!
Zach
-
24. Re: Bing "like" Pictures
Ned Murphy Jun 25, 2009 1:35 PM (in response to zm15)You're welcome Zach


