Expression >
Forums Home
>
Expression Studio Forums
>
Expression Blend + SketchFlow
>
Newbie programming question on Expression Blend 2 and animations
Newbie programming question on Expression Blend 2 and animations
- I like Expression Blend 2 and use it to get the colors and properties of elements "just right" when coding in Silverlight. But I'm wondering what is the right tool to use for Silverlight Animations? I know how to do animations "programmically", meaning using the StoryBoard and .SetTargetElement, .SetTargetProperty methods, but is there any way of doing this in a sort of "drag and drop" manner using just Expression Blend or some other tool?
Somehow I doubt it, as it would be too easy, but I thought it would be best to ask.
RC
Answers
- I was wondering something too. IT does those animations. But, can I do those animations and make them functional on the web without programming knowledge. Let me explain a little more. I have a decent understanding of web programming. Enough HTML, CSS knowledge. More basic but enough where I can do many things.In blend I am able to create the animations and make it work in blend. The issue I come across is hooking the animation to some type of even so that the animation starts on the web. Maybe a scroll bar. Or when someone enters a page the animation automatically starts. Maybe I want to create my own button. Or make a horse run across the screen. Whatever it is, I want to make that animation happen and then start on the web. Can I do that without knowing C# or VB or what ever language those are designed in. Will blend do it all?
- Marked As Answer byRonConger09 Sunday, November 01, 2009 4:30 PM
All Replies
- Blend is THE tool for Silverlight animations.
To do animations, just create a storyboard and drag your elements around after you set a start and end frame.
Hit the play button to preview what you did.
What are you trying to do exactly and maybe I can help tell you how to do it exactly.
- Really? I did not know that. I did an animation where a rectangular block went across the screen from top left corner to the middle of the page, and changed color gradually. I did this programically.
Please tell me how to do it using drag and drop.
Or just post something easy (like a rectangle going a few inches across the screen) and how to do this in Blend.
Thank you. - I was wondering something too. IT does those animations. But, can I do those animations and make them functional on the web without programming knowledge. Let me explain a little more. I have a decent understanding of web programming. Enough HTML, CSS knowledge. More basic but enough where I can do many things.In blend I am able to create the animations and make it work in blend. The issue I come across is hooking the animation to some type of even so that the animation starts on the web. Maybe a scroll bar. Or when someone enters a page the animation automatically starts. Maybe I want to create my own button. Or make a horse run across the screen. Whatever it is, I want to make that animation happen and then start on the web. Can I do that without knowing C# or VB or what ever language those are designed in. Will blend do it all?
- Marked As Answer byRonConger09 Sunday, November 01, 2009 4:30 PM
- Yes, using Blend 3's built-in Behaviors/Triggers/Actions system, you can pretty much do everything you list. Of course, this system is extensible - so if you don't find something that works to your satisfaction, you can roll your own or download something that others have written.
You can find a quick overview of Behaviors here:
http://blogs.msdn.com/expression/archive/2009/03/23/an-introduction-to-behaviors-triggers-and-actions.aspx
http://www.bing.com/search?q=blend+behaviors&form=QBRE&qs=n
Thanks,
Unni
This posting is provided "AS IS" with no warranties, and confers no rights. Yes, using Blend 3's built-in Behaviors/Triggers/Actions system, you can pretty much do everything you list. Of course, this system is extensible - so if you don't find something that works to your satisfaction, you can roll your own or download something that others have written.
You can find a quick overview of Behaviors here:
http://blogs.msdn.com/expression/archive/2009/03/23/an-introduction-to-behaviors-triggers-and-actions.aspx
http://www.bing.com/search?q=blend+behaviors&form=QBRE&qs=n
Thanks,
Unni
This posting is provided "AS IS" with no warranties, and confers no rights.
Sorry but this link was missing something--no information on it except an opinion. Is there a tutorial somewhere on Behaviors/Triggers/Actions?- Ron,
Basically the only C# you need to know is how to start and stop animations on button clicks or whatever.
If you look at my personal webpage www.steve.tushar.com, it was all done in Silverlight using blend with the Help to VS2008 which isn't need in Blend 3 since you can edit the C# direct in Blend now.
So, for example to run an Animation when you click the Contact button.
1 Create an Animation Timeline for showing the Contact page and Call it "ShowContact"
2. Then make another animation for closing and call it "Hide Contact"
3. Create a Button to trigger the start.
4. Then go the start button's Events page and set the "Click" Property to something like "C1"
(the Event button is in the top right corner (looks like a square with a Lightning bolt on it))
As soon as you click enter a chunk of code will be created for you.
like this
private void C1(object sender, RoutedEventArgs e)
{
}
Then just add in the command to start your animation you created so it looks like this.
private void C1(object sender, RoutedEventArgs e)
{
ShowContact.Begin();
}
Repeat #4 again but for this case I want to set the LOST FOCUS event to "C2" and modify it's code so it looks like this
private void C2(object sender, RoutedEventArgs e)
{
HideContact.Begin();
}
Lost focus is basically a command that happens when any other button is clicked on the screen so it un-selects the start button.
Hope that helps a bit!
Once you get more into it you can do stuff like starting and stopping video playback with stuff like this.
which is basically run the video animation to show it and play it then run the hide video animation and stop playback.
The confusing looking code is created for you.
private void clkTerm(object sender, RoutedEventArgs e)
{
ShowVideoTerminator.Begin();
VideoMain.Play();
}
private void stopTerm(object sender, RoutedEventArgs e)
{
// My_Movie_wmv.Stop ();
HideVideoTerminator.Begin();
VideoMain.Stop();
}
looks scary at first, but once you get into it lots of fun and you really don't need to know C# at all.
I don't and created my page in a matter of hours..........8)
cya!
s>
- Incredible artwork; just checked out your webpage. If I ever need a professional graphics artist I'll know who to call! ;-)
My problem is the opposite: I code in C# and doing stuff in XAML is the problem. I'm getting the hang of it though... But I really need to get on Blend and work more (I'm too busy working under Visual Studio, where you have to hand code everything). One thing I noticed is that my version of Blend (MS Expression Blend 2) does not seem to work seamlessly with Visual Studio 2008. Perhaps I should upgrade to Blend 3.
In any event, I'm going to get to work on doing the animations through Blend, which is the only way to go. If you have any free XAML code for showing a simple animation feel free to upload. I can, via code, make a rectangle bigger, move across the screen, rotate, etc, but I'm talking about stuff like a cartoon boulder falling downhill, etc.
RC
