Wanna Know How to Make An Interactive Ref?
15 years ago
General
Not On This Account Anymore!!!
Well...here's a brief run-down of how I go about making the interactive references. Sorry, there's no pretty pictures or anything. It's an all-word tutorial. Take it or leave it.
After you open a new file in flash, sketch out the front view of your character. From that point you can either select the sketch and hit F8 > Select 'Movie Clip' and give it a name...OR you can ink/color the character (on a layer above so you can just delete the sketch layer after) THEN do the F8 to convert it to a 'Movie Clip'.
Once you do that, double click on the image to get into the Movie Clip. Hit F7 or just add a new keyframe. On this keyframe, draw the back view of the character.
After both views are complete (one on each frame), copy both frames and paste them right after the first two. Now you have four frames, two containing the front view and two containing the back.
Now create a new LAYER (not frame) above the character layer and label it 'clothes'. Sometimes it's easier to draw clothes when you click the colored box on the character layer so it turns it to colored lines. Makes it easier to see what you're doing on the clothing layer. Now...on the first frame draw the front view of the clothes, and on the second, the back view (of course).
Once the clothing is drawn, again, copy/paste the two clothing frames as you did to the character frames so that you have 4 frames of clothing. Now comes the trick (and the coding).
Select the first frame of clothing and hit F8. Turn it into a button (and name it as you wish). Do the same with all of the clothing frames. Now all the clothing items are buttons. Go to the first frame and click on the first clothing button (make sure you have the item selected NOT the frame...else the coding will apply to the whole frame and you want it to ONLY apply to the object). Press F9 and make sure it pulls up the 'Actions' toolbar from the bottom. (If 'Properties' comes up, just click it to minimize it, then click on the word 'Actions' to pull that one up)...
In the white box (make sure you have Script assistant un-selected) type:
on(release){
gotoAndStop(3);
}
Do the same for all of the clothing buttons, just change the number '3' to the other frame numbers as needed. You want the frame '1' clothing button to go to frame '3'. Do the others as so:
Clothing button 1 > frame 3
Clothing button 2 > frame 4
Clothing button 3 > frame 1
Clothing button 4 > frame 2
Now you have the clothing coded. Next, go to the frame 3 clothing button and click on it once. Now pull up that 'Properties' menu mentioned earlier (from the bottom with the 'Actions' one). There should be a menu that says 'Color:' with a drop down selection. It should say 'None' as a default setting.
Click it and select 'Alpha'. Now set the Alpha to 0%...it will make that clothing button invisible. Do the same for the clothing button on frame 4.
Now, add another layer. Make sure the frames for this layer stretch to the end of the other frames (to match...regular frames not key frames. To do this, simply click on the last frame you want it to be at and hit F5). Now, click the first FRAME and pull up the Actions menu again. Type in:
stop();
Now hit ctrl+enter to test the movie. Click the clothing. Does it come off? Awesome. Notice you can only check it for the front view because we haven't added the turning arrows yet. Exit the movie test and go back to your 'workspace'.
Add yet ANOTHER layer (locking layers as you go is helpful to keep from drawing on them on accident. It helps to only have the layer you're working on unlocked)...on this layer draw an arrow or whatever you want the button to look like. Press that magical F8 key and select 'button' and name it. You can double click on the button to edit it as you wish. If you would like it to change color when you run the cursor over it, then hit F6 to duplicate it onto the 'Over' frame...and if you want it to change yet again when you click down on it, you can edit it in the 'Down' frame.
Once you're finished playing with the button to your liking, exit out of the button by clicking the blue arrow in the upper left next to 'Timeline'. Now, click on the arrow and ctrl+c (to copy) and ctrl+shift+v to paste a new button directly over your first one. THEN go to the menu 'Modify' > Transform > Flip Horizontal...then use the arrow keys (or click and drag) your backward facing arrow away from the first one and line them up as you wish.
Now, on your arrows layer, click on the third frame and hit F6 to create a duplicate frame. You need two sets of arrow buttons to make this work. NOW time to code the arrows... You're going to go to frame '1' and click on the left facing arrow. Put this into the 'Actions' box:
on(release);
gotoAndStop(1);
}
And for the right-facing arrow, replace '1' with '2'
For the left arrow on frame 3, put '3' and for the right put '4'
Now test your movie again. It should flip the character and you can remove the clothing as you wish!
For penis animation, I just create another layer over the clothing layer and draw a wang on ONLY over the naked front frame (usually frame 3). Then I select it, turn it into a 'Movie Clip'...double click to get inside the movie clip and then I draw frame-by-frame from flaccid/sheathed to erect. Once I get to the final frame, I select all the frames between the first and last and copy them. Then I paste them after the last frame, select them again then right click on the selected bunch and 'Reverse Frames' so it runs backward. THEN I create a new layer, click the first frame of that layer and enter the 'stop' code (stop();) into Actions. THEN I select the flaccid/sheathed penis pic and turn it into a button. I do the same with the fully erect one. I code the first button as so:
on(release){
gotoAndPlay(2);
}
I also code the erect button with this, but I replace the '2' with whatever number frame is right after the erect button so it plays through the reverse arousal and goes back to frame 1.
The rest is pretty simple...I click the blue arrow at the top left until I am ALL the way back out onto the main stage. Sometimes you have to change the size of the stage (the white box) to fit your drawing. You do this by clicking the selection box tool and clicking on 'nothing' to deselect anything...then go to the Properties menu below and change the size by clicking on the button with the current size. Then you can create a layer below your character movie clip and put in a background, information etc...as you wish. If you want to move the arrows around later, just double click on your main movie clip to get inside. select the arrows and move them within the movie clip. They NEED to remain within the movie clip for it to work, though. Do not bring them to the main stage.
Anyway...that's how I pull it off. It's a lot to read, but once you get the hang of it, it'll be a piece of cake.
Love,
Champ
After you open a new file in flash, sketch out the front view of your character. From that point you can either select the sketch and hit F8 > Select 'Movie Clip' and give it a name...OR you can ink/color the character (on a layer above so you can just delete the sketch layer after) THEN do the F8 to convert it to a 'Movie Clip'.
Once you do that, double click on the image to get into the Movie Clip. Hit F7 or just add a new keyframe. On this keyframe, draw the back view of the character.
After both views are complete (one on each frame), copy both frames and paste them right after the first two. Now you have four frames, two containing the front view and two containing the back.
Now create a new LAYER (not frame) above the character layer and label it 'clothes'. Sometimes it's easier to draw clothes when you click the colored box on the character layer so it turns it to colored lines. Makes it easier to see what you're doing on the clothing layer. Now...on the first frame draw the front view of the clothes, and on the second, the back view (of course).
Once the clothing is drawn, again, copy/paste the two clothing frames as you did to the character frames so that you have 4 frames of clothing. Now comes the trick (and the coding).
Select the first frame of clothing and hit F8. Turn it into a button (and name it as you wish). Do the same with all of the clothing frames. Now all the clothing items are buttons. Go to the first frame and click on the first clothing button (make sure you have the item selected NOT the frame...else the coding will apply to the whole frame and you want it to ONLY apply to the object). Press F9 and make sure it pulls up the 'Actions' toolbar from the bottom. (If 'Properties' comes up, just click it to minimize it, then click on the word 'Actions' to pull that one up)...
In the white box (make sure you have Script assistant un-selected) type:
on(release){
gotoAndStop(3);
}
Do the same for all of the clothing buttons, just change the number '3' to the other frame numbers as needed. You want the frame '1' clothing button to go to frame '3'. Do the others as so:
Clothing button 1 > frame 3
Clothing button 2 > frame 4
Clothing button 3 > frame 1
Clothing button 4 > frame 2
Now you have the clothing coded. Next, go to the frame 3 clothing button and click on it once. Now pull up that 'Properties' menu mentioned earlier (from the bottom with the 'Actions' one). There should be a menu that says 'Color:' with a drop down selection. It should say 'None' as a default setting.
Click it and select 'Alpha'. Now set the Alpha to 0%...it will make that clothing button invisible. Do the same for the clothing button on frame 4.
Now, add another layer. Make sure the frames for this layer stretch to the end of the other frames (to match...regular frames not key frames. To do this, simply click on the last frame you want it to be at and hit F5). Now, click the first FRAME and pull up the Actions menu again. Type in:
stop();
Now hit ctrl+enter to test the movie. Click the clothing. Does it come off? Awesome. Notice you can only check it for the front view because we haven't added the turning arrows yet. Exit the movie test and go back to your 'workspace'.
Add yet ANOTHER layer (locking layers as you go is helpful to keep from drawing on them on accident. It helps to only have the layer you're working on unlocked)...on this layer draw an arrow or whatever you want the button to look like. Press that magical F8 key and select 'button' and name it. You can double click on the button to edit it as you wish. If you would like it to change color when you run the cursor over it, then hit F6 to duplicate it onto the 'Over' frame...and if you want it to change yet again when you click down on it, you can edit it in the 'Down' frame.
Once you're finished playing with the button to your liking, exit out of the button by clicking the blue arrow in the upper left next to 'Timeline'. Now, click on the arrow and ctrl+c (to copy) and ctrl+shift+v to paste a new button directly over your first one. THEN go to the menu 'Modify' > Transform > Flip Horizontal...then use the arrow keys (or click and drag) your backward facing arrow away from the first one and line them up as you wish.
Now, on your arrows layer, click on the third frame and hit F6 to create a duplicate frame. You need two sets of arrow buttons to make this work. NOW time to code the arrows... You're going to go to frame '1' and click on the left facing arrow. Put this into the 'Actions' box:
on(release);
gotoAndStop(1);
}
And for the right-facing arrow, replace '1' with '2'
For the left arrow on frame 3, put '3' and for the right put '4'
Now test your movie again. It should flip the character and you can remove the clothing as you wish!
For penis animation, I just create another layer over the clothing layer and draw a wang on ONLY over the naked front frame (usually frame 3). Then I select it, turn it into a 'Movie Clip'...double click to get inside the movie clip and then I draw frame-by-frame from flaccid/sheathed to erect. Once I get to the final frame, I select all the frames between the first and last and copy them. Then I paste them after the last frame, select them again then right click on the selected bunch and 'Reverse Frames' so it runs backward. THEN I create a new layer, click the first frame of that layer and enter the 'stop' code (stop();) into Actions. THEN I select the flaccid/sheathed penis pic and turn it into a button. I do the same with the fully erect one. I code the first button as so:
on(release){
gotoAndPlay(2);
}
I also code the erect button with this, but I replace the '2' with whatever number frame is right after the erect button so it plays through the reverse arousal and goes back to frame 1.
The rest is pretty simple...I click the blue arrow at the top left until I am ALL the way back out onto the main stage. Sometimes you have to change the size of the stage (the white box) to fit your drawing. You do this by clicking the selection box tool and clicking on 'nothing' to deselect anything...then go to the Properties menu below and change the size by clicking on the button with the current size. Then you can create a layer below your character movie clip and put in a background, information etc...as you wish. If you want to move the arrows around later, just double click on your main movie clip to get inside. select the arrows and move them within the movie clip. They NEED to remain within the movie clip for it to work, though. Do not bring them to the main stage.
Anyway...that's how I pull it off. It's a lot to read, but once you get the hang of it, it'll be a piece of cake.
Love,
Champ
FA+


I am a visual person, it's hard to understand stuff like this lol
Nice tid-bit of information though. Very informal. ^^
Mostly kidding. I haven't bothered to install Flash in a few years so I don't really remember what I'd be doing with it. I'll have to make note of this, though..... thanks.
making buttons always confused me, hopefully this will make things a little clearer on how flash works
i wont be making interactive refs however, but il be practicing with making buttons and making things interactive for personal projects.
*wonders why she keeps having such cool ideas while she's at work and can't work on them*
Yay =3