Fusion4D – Our graduation project 14/12/11
Hey there!
If you were wondering why there were no posts for the past few months, this is the reason:
I’ve been developing Fusion4D, my graduation project, along with my friend Keila Matsumura.
Fusion4D is an innovative user interface that lets users interact with 3D objects as if the objects were in their hands, allowing them to move, rotate and scale the objects, explode them into its parts, and even navigate in time to see what the objects will look like in the past and future. It uses the Kinect and 3D glasses to achieve an immersive effect.
Take a look at the video below or the project website for all the details!
See you soon!
Roberto
Categories: Kinect, Novidades, WPF
[PT-BR] Novos webcasts sobre WPF no MSDN Brasil 7/11/11
Opa pessoal,
Recentemente eu e meu pai gravamos uma série de webcasts básicos sobre WPF para o MSDN Brasil.
Os meus webcasts foram:
Aproveite e veja a série completa em http://msdn.microsoft.com/pt-br/netframework/dd897462.
Bom estudo!
Roberto
Categories: .net, Artigos, Dicas, WPF
Quick WPF/Silverlight tips to make great videos of your apps 8/2/11
Hello there!
Have you ever developed a great WPF or Silverlight app with lots of smooth animations, but when you tried to capture it in video (using software like Camtasia and Expression Encoder) the animations are jumpy and slow? Have you tried to zoom in to some part of your app only to see that your beautiful UI gets pixelated?
Well this tip is for you! In this post I’ll give some tips from my experience recording the video for Skedle, our newest WPF app. Take a look at the Skedle video below:
You can see that the animations are smooth and the resolution is crisp, even when the video zooms in the application. Also, did you know that the opening “Skedle” animation was actually captured directly from the WPF app?
So let’s jump on to the tips!
1. Slow down animations and then speed up the video
No matter what PC you have and how optimized your app is, you’ll almost never be able to capture animations with the same smoothness and fluidity as the real app. To overcome that, the solution is to slow down all your animations by a factor of 10 or 20 (using the SpeedRatio property), and then speed up the video accordingly in those specific parts.
“But”, you might say, “does that mean I’ll have to change the SpeedRatio of each Storyboard?”. The answer: No for WPF, unfortunately yes for Silverlight! WPF allows you to override properties like SpeedRatio by using Dependency Object metadata overrides (unavailable on Silverlight as of v4 and WP7). Here’s an example that slows down all the animations by a factor of 10 (you can use it on your App.xaml, for instance):
static App() {
Timeline.SpeedRatioProperty.OverrideMetadata(typeof(Storyboard),
new FrameworkPropertyMetadata { DefaultValue = 0.1 });
}
Of course, this tip won’t work if you specifically set the SpeedRatio of any of your animations.
One last point: don’t use this to cheat or lie about the fluidity of your app! If your app is slow and you make it look smooth, users will notice that the first time they try it, and it won’t look good for you.
2. Use Viewbox or RenderTransform to zoom in without losing quality
The next thing you’ll want to do is to record your screencast in a huge resolution in order to enable crisp zoom-in effects on your video. The easiest way to achieve that is to wrap your main layout panel on your window or page in a Viewbox (available on WPF and Silverlight 4) and set its Width and Height to a fixed size, or simply use a ScaleTransform as your panel’s RenderTransform to scale everything up to a fixed factor.
For example, if your app looks good on a 800×600px window but you have a 1920×1200px monitor, you can record your video at double size (1600×1200px), which will allow for zoom effects in a hi-res (720p) video. In WPF or Silverlight, this could look like the following:
<Window>
<!-- ... -->
<Grid>
<Grid.RenderTransform>
<ScaleTransform ScaleX="2" ScaleY="2" />
</Grid.RenderTransform>
<!-- old content goes here, with fixed size -->
<Grid Width="800" Height="600" x:Name="LayoutRoot">
<!--more stuff-->
</Grid>
</Grid>
</Window>
This tip won’t work if you have images on your UI, but you would lose resolution on those anyway when zooming. At least you’re getting the best of the vector-based parts of your interface.
When recording videos for WP7 apps this tip doesn’t apply too well because you’re constrained by the size of the emulator. My recommendation is to record on the maximum size of the emulator (click the magnifier icon, select 100%), which will give you a 800×480px screen – usually more than enough for YouTube videos.
Bonus tip: If you use this to zoom in, try setting the Windows cursors to “Windows Aero (extra large)”, which will give you a mouse pointer that is proportional to your huge interface!
You can also use this tip to record title screens and other animations for your video (for example, the Skedle title animation was zoomed in by a factor of 5). In fact, by combining the two tips, you could create the video entirely in Expression Blend!
So that’s all for today. If you create a cool video using these tips, please post it as a comment!
See you next time!
Roberto
This post is also available on CodeProject.
9 commentsCategories: .net, Dicas, Silverlight, WPF, Windows Phone
New article: Deep Zoom for WPF 24/11/10
I’ve just released my fourth article on CodeProject: Deep Zoom for WPF. I’m very excited about this one: this article explains how to recreate the MultiScaleImage (Deep Zoom) control from Silverlight, compatible with Deep Zoom Composer, Zoom.it, multi-touch and more!
Here’s it goes:
http://www.codeproject.com/KB/WPF/DeepZoom.aspx
If you like this article, please sign in and vote for this article (on the right corner, “Rate this article”), and please leave your comments and suggestions.
All the source code is also being released in CodePlex under the MS-PL licence, to facilitate future improvements and distribution. Please contribute! The project page is located at http://deepzoom.codeplex.com/.
If you like this kind of article, I also recommend my other articles on CodeProject:
- Creating a 3D book-shaped application with speech and ink using WPF 3.5
- Multi-touch development with WPF – A multi-touch RSS reader
- Windows Phone 7 Turnstile Control for Silverlight
Thanks!
Roberto
Categories: .net, Artigos, Open Source, WPF
My first app on the Windows Phone Marketplace: Periodic Table
Hey there!
Now that the Windows Phone 7 devices have been released and the Windows Phone Marketplace is live, my brother Eduardo and I wanted to develop an application to experiment with WP7 and evaluate the Marketplace validation process. So here it is!
Our first app is a Periodic Table for Windows Phone 7 that contains chemical and physical information of all chemical elements. Available for US$0.99!
Screenshots:
Features:
- List view where you can order elements by name, symbol, atomic number, group or series and jump between categories
- Table view that displays the elements in a color-coded periodic table
- Details panorama view with chemical and physical information for each element
- Integrated with Windows Phone themes
Trial limitation: in the trial version, you can only see the details for elements in Group 1 (H, Li, Na, K, Rb, Cs, Fr).
If you like this application or if you have any comments, suggestions or corrections, please review this app on the Marketplace!
Thanks!
Roberto
Categories: Silverlight, Windows Phone
XAMLCast – Interview with Paul Betts about ReactiveXaml 29/10/10
Hey everyone!
[Para os ouvintes brasileiros/portugueses: a entrevista foi feita em inglês mas o vídeo também foi legendado em português! Aproveite!]
Following on our special series of interviews, Roberto interviewed Paul Betts, a Software Development Engineer in the Windows team and creator of ReactiveXaml. In a video special, he talked about Reactive programming and how to apply it to WPF and Silverlight through RxXaml. An awesome introduction to a new paradigm on WPF/SL development!
If you want to download the video, leave a comment in this post. If there’s enough demand, I’ll upload the video (1.6GB!) to a file share.
Here are the links we talked about in the interview:
Reactive Extensions for .net
http://msdn.microsoft.com/en-us/devlabs/ee794896.aspx
ReactiveXaml
http://github.com/xpaulbettsx/ReactiveXaml
ReactiveXaml Google Group
http://groups.google.com/group/reactivexaml
Paul’s Twitter
http://twitter.com/xpaulbettsx
Paul’s Blog
http://blog.paulbetts.org
Also, don’t miss our previous interview with Arturo Toledo about design and Expression!
Subscribe to receive XAMLCast directly on your MP3 player, phone or RSS reader:
- RSS feed: http://www.xamlcast.net
- iTunes/iPod: pcast://www.xamlcast.net
- Zune/Windows Phone 7: zune://subscribe/?XAMLCast=http://www.xamlcast.net
You can follow XAMLCast on Twitter: @xamlcast
- Hashtag #xamlcast
- Follow the XAMLCasters:
Stay tuned for more!
Kelps, Roberto Sonnino and Rodrigo Kono
8 commentsCategories: .net, Dicas, Microsoft, Silverlight, WPF, XAMLCast
XAMLCast – interview with Arturo Toledo 23/10/10
Hey everyone!
[Para os ouvintes brasileiros e portugueses: Este post é em Inglês pois a entrevista foi realizada em Inglês. Os episódios em Português voltam em breve!]
Earlier this year we did some special interviews for XAMLCast with influential people in the WPF/SL community. Well finally we’ve got time to release them!
To start, Roberto interviewed Arturo Toledo, now Sr. Program Manager for the Microsoft Web Platform. He talked about design, Metro, trends and Expression. Don’t miss it!
Here are the links we talked about in the interview:
Smashing Magazine Webdesign Trends
http://www.smashingmagazine.com/2010/01/04/showcase-of-modern-navigation-design-trends/
http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/
http://www.smashingmagazine.com/2009/01/21/current-web-design-trends-for-2009/
August de los Reyes (Surface team) talks about Natural User Experiences (NUI)
http://www.microsoft.com/belux/msdn/nl/chopsticks/default.aspx?id=1406
http://www.webdirections.org/resources/august-de-los-reyes-predicting-the-past/
Gesturecons
http://www.gesturecons.com
Expression Studio
http://www.microsoft.com/expression/
.Toolbox Design School
http://microsoft.com/design/toolbox
Arturo’s Twitter
http://twitter.com/arturot
Arturo’s Blog
http://ux.artu.tv
Subscribe to receive XAMLCast directly on your MP3 player, phone or RSS reader:
- RSS feed: http://www.xamlcast.net
- iTunes/iPod: pcast://www.xamlcast.net
- Zune/Windows Phone 7: zune://subscribe/?XAMLCast=http://www.xamlcast.net
You can follow XAMLCast on Twitter: @xamlcast
- Hashtag #xamlcast
- Follow the XAMLCasters:
Stay tuned for more!
Kelps, Roberto Sonnino and Rodrigo Kono
3 commentsCategories: Expression, Microsoft, Silverlight, WPF, XAMLCast
Learn how to use the Windows Phone 7 Turnstile Control with Victor Gaudioso! 19/10/10
So you’ve seen the WP7 Turnstile Control but don’t know how to use it?
Victor Gaudioso, MVP, has published a cool 13-minute video explaining all you need to know to download the source, rebuild it for WP7, and use it in your apps. The video is available at:
Thanks Victor for your awesome video!
Cheers!
Roberto
Categories: Artigos, Dicas, Silverlight, Windows Phone
New article: Windows Phone 7 Turnstile Control for Silverlight 12/10/10
I’ve just released my third article on CodeProject: recreating the Windows Phone 7 Turnstile Effect on Silverlight (for desktop and Phone). This article explains how to recreate the 3D effect we’ve seen so many times in the Windows Phone 7 videos (or for some lucky ones, on the devices themselves). Then, it shows how to refactor the effect into a reusable control that you can apply to any layout.
Here’s the link:
http://www.codeproject.com/KB/windows-phone-7/WP7Turnstile.aspx
You can see some demos of the effect at http://bit.ly/wptiles and http://bit.ly/wptiles3c .
If you like this article, please sign in and vote for this article (on the right corner, “Rate this article”), and please leave your comments and suggestions.
All the source code is also being released in CodePlex under the MS-PL licence, to facilitate future improvements and distribution. The project page is at http://turnstile.codeplex.com/.
If you like this kind of article, I also recommend my other articles on CodeProject:
- Creating a 3D book-shaped application with speech and ink using WPF 3.5
- Multi-touch development with WPF – A multi-touch RSS reader
Thanks!
Roberto
Categories: Artigos, Microsoft, Open Source, Silverlight, Windows Phone
XAMLCast – Episódio 20 – Visual Studio LightSwitch e 10 coisas que um dev WPF/SL deve saber por Pete Brown 9/9/10
Chegamos ao episódio número 20!
Este episódio comentamos especialmente o Top 10 que o Pete Brown publicou na semana passada. A gravação está bacana e esperamos que gostem!
Links de referência deste podcast:
- Visual Studio LightSwitch
- Participe enviando sua opinião sobre esta nova ferramenta através do twitter ou comentando no posta deste audio.
- Contratação no Time de Expression (Christian Shormman)
- 10 coisas que um desenvolvedor WPF e Silverlight deve saber by Pete Brown
Cadastre e receba o podcast diretamente no seu Ipod, Zune, Mp3 player, etc:
- Feed RSS: http://www.xamlcast.net
- iTunes/iPod: pcast://www.xamlcast.net
- Zune: zune://subscribe/?XAMLCast=http://www.xamlcast.net
O XAMLCast no Twitter: @xamlcast
- Hashtag #xamlcast
- Siga os XAMLCasters:
Até o próximo!
Abraços,
Kelps, Roberto Sonnino e Rodrigo Kono
7 commentsCategories: .net, Dicas, Microsoft, Novidades, Silverlight, WPF, XAMLCast