Behaviors and Actions in Blend3

Behaviors add interactivity to your application without having to write any code.
They are reusable pieces of packaged code that can be dragged onto any object to change its own or
other object’s properties,control storyboards ,change layout properties etc..
Behaviors  not necessarily be invoked by triggers,they work when some conditions are met.

An Action is an object that can do something..
A Trigger reacts to the cause and invokes one or more Actions.

Expression Blend 3 provides by default some behaviors and Actions in the asset panel…..

Behaviours and Actions in Asset Panel

Behaviours and Actions in Asset Panel

Here are some examples:

1) ControlStoryBoardAction: Lets u play,start,stop,pause a storyboard.
Here the storyboard animates the width property of a rectangle on click event of Button.
You have to drag the ControlStoryBoardAction on to your button and set the properties.

Setting properties for ControlStoryBoardAction

Setting properties for ControlStoryBoardAction

Storyboard

Storyboard

Code for animating the width of an ellipse on click of button

Code for animating the width of an ellipse on click of button

2) ChangePropertyAction: Changes the property and lets u animate it over some duration.
Here the opacity of the ellipse varies on click of the button.
Drag the action on button and set the properties.
There are options available to ease in and ease out your animation…over time.

Setting properties for ChangePropertyAction

Setting properties for ChangePropertyAction

Button nd ellipse

Code to change the opacity of ellipse on click of button

Code to change the opacity of ellipse on click of button

3) FluidMotionBehaviour: Animates the layout properties of objects in panel.
Here the button flies in from left in the canvas which is its parent container.
You can set the direction of easing in/out in x and y direction with options available in properties panel

Setting properties for FluidMotionbehaviour

Setting properties for FluidMotionbehaviour

Ease in/out options

Ease in/out options

pic11

Code for changing layout properties of button in canvas

Code for changing layout properties of button in canvas

4) MouseDragElementBehaviour:  It lets the object within the parent container to reposition.
Here the ellipse can be dragged within the boundaries of the button.

MouseDragElementBehaviour properties

MouseDragElementBehaviour properties

pic12

Code for moving ellipse in a button

Code for moving ellipse in a button

5) GotoStateAction: Changes to visual state
Here the rectangle and ellipse colliding animation is captured by a state.
This state is transitioned to on click event of a button.

Setting properties of GotoStateAction

Setting properties of GotoStateAction


pic13

Push state code including storyboard to animate

Push state code including storyboard to animate

Code for switching to push state..

Code for switching to push state..

You can also get more behaviors from the Expression Studio site.
Navigate to Expression Gallery to find more behaviors.

Follow

Get every new post delivered to your Inbox.

Join 36 other followers