FORUMS: list search recent posts

Transition over dynamic content

COW Forums : Adobe Flash

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Rob Jackson
Transition over dynamic content
on Jan 5, 2010 at 9:08:34 pm

Here's what I'm trying to achieve: I have a dynamic survey that pulls from a database and saves the answers back to said database. Now I want to make it animatedly awesome. Putting it super simply, I want the multiple choice question to appear within a red square. After choosing their answer and clicking submit, I want that square, with their chosen answer, to move off screen, and the next question to come on screen, let's say in a blue square. That question gets answered and goes off in a different direction, and it continues until we're out of questions. These questions (the text in the actual question, not the answers) are dynamic will be periodically changed via an XML file that's updated using .net, so they're not embedded in the flash animation itself. I have the dynamic survey bit all taken care of, I just need to add animation to it.

I hope that makes sense to someone out there. Can anyone suggect any other forums/sites that might be able to help me if none of the COW gurus are able to help?

Thanks!

Rob


Return to posts index

cowcowcowcowcow
Marcus Geduld
Re: Transition over dynamic content
on Jan 6, 2010 at 1:27:13 am

I have mocked up a demo file for you: http://grumblebee.com/stuff/cow/lines.fla

Here's the (frame one) code that drives everything. Pick it apart and see if it will work for you:


import fl.motion.easing.Quadratic;
import fl.transitions.Tween;
import fl.transitions.TweenEvent;

var xml : XML =
<lines>
<line content="Friends, Romans, countrymen, lend me your ears;" />
<line content="I come to bury Caesar, not to praise him." />
<line content="The evil that men do lives after them;" />
<line content="The good is oft interred with their bones;" />
<line content="So let it be with Caesar. The noble Brutus" />
<line content="Hath told you Caesar was ambitious:" />
<line content="If it were so, it was a grievous fault," />
<line content="And grievously hath Caesar answer'd it." />
<line content="Here, under leave of Brutus and the rest--" />
<line content="For Brutus is an honourable man;" />
<line content="So are they all, all honourable men--" />
<line content="Come I to speak in Caesar's funeral." />
<line content="He was my friend, faithful and just to me:" />
<line content="But Brutus says he was ambitious;" />
<line content="And Brutus is an honourable man." />
<line content="He hath brought many captives home to Rome" />
<line content="Whose ransoms did the general coffers fill:" />
<line content="Did this in Caesar seem ambitious?" />
<line content="When that the poor have cried, Caesar hath wept:" />
<line content="Ambition should be made of sterner stuff:" />
<line content="Yet Brutus says he was ambitious;" />
<line content="And Brutus is an honourable man." />
<line content="You all did see that on the Lupercal" />
<line content="I thrice presented him a kingly crown," />
<line content="Which he did thrice refuse: was this ambition?" />
<line content="Yet Brutus says he was ambitious;" />
<line content="And, sure, he is an honourable man." />
<line content="I speak not to disprove what Brutus spoke," />
<line content="But here I am to speak what I do know." />
<line content="You all did love him once, not without cause:" />
<line content="What cause withholds you then, to mourn for him?" />
<line content="O judgment! thou art fled to brutish beasts," />
<line content="And men have lost their reason. Bear with me;" />
<line content="My heart is in the coffin there with Caesar," />
<line content="And I must pause till it come back to me." />
</lines>;

//values you might want to change
var colors : Array = [ 0xFFA07A, 0xFAFAD2, 0xB0E2FF, 0xE066FF, 0xAFEEEE, 0xFFBBFF ];
var padding : Number = 10;
var roundedCornerWidth : Number = 10;
var strokeThickness : Number = 2;
var strokeColor : int = 0x000000;
var animationDuration : Number = .5;

//leave alone
const UP : String = "up";
const DOWN : String = "down";
const LEFT : String = "left";
const RIGHT : String = "right";
var directions : Array = [ UP, DOWN, LEFT, RIGHT ];

var currentLineDisplay : Sprite;
var counter : int = 0;

var textFormat : TextFormat = new TextFormat();

init();

function init() : void
{
initTextFormat();

transitionLines();

nextButton.addEventListener( MouseEvent.CLICK, transitionLines );
}

function transitionLines( event : MouseEvent = null ) : void
{
if ( thereIsALineToRemove() ) transitionOff( currentLineDisplay );
if ( onLastLine() ) resetCounter();
nextLine();
}

function thereIsALineToRemove() : Boolean
{
if ( currentLineDisplay ) { return true; }
return false;
}

function onLastLine() : Boolean
{
if ( counter == xml.line.length() ) return true;
return false;
}

function getNextLine() : String
{
return xml.line[ counter++ ].@content;
}

function resetCounter() : void
{
counter = 0;
}

function nextLine() : void
{
var line : String;
var newLine : Sprite;

line = getNextLine();
newLine = makeLineDisplay( line );
currentLineDisplay = newLine;
addChild( newLine );
transitionOn( newLine );
}

function initTextFormat() : void
{
textFormat.font = "Arial";
textFormat.size = 20;
textFormat.color = 0x000000;
}

