AS3 seek through Parallel Effect

Hello all,

This might be more of a Flex question than purely AS3 so if you think i should post it elsewhere please feel free to redirect this effort. :slight_smile:

Im looking into a way to create a “seekable” parallel effect sequence where the user could control the playback of the sequence.

im thinking of a nice scroll bar allowing you to jump to any moment in the parallel effect sequence.

I’ve looked in the effectInstance classes who have playheadtime properties but i dont think its built for seeking through the effect. Also it appears that you can’t really control an effect beyond pausing, resuming or reverse playing?

Here’s a quick example that’ll help illustrate what im talking about (the code is bogus but it should illustrate what im trying to accomplish here:


*in main.mxml*
[LEFT][SIZE=2][COLOR=#006633]<mx:Script>[/COLOR][/SIZE][/LEFT]

[SIZE=2][INDENT]<![CDATA[
[/INDENT][/SIZE][INDENT][INDENT][LEFT]**[SIZE=2][COLOR=#0033ff]import[/COLOR][/SIZE]**[SIZE=2] mx.effects.Effect;[/SIZE][/LEFT]
[/INDENT]

[INDENT]**[SIZE=2][COLOR=#0033ff]import[/COLOR][/SIZE]**[SIZE=2] mx.effects.WipeDown;[/SIZE][/INDENT]

[INDENT]**[SIZE=2][COLOR=#0033ff]import[/COLOR][/SIZE]**[SIZE=2] KML.*;[/SIZE][/INDENT]

[INDENT]**[SIZE=2][COLOR=#0033ff]import[/COLOR][/SIZE]**[SIZE=2] Seq.*;[/SIZE][/INDENT]

[INDENT]**[SIZE=2][COLOR=#0033ff]import[/COLOR][/SIZE]**[SIZE=2] mx.events.IndexChangedEvent;[/SIZE][/INDENT]
 
 

[INDENT]**[SIZE=2][COLOR=#0033ff]public[/COLOR][/SIZE]****[SIZE=2][COLOR=#339966]function[/COLOR][/SIZE]**[SIZE=2] seekTo():[/SIZE]**[SIZE=2][COLOR=#0033ff]void[/COLOR][/SIZE]**[SIZE=2]{[/SIZE][/INDENT]

[INDENT][SIZE=2][INDENT]//tie this one up to the slider so it seeks to a position in the parallel's execution "timeline".[/INDENT][/SIZE]
[LEFT][SIZE=2]}[/SIZE][/LEFT]

[/INDENT]
[LEFT][SIZE=2]]]>[/SIZE][/LEFT]

[/INDENT][SIZE=2][COLOR=#006633]</mx:Script>[/COLOR][/SIZE]
 
[SIZE=2][COLOR=#0000ff][LEFT]<mx:Parallel[/COLOR][/SIZE][SIZE=2] id="[/SIZE][SIZE=2][COLOR=#990000]WipeRightUp[/COLOR][/SIZE][SIZE=2]"[/SIZE][SIZE=2][COLOR=#0000ff]>[/LEFT]
[/COLOR][/SIZE][SIZE=2][LEFT][/SIZE][SIZE=2][COLOR=#0000ff]<mx:WipeRight[/COLOR][/SIZE][SIZE=2] id="[/SIZE][SIZE=2][COLOR=#990000]ef_1[/COLOR][/SIZE][SIZE=2]" startDelay="[/SIZE][SIZE=2][COLOR=#990000]0[/COLOR][/SIZE][SIZE=2]" duration="[/SIZE][SIZE=2][COLOR=#990000]1000[/COLOR][/SIZE][SIZE=2]" target="[/SIZE][SIZE=2][COLOR=#990000]{[/COLOR][/SIZE][SIZE=2]line_1_textBox[/SIZE][SIZE=2][COLOR=#990000]}[/COLOR][/SIZE][SIZE=2]"[/SIZE][SIZE=2][COLOR=#0000ff]/>[/LEFT]
[/COLOR][/SIZE][SIZE=2][LEFT][/SIZE][SIZE=2][COLOR=#0000ff]<mx:WipeRight[/COLOR][/SIZE][SIZE=2] id="[/SIZE][SIZE=2][COLOR=#990000]ef_2[/COLOR][/SIZE][SIZE=2]" startDelay="[/SIZE][SIZE=2][COLOR=#990000]1000[/COLOR][/SIZE][SIZE=2]" duration="[/SIZE][SIZE=2][COLOR=#990000]1000[/COLOR][/SIZE][SIZE=2]" target="[/SIZE][SIZE=2][COLOR=#990000]{[/COLOR][/SIZE][SIZE=2]line_2_textBox[/SIZE][SIZE=2][COLOR=#990000]}[/COLOR][/SIZE][SIZE=2]"[/SIZE][SIZE=2][COLOR=#0000ff]/>[/LEFT]
[/COLOR][/SIZE][SIZE=2][LEFT][/SIZE][SIZE=2][COLOR=#0000ff]<mx:WipeRight[/COLOR][/SIZE][SIZE=2] id="[/SIZE][SIZE=2][COLOR=#990000]ef_3[/COLOR][/SIZE][SIZE=2]" startDelay="[/SIZE][SIZE=2][COLOR=#990000]2000[/COLOR][/SIZE][SIZE=2]" duration="[/SIZE][SIZE=2][COLOR=#990000]3000[/COLOR][/SIZE][SIZE=2]" target="[/SIZE][SIZE=2][COLOR=#990000]{[/COLOR][/SIZE][SIZE=2]line_3_textBox[/SIZE][SIZE=2][COLOR=#990000]}[/COLOR][/SIZE][SIZE=2]"[/SIZE][SIZE=2][COLOR=#0000ff]/>[/LEFT]
[/COLOR][/SIZE][SIZE=2][LEFT][/SIZE][SIZE=2][COLOR=#0000ff]<mx:WipeRight[/COLOR][/SIZE][SIZE=2] id="[/SIZE][SIZE=2][COLOR=#990000]ef_4[/COLOR][/SIZE][SIZE=2]" startDelay="[/SIZE][SIZE=2][COLOR=#990000]5000[/COLOR][/SIZE][SIZE=2]" duration="[/SIZE][SIZE=2][COLOR=#990000]5000[/COLOR][/SIZE][SIZE=2]" target="[/SIZE][SIZE=2][COLOR=#990000]{[/COLOR][/SIZE][SIZE=2]line_4_textBox[/SIZE][SIZE=2][COLOR=#990000]}[/COLOR][/SIZE][SIZE=2]"[/SIZE][SIZE=2][COLOR=#0000ff]/>[/LEFT]
[/COLOR][/SIZE][SIZE=2][/SIZE][SIZE=2][COLOR=#0000ff]</mx:Parallel>
[/COLOR][/SIZE] 
[SIZE=2][COLOR=#0000ff]<mx:Button[/COLOR][/SIZE][SIZE=2]label="[/SIZE][SIZE=2][COLOR=#990000]Start Animation[/COLOR][/SIZE][SIZE=2]" click="mainViewBox.visible=[/SIZE]**[SIZE=2][COLOR=#0033ff]false[/COLOR][/SIZE]**[SIZE=2];mainViewBox.visible=[/SIZE]**[SIZE=2][COLOR=#0033ff]true[/COLOR][/SIZE]**[SIZE=2];" id="[/SIZE][SIZE=2][COLOR=#990000]animateButton[/COLOR][/SIZE][SIZE=2]"[/SIZE][SIZE=2][COLOR=#0000ff]/>[/COLOR][/SIZE]

[SIZE=2][COLOR=#0000ff]<mx:VBox
[/COLOR][/SIZE][LEFT][SIZE=2]id="[/SIZE][SIZE=2][COLOR=#990000]mainViewBox[/COLOR][/SIZE][SIZE=2]" [/SIZE][SIZE=2]showEffect="[/SIZE][SIZE=2][COLOR=#990000]WipeRightUp[/COLOR][/SIZE][SIZE=2]"[/SIZE][SIZE=2][COLOR=#0000ff]>[/COLOR][/SIZE]

[INDENT][SIZE=2][COLOR=#0000ff]<mx:Label[/COLOR][/SIZE][SIZE=2] text="[/SIZE][SIZE=2][COLOR=#990000]First line of text here[/COLOR][/SIZE][SIZE=2]" width="[/SIZE][SIZE=2][COLOR=#990000]100%[/COLOR][/SIZE][SIZE=2]" id="[/SIZE][SIZE=2][COLOR=#990000]line_1_textBox[/COLOR][/SIZE][SIZE=2]"[/SIZE][SIZE=2][COLOR=#0000ff]/>[/COLOR][/SIZE][/INDENT]

[INDENT][SIZE=2][COLOR=#0000ff]<mx:Label[/COLOR][/SIZE][SIZE=2] text="[/SIZE][SIZE=2][COLOR=#990000]Second line of text here[/COLOR][/SIZE][SIZE=2]" width="[/SIZE][SIZE=2][COLOR=#990000]100%[/COLOR][/SIZE][SIZE=2]" id="[/SIZE][SIZE=2][COLOR=#990000]line_2_textBox[/COLOR][/SIZE][SIZE=2]" [/SIZE][SIZE=2][COLOR=#0000ff]/>[/COLOR][/SIZE][/INDENT]

[INDENT][SIZE=2][COLOR=#0000ff]<mx:Label[/COLOR][/SIZE][SIZE=2] text="[/SIZE][SIZE=2][COLOR=#990000]Third line of text here[/COLOR][/SIZE][SIZE=2]" width="[/SIZE][SIZE=2][COLOR=#990000]100%[/COLOR][/SIZE][SIZE=2]" id="[/SIZE][SIZE=2][COLOR=#990000]line_3_textBox[/COLOR][/SIZE][SIZE=2]" [/SIZE][SIZE=2][COLOR=#0000ff]/>[/COLOR][/SIZE][/INDENT]

[INDENT][SIZE=2][COLOR=#0000ff]<mx:Label[/COLOR][/SIZE][SIZE=2] text="[/SIZE][SIZE=2][COLOR=#990000]Fourth line of text here[/COLOR][/SIZE][SIZE=2]" width="[/SIZE][SIZE=2][COLOR=#990000]100%[/COLOR][/SIZE][SIZE=2]" id="[/SIZE][SIZE=2][COLOR=#990000]line_4_textBox[/COLOR][/SIZE][SIZE=2]" [/SIZE][SIZE=2][COLOR=#0000ff]/>[/COLOR][/SIZE][/INDENT]
[SIZE=2][COLOR=#0000ff]</mx:VBox>[/COLOR][/SIZE]
 
[SIZE=2][COLOR=#0000ff]<mx:HSlider[/COLOR][/SIZE][SIZE=2] x="[/SIZE][SIZE=2][COLOR=#990000]160[/COLOR][/SIZE][SIZE=2]" y="[/SIZE][SIZE=2][COLOR=#990000]235[/COLOR][/SIZE][SIZE=2]" [/SIZE][SIZE=2][COLOR=#0000fe]dragExit[/COLOR][/SIZE][SIZE=2]="seekTo()"[/SIZE][SIZE=2][COLOR=#0000ff]/>
[/COLOR][/SIZE] 

Thanks for your time
[/LEFT]