Hi I was wanting to be able to use a slider on a webpage to be able to move forwards and backwards through the keyframes. I have 10 images, each on different keyframes and I want to be able to move from the first image to the last image using an on-screen, mouse controlled slider, similar to the way you move along the timeline in the program itself. I have found a number of tutorials on the "component slider" however they only refer to changing values such as the size of an object or volume, and not moving through the keyframes which is what I am after. This is for a University assignment and any help would be greatly appreciated.
Cheers!
there's not much to do if you've followed any of the slider tutorials. just associate your slider's values with your keyframes.
for example, you could use an array of keyframes and use a slider with values from 0 to 9:
var keyframeA:Array=["yourfirstframelabel","secondlabel",...];
// in your slider listener:
gotoAndStop(keyframeA[yourslider.value]);
Thanks for that! I'll rename my keyframes after you lol and see how I go.... I'm using this video http://www.youtube.com/watch?v=NjQ_EUCIFvI for the slider.
Hi again
I have added your suggested code to my actionscript for the slider and I can't get it to run. Each of the 12 images are named Frame_1, Frame_2, Frame_3 etc
Do I need to convert these images to symbols?
From the youtube video I was able to get the slider working as shown and have copied and pasted it into my own project.
Obviously the slider needs to contol the playback of the 12 images. At this stage when I preview the swf the slider bar appears however the playback is in a continual loop. The cursor sees the slider as it changes to a hand sybol when I hover over the button however I when I click and attempt to move the slider nothing happens.
This is the main action script for the slider which is found when clicking on the slider for Symbol 3 and is found in the layer AS3 in this image - http://i1194.photobucket.com/albums/aa373/lucidimagery/Flash/Screensho t2012-08-16at60032PM.png
Note: The asterisks are added only to highlight your suggestion and do not appear in the actual script
import flash.events.MouseEvent;
***var keyframeA:Array = ["Frame_1","Frame_2","Frame_3","Frame_4","Frame_5","Frame_6","Frame_7 ",
"Frame_8","Frame_9","Frame_10","Frame_11","Frame_12"];***
var knobWidth:Number = sliderKnob.width;
var trackWidth:Number = sliderTrack.width;
var trackX:Number = sliderTrack.x;
var boundWidth = trackWidth - knobWidth;
var boundsRect:Rectangle = new Rectangle(trackX, 0, boundWidth, 0);
// Enable drag
sliderKnob.addEventListener(MouseEvent.MOUSE_DOWN, startDragging);
function startDragging(event:MouseEvent) {
sliderKnob.startDrag(false, boundsRect);
}
// Stop drag
sliderKnob.addEventListener(MouseEvent.MOUSE_UP, stopDragging);
sliderKnob.addEventListener(MouseEvent.MOUSE_OUT, stopDragging);
function stopDragging(event:MouseEvent) {
sliderKnob.stopDrag();
}
sliderTrack.addEventListener(MouseEvent.CLICK, snapTo);
function snapTo(event:MouseEvent) {
MovieClip(parent).mouse_txt.text = "Mouse X on slider is: "+ mouseX;
if (mouseX < boundWidth && mouseX > knobWidth) {
sliderKnob.x = mouseX;
}
}
This is the actionscript in the slider listener which appears on the "Scene 1" timeline and is contained in the AS3 layer in this image - http://i1194.photobucket.com/albums/aa373/lucidimagery/Flash/Screensho t2012-08-16at60425PM.png
Note: The asterisks are added only to highlight your suggestion and do not appear in the actual script
import flash.events.Event;
// Enter Frame Event
var sliderValue:uint = mySlider.sliderKnob.x / 3;
addEventListener(Event.ENTER_FRAME, onEnterFrame);
function onEnterFrame(event:Event):void {
sliderValue = mySlider.sliderKnob.x / 3;
status_txt.text = "Slider position is: "+sliderValue;
***gotoAndStop(keyframeA[mySlider.sliderKnob.value]);***
}
I was wondering if you had any suggestions?
North America
Europe, Middle East and Africa
Asia Pacific