function makeLineDisplay( line : String ) : Sprite
{
var sprite : Sprite = new Sprite();

var textField : TextField = makeTextField( line );
var shape : Shape = makeShape( textField );

centerText( textField, shape );

packSprite( sprite, shape, textField );

return sprite;
}

function makeTextField( line : String ) : TextField
{
var textField : TextField = new TextField();
textField.text = line;
textField.selectable = false;
textField.autoSize = TextFieldAutoSize.LEFT;
textField.setTextFormat( textFormat );
return textField;
}

function makeShape( textField : TextField ) : Shape
{
var shape : Shape = new Shape();

shape.graphics.lineStyle( strokeThickness, strokeColor );
shape.graphics.beginFill( getColor() );
shape.graphics.drawRoundRect( 0, 0, textField.width + padding,
textField.height + padding,
roundedCornerWidth );

return shape;
}

function centerText( textField : TextField, shape : Shape ) : void
{
textField.x = ( shape.width / 2 ) - ( textField.width / 2 );
textField.y = ( shape.height / 2 ) - ( textField.height / 2 );
}

function packSprite( sprite : Sprite, shape : Shape, textField : TextField ) : void
{
sprite.addChild( shape );
sprite.addChild( textField );
}

function getColor() : int
{
return int( getRandomValueFromArray( colors ) );
}

function getDirection() : String
{
return String( getRandomValueFromArray( directions ) );
}

function getRandomValueFromArray( array : Array ) : *
{
return array[ Math.floor( Math.random() * array.length ) ];
}

function transitionOn( target : Sprite ) : void
{
var comingFrom : String = getDirection();
var tweenProperty : String = getTweenProperty( comingFrom );
var endingPosition : Number = getOnStagePosition( comingFrom, target );
var startingPosition : Number = getOffStagePosition( comingFrom, target );

centerSpriteOnStage( target );

//false = not a tween off (because it IS a tween on )
doTween( target, tweenProperty, startingPosition, endingPosition, false );
}

function transitionOff( target : Sprite ) : void
{
var tween : Tween;
var goingTo : String = getDirection();
var tweenProperty : String = getTweenProperty( goingTo );
var startingPosition : Number = getOneDimensionOfTargetPosition( goingTo, target );
var endingPosition : Number = getOffStagePosition( goingTo, target );

//true = yes, it's a tween off (it's not a tween on)
doTween( target, tweenProperty, startingPosition, endingPosition, true );
}

function isVerticalDirection( direction : String ) : Boolean
{
return ( direction == "up" || direction == "down" ) ? true : false;
}

function getOneDimensionOfTargetPosition( direction : String, target ) : Number
{
return isVerticalDirection( direction ) ? target.y : target.x;
}

function getTweenProperty( direction : String ) : String
{
return ( isVerticalDirection( direction ) ) ? "y" : "x";
}

function getOffStagePosition( direction : String, target : Sprite ) : Number
{
if ( direction == "up" ) return - target.height;
else if ( direction == "down" ) return stage.stageHeight + target.height;
else if ( direction == "left" ) return - target.width;
return stage.stageWidth + target.width;
}

function getOnStagePosition( direction : String, target : Sprite ) : Number
{
return ( isVerticalDirection( direction ) ) ?
( stage.stageHeight / 2 ) - ( target.height / 2 ) :
( stage.stageWidth / 2 ) - ( target.width / 2 );
}

function centerSpriteOnStage( target : Sprite ) : void
{
target.x = ( stage.stageWidth / 2 ) - ( target.width / 2 );
target.y = ( stage.stageHeight / 2 ) - ( target.height / 2 );
}

function doTween( target : Sprite, tweenProperty : String,
startingPosition : Number, endingPosition : Number, tweenOff : Boolean )
{
var easingFunction : Function = tweenOff ? Quadratic.easeIn : Quadratic.easeInOut;

var tween : Tween = new Tween( target,
tweenProperty,
easingFunction,
startingPosition,
endingPosition,
animationDuration,
true ); //true means animationDuration is read as seconds, not frames

if ( tweenOff ) tween.addEventListener( TweenEvent.MOTION_FINISH, tweenDoneHandler );

}

function tweenDoneHandler( event : TweenEvent ) : void
{
var tween : Tween = event.target as Tween;
var sprite : Sprite = tween.obj as Sprite;

removeChild( sprite );
sprite = null;

tween.removeEventListener( TweenEvent.MOTION_FINISH, tweenDoneHandler );
}




Author "After Effects Expressions"
Co-author "After Effects For Flash, Flash For After Effects"
Artistic Director, Folding Chair Classical Theatre, Inc
Senior Flash Developer, Zeitbyte.com


Return to posts index

Rob Jackson
Re: Transition over dynamic content
on Jan 6, 2010 at 2:27:09 am

Wow! Thanks Marcus! I will get with our DBA over the next couple days and see if we can get this to do what we're looking for. You went above and beyond, thanks again!


Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2018 CreativeCOW.net All Rights Reserved
[TOP]