Paul Yanez

Zendio

admin — Wed, 28 Sep 2011 15:22:01 +0000

Very excited to have worked on a product that just released today. It is a product called Zendio, a Microsoft Outlook plugin. My role was to build the email stationery builder and the email tracking UI. The email stationery creator is simply the easiest to use product I have seen and it provides many powerful features. The tracking component lets you see who has viewed your email, where and when and how many times. There are maps and charts and all viewable in one screen, no popups.

Stationery Creator

Once you select a template, you will see what elements can be editable very easily. There are over 70 custom designed templates for many industries.

To add an image you simply click on the image placeholder and select your image. You are not prompted to upload and wait.

To change your text you simply type in your data. The templates have hints such as “Enter your name” but you can enter anything you want and in any order. One very exciting feature is the way we use designer fonts and make sure it looks the same on all computers. No need to use the typical web based fonts.

You have multiple ways you can edit your image without the need of using 3rd party software. You can use our zoom tool and place your image exactly where you want.

You can also improve the way your image looks by altering the Brightness, Contrast, Saturation and Hue. Again no need to use 3rd party software such as Photoshop.

The default colors of the template have been set, but you can easily change that by selecting from a huge list of colors. You can easily create your own list of colors that map to your brand and save that as a color item.

A really cool feature is if you only want to add your name and not your email or add an image, you can. There is a “Preview” button that will show only what you have filled in and that is what will be saved. You can always add or delete items at anytime.

Most emails from businesses contain a disclaimer, to add one simply click on the disclaimer button and paste your text.

In here is your finished product, in no time at all you have a custom email stationery.

The product has 70 custom designs for industries such as Real Estate, Medical, Law, General Business etc.

For certain clients, everything is pre-populated with their logos, brand colors and fonts.

Tracking and Analytics

You don’t simply get nicely designed emails but the ability to track at an unbelievable level of when, where, how the email was read.

You can track the email you sent out and even see if links within were actually clicked.

Video for Zendio

Nine year old hacker hacks Google’s Lunar Eclipse Doodle

admin — Fri, 17 Jun 2011 03:34:23 +0000

Last week when Google had the Les Paul doodle my son Vincent was so impressed by it he was playing and recording songs for 2 days. When Google removed the guitar app he was so upset and everyday has been looking to see if Google would bring it back or if another cool app would appear.

Finally yesterday Google had a lunar eclipse as one of the O’s in the google logo. Since you really couldn’t interact with it as the Les Paul app he thought about hacking it and decided to build his own.

He was able to code it in 39 lines of code, simplified the lunar eclipse by having only 4 images and manipulating them by applying filters and gradients. It took him a few hours to build and looks forward to creating an original doodle to be posted on Google such as these http://www.google.com/logos/fan.html

He also wants to attend a Techcrunch hackathon ever since I told him about a 14 year old who attended the NYC event.

Vinny is 9 years old and he has been designing and developing on his computer for years. His favorite programs are Adobe Flash, 3D Studio Max and AfterEffects

Video: Flash on Android Is Shockingly Great!!!

admin — Thu, 02 Sep 2010 05:17:06 +0000

On August 31st NewTeeVee wrote an article that is my opinion was simply incorrect - Video: Flash on Android Is Shockingly Bad.

The article was written by Ryan Lawler and in all fairness he did not say things that were incorrect but he did allow a video on his post created by Kevin Tofel that was so biased and technically had absolutely zero creditability. I actually had to respond by not only writing a blog post but by building a demo to show how all the conclusions by Kevin were incorrect. On Twitter, Ryan posts “Having never used Flash on an Android phone before, I’m shocked at how bad the user experience is. Check out the video: http://bit.ly/bHaKkM”. I don’t think saying having never used flash… excuses you from allowing someone who obviously has zero technical cred to voice his opinion on your post.

Ryan states “While in theory Flash video might be a competitive advantage for Android users, in practice it’s difficult to imagine anyone actually trying to watch non-optimized web video on an Android handset, all of which makes one believe that maybe Steve Jobs was right to eschew Flash in lieu of HTML5 on the iPhone and iPad.”

So the million dollar question is how long will it take to optimize web video on an Android handset. I was able to create a significantly different user experience without altering a video or video player in mere minutes. Obviously resizing the controls will help with users actually being able to click on controls but since Flash is vector based, resizing while maintaining quality is simple. I did it here - Flash video on Droid 2. I believe in the very immediate future Flash will be allowed in the iPhone, perphaps SkyFire. One must look not only at the present as this article did but at the possibilities, and Flash is in a great position in the next 6 months to jump leaps and bounds.

Do I blame Kevin for slamming Adobe, I’ve done in the past. But I based my ideas off facts and sinking Flash Player 10 being released several weeks ago as horrible is simply incorrect. The flash developers have simply not caught up to Adobe. And I love it!!!

UPDATE: NewTeeVee’s Ryan Lawler wrote a new article “Is Flash on Android “Shockingly Bad” or ‘Shockingly Great?’”. My video above and quotes are mentioned.

The Mobile War has officially Begun

admin — Sat, 14 Aug 2010 07:35:54 +0000

Most will not realize what happened today, but the release of the Droid 2 today changes everything in the Technology space. Today the mobile wars just got very serious. The IPhone/IPad which has been the darling of the press for the past year is in serious trouble. Why, in one word – Flash player 10.1.
Steve Jobs has said Flash Player is garbage, useless and antiquated and that HTML 5 is the wave of the future. In one device and OS the Droid 2 has put a big kick in the ass to Steve Jobs.
Why do I think this – because I was able in 2 hours to port my video player web based application to be mobile enabled. No code changes, just resized objects and it worked exactly the way it works within a desktop browser.

I didn’t have to buy a MAC at least $2,000, develop in c ancient, upload to the Apple app store, get approved, get rejected and still have to pay $99 and a 30% commission. I just did what I have been doing for the past 15 years ftp to my site and send out the link. No dictatorship or censorship of what I built.

In one app I can verify support for rtmp streaming video, class support, dynamic creation, animation, event handling etc. The ability to support flash player 10.1 is huge, nothing, nothing, nothing will be able to compete against this, period.

Bottom line, the Droid 2 is going to define what Mobile is.
The users of Android will possess the ability to view the entire internet, whereas the Iphone crowd will not have access to at least 30% of the net.

The bottom line is can Adobe and Apple stop acting like Harry and Lloyd and get Flash on the IPhone?

TechCrunch Disrupt 2010 NYC

admin — Fri, 04 Jun 2010 07:07:15 +0000

TechCunch Disrupt 2010 in NYC was huge. One of the main reasons it had appeal to me was a “Hack Day” in which developers had 24 hours to build an app fom scratch. This hack event occurred on the weekend of May 22-23. Then the 3 day event of TechCrunch Disrupt in which the selected StartUps competed in May 24-26. I competed in both events. For HackDay, I had several developers tell me I would win “HackDay”, I didn’t but I gained high praise for what I accomplished from the developers. In the StartUp Battlefield I helped build an application for MovieClips which placed in the top 5 and ended up being a finalist. So to me it was a very productive week.

I got to meet Michael Arrington and Erik Schonfeld from TechCrunch, these guys had written articles on my work for Joost and Hulu.

Michael Arrington – Will Joost Address The Copycats?
Erik Schonfeld – Hulu Gets An Unofficial Desktop App In MyMediaPlayer2

I got to meet Marissa Mayer – Vice President, Search Products & User Experience from Google.

Marissa sat down with me to go over the “Youtube Builder” I had created for TechCrunch HackDay.
All I can say about Marissa is how brilliant she is, as soon as I addressed a feature she was ” oh you are trying to create a … “, obviously I can’t disclose the feature but wow. I was impressed.

On the first day of the conference I looked back and I saw a familiar face, Liz Gannes. Liz was the first writer to cover my video players. She was so nice and it was great to meet her.
What If Joost Were a Web App?

Boxee’s CEO Avner Ronen was speaking at the conference and he was being interviewed by some press. I ran into him and introduced myself “Hi my name is Paul Yanez I build video…” and he replied I know who you are. I thought that was the coolest thing. We spoke for several minutes and exchanged numbers and I look forward to continuing our conversation.

10 minutes before the StartUp Battlefield I was backstage coding. Probably the craziest and coolest thing I have done in my professional career. Meanwhile I had press trying to video record me in an interview.

I got to meet the TechCrunch writers MG Siegler, Leena Rao, Robin Wauters.

OMG, Evelyn was such as pro throughout the Hack weekend and the conference it was so cool to meet her.

Zach and Rich are the coolest cats in this space and they rocked TechCrunch Disrupt. They made it into the Final Five.

The Graffiti felt right being in NYC again.

Fluid Layout Silverlight Video Player Part 1

admin — Thu, 29 Apr 2010 04:17:33 +0000

In the following tutorial we will begin building a fluid layout for a Silverlight video player.
The main goal is to allow the scaling of the middle section of controlbar which houses the progressbar to scale according to the width of the player. The left and right columns will remain a fixed size. There should be no loss of quality of the graphic assets of the controls and the position of each control should remain relative of it’s container at all times.

Steps
1- Build a wireframe of the containers you are trying to scale and have as fixed sizes
2- Use the Grid component as your layout component
3- Areas that you want to remain a fixed size, set the “ColumnDefinition Width” to a numerical value – ex: the pause component is fixed – ColumnDefinition Width=”50″
4- Areas that you want to scale, set the “ColumnDefinition Width” to “*” – ex: the middle section which contains the progressbar

Use the slider below to see the fluid layout

Wireframe of the videoplayer and the scaling we want to achieve

XAML code

The controls in this tutorial are not functional, the controls are simply meant to be placed with a fluid layout. The following are tutorials on building a video player
Part 1 – Building a Play-Pause control
Part 2 – Loading external video
Part 3 – Building a Progress Bar
Part 4 – Building a Download Progress Bar
Part 5 – Building a Volume Control
Part 6 – Building the Time Display
Part 7 – Volume Slider control
Part 8 – Start playing button

Creating custom Silverlight buttons with Images Gradients and Transitions

admin — Tue, 27 Apr 2010 18:26:00 +0000

In the following tutorial I will show how to create your own custom button with images, gradients and transitions.

1- import an image and place on the artboard
2- add a rectangle with a radial gradient the same width and height as the image
3- add a rectangle with no fill and grey color as the border
4- select all 3 objects, right click and group into a canvas
5- right click and select make into usercontrol
6- select button as the type of usercontrol you want to create
7- right click and select “edit template/edit current”
8- select the states panel and go to the “mouseover” state and set the gradient’s opacity property to “0″ and change the stroke color of the rectangle from grey to white
9- change the transition duration to 0.3 sec and set the transition to “cubic in”

Silverlight

Import an image and place on the artboard

Add a rectangle with a radial gradient the same width and height as the image

Add a rectangle with no fill and grey color as the border

Select all 3 objects

Group into a canvas

Right click and select make into usercontrol, select button as the type of usercontrol you want to create

Right click and select “edit template/edit current”, select the states panel and go to the “mouseover” state and set the gradient’s opacity property to “0″ and change the stroke color of the rectangle from grey to white

Change the transition duration to 0.3 sec and set the transition to “cubic in”

XAML code

XAML code – Resource Dictionary

Expression Blend Tip #2 in Rendering Effects

admin — Tue, 27 Apr 2010 00:48:26 +0000

In a previous tip I showed how Expression Blend does not render effects if you are zoomed in above 400%. More times than not I am zoomed in well above 400% when I am designing UI components. I found out how to change the zoom setting to 800% and render the effects properly and allow me to design how I am accustomed to.

To change the percentage that effects will be rendered
1- Go to Tools/Options
2- Select “Artboard” from the list
3- Change the “Zoom threshold” from 400% to 800%

Effects now render even when zoomed in at 800%

Gradient capabilities in Silverlight fonts

admin — Mon, 26 Apr 2010 02:52:48 +0000

In the following tutorial I will show how extensive the font capabilities in Silverlight are. Being able to display beautiful fonts within xaml allows the ability to programmatically alter a designed font with gradients and drop shadows applied.

1- place text on artboard
2- select the gradient tab on the properties panel and apply any style gradient

Silverlight

XAML code

Expression Blend Tip in Rendering Effects

admin — Fri, 23 Apr 2010 09:55:15 +0000

This is a tip for developers using Expression Blend creating effects. Effects do not render if you are zoomed in above 400%. More times than not I am zoomed in well above 400% when I am designing UI components. So I was confused as to why I couldn’t see the rollover effect that I was applying to my component.

Zoomed in at 800%, effects are not visible

Zoomed in at 400%, effects render

Fluid layout and Fullscreen in Silverlight

admin — Wed, 21 Apr 2010 03:00:57 +0000

In this tutorial we will have a Silverlight application take up the entire webpage and have the capablity to go fullscreen. This will allow you to create Silverlight applications that take up 100% of the width and height of html pages.

1- Place a rectangle on the stage
2- Set the margins to Margin=”8,8,8,42″ which will place the rectangle at 8 from the left, right and top and 42 from the bottom.
3- Place a button on the stage and set its width to 120
4- With the button selected select the “events” panel
5- Enter “toggleFullscreen” on the Click event
6- Add code to handle the toggling of the fullscreen window status

Click the button to go Fullscreen and have a fluid layout

XAML code

C# code


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace Fullscreen
{
	public partial class MainPage : UserControl
	{
		public MainPage()
		{
			InitializeComponent();
		}

		private void toggleFullscreen(object sender, System.Windows.RoutedEventArgs e)
		{
			if (Application.Current.Host.Content.IsFullScreen)
			{
				Application.Current.Host.Content.IsFullScreen = false;
			}
			else
			{
				Application.Current.Host.Content.IsFullScreen = true;
			}
		}
	}
}

New Bimmer

admin — Sat, 17 Apr 2010 05:04:10 +0000

I finally got my new Bimmer today…

My kids posing.

Building a Windows Phone 7 Twitter Application using Silverlight in Blend 4 – Part2

admin — Fri, 26 Mar 2010 10:15:21 +0000

This is part 2 of “Building a Windows Phone 7 Twitter Application using Silverlight in Blend 4″. In this tutorial we will build a Twitter user profile screen. You will be able to display the user image, follower count, friend count, status post count, user description and load the user page background image.

View all parts of the tutorial
Part 1 – Search by Twitter User status
Part 2 – Display Twitter user details

Screenshot of user profile screen

XAML code

C# code


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Xml.Linq;
using System.Windows.Media.Imaging;

namespace WindowsPhoneApplication2
{
    public partial class MainPage : PhoneApplicationPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

		    private void lookup_Click(object sender, System.Windows.RoutedEventArgs e)
        {
        	WebClient twitter = new WebClient();
			twitter.DownloadStringCompleted += new DownloadStringCompletedEventHandler(twitter_DownloadStringCompleted);
			twitter.DownloadStringAsync(new Uri("http://twitter.com/users/" + username.Text +".xml"));
		}

		void twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
		{
			if(e.Error != null)
				return;

			XElement xmlTweets = XElement.Parse(e.Result);
			img.Source = new BitmapImage(new Uri(xmlTweets.Element("profile_image_url").Value, UriKind.Absolute));
			twittername.Text = xmlTweets.Element("name").Value;
			followers.Text = xmlTweets.Element("followers_count").Value;
			friends.Text = xmlTweets.Element("friends_count").Value;
			statuses.Text = xmlTweets.Element("statuses_count").Value;
			description.Text = xmlTweets.Element("description").Value;
			imgBackground.Source = new BitmapImage(new Uri(xmlTweets.Element("profile_background_image_url").Value, UriKind.Absolute));
		}
    }
}

Windows Phone Application Tip in Blend 4

admin — Tue, 23 Mar 2010 09:41:35 +0000

This is a tip for developers using Blend 4 to create Windows Phone Applications. By default it seems that the ability to rotate the emulator and it contents is not set. A bit of code is necessary to have the contents of the application rotate properly with the emulator.

Note: In Visual Studio the code is included, this is a Blend 4 specific issue.

Default behavior

After applying code

C# code – Add line 21 SupportedOrientations =

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace OrientationTest
{
    public partial class MainPage : PhoneApplicationPage
    {
        public MainPage()
        {
            InitializeComponent();
			SupportedOrientations = SupportedPageOrientation.Portrait | SupportedPageOrientation.Landscape;
        }
    }
}

Building a Windows Phone 7 Twitter Application using Silverlight in Blend 4

admin — Mon, 22 Mar 2010 02:55:18 +0000

First I would like to say that the code is from Scott Gu’s article Building a Windows Phone 7 Twitter Application using Silverlight. I am very excited that Silverlight will soon be capable of working on Windows Phones. Designing for the phone brings numerous design and user experience problems not associated with the average 20-30 inch computer monitors. About 6 months ago I began tackling those problems in my previous Blend tutorials for layout, animation and video within a iPhone interface.

Goal, I wanted to see if I could extend Scott’s app to do the following:

Add a custom design
Add functionality – currently you can only look up a user’s timeline. The goal would be to be able to post, search etc to Twitter, basically a full fledged Twitter application. This tutorial tackles the design.
Add a main screen to access the different screens with animation for the screen changes.

Challenges
Gradients in Blend 4 seem to not work well as of yet. A major part of my design was to use a gradient as a background but using a rectangle with a gradient produced banding. As a last resort I imported a gradient jpg and it produced slightly better results.

The 100% UI size in Blend is not the same as the emulator. If you want to design to the emulator the dimensions are 335×558.
If you want the UI in Blend to match the emulator set the layout to 70%.

To remove the default color of the list box Property=”Background” Value=”Transparent”

View all parts of the tutorial
Part 1 – Search by Twitter User status
Part 2 – Display Twitter user details

Screenshots of original app and new design applied

XAML code

C# code


using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using System.Xml.Linq;

namespace WindowsPhoneApplication2
{
    public partial class MainPage : PhoneApplicationPage
    {
        public MainPage()
        {
            InitializeComponent();
        }

		    private void lookup_Click(object sender, System.Windows.RoutedEventArgs e)
        {
        	WebClient twitter = new WebClient();
			twitter.DownloadStringCompleted += new DownloadStringCompletedEventHandler(twitter_DownloadStringCompleted);
        	twitter.DownloadStringAsync(new Uri("http://api.twitter.com/1/statuses/user_timeline.xml?screen_name=" + username.Text ));
		}

		void twitter_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
		{
			if(e.Error != null)
				return;

			XElement xmlTweets = XElement.Parse(e.Result);

			listBox1.ItemsSource = from tweet in xmlTweets.Descendants("status")
				select new TwitterItem
			{
				ImageSource = tweet.Element("user").Element("profile_image_url").Value,
				Message = tweet.Element("text").Value,
				UserName = tweet.Element("user").Element("screen_name").Value
			};
		}
    }
}

Press Release on MovieClips video player

admin — Mon, 22 Mar 2010 02:52:21 +0000

MOVIECLIPS.com Woos a Pirate to Build the Ultimate Movie Clip Viewing Player – Movie Buffs Rejoice! USERS CAN NOW EDIT CLIPS DIRECTLY AND CHOOSE THEIR OWN MOVIE MOMENTS

SANTA MONICA, California (March 11, 2010) – MOVIECLIPS.com, home of the largest and most diverse collection of free, licensed movie scenes anywhere on the web, today launched a new media player, the Movieclips Player, custom-built by pirate developer Paul Yanez. The Movieclips Player is game-changing for film lovers, delivering clips in their original aspect ratio, and making it super-easy for users to find, edit, and share their favorite movie scenes. The announcement was made by MOVIECLIPS.com co-founders, Zach James and Rich Raddon.
Yanez gained Internet notoriety last year when he created a rogue, open source media player that streamed Hulu content, ads and all, while Hulu was still in beta. He did this in his spare time. And he released it for free.
“We wanted the ultimate movie clip player and we thought of Paul, he is the best,” said James, “ We were familiar with Paul’s controversy with Hulu when they shut down the stream, and we watched a very public cat-and-mouse game that in the end, nobody won — especially not movie lovers.”

The Movieclips Player’s four unique features:
• Size matters: The Movieclips Player is one of the first embeddable players to respect the original aspect ratio of every feature film
• Gives bloggers and Facebook users the tools to “trim-and-share” clips down to just their favorite movie quotes: “You talkin’ to me?”
• Editing and sharing happens within the Movieclips Player environment – the toolbar just slides up to reveal more tools
• Full movie dialogue search engine built into every player
“Only people who care about films as much as we do would go to this length to ensure a great viewing experience.” said Raddon, former Director of the Los Angeles Film Festival. “We had the chance to set a new standard, and to actually rethink how to connect with movies online. We made it easy to watch a clip from Inglourious Basterds or Elf, edit the clip down to your favorite quote, and share it on Facebook or a blog, etc.
You can also learn more about the film or see related clips, search full dialogue or buy the DVD – we built that into a single, elegant player, so everything is only a click away.”
“In the end, it’s just a player,” added James. “But how we approached this player – who we hired to build it and why we incorporated these features – says something important about how we view the world and why we started this company. By giving movie fans the tools to watch and share their favorite scenes easily, the studios suddenly have allies recommending their products. Every time a movie fan shares a clip from The Big Lebowski or This Is Spinal Tap on Facebook or on their blog, it’s a reminder to their friends of each movie’s value in our lives.”
MOVIECLIPS.com took its service worldwide in late February and opened up access to its API for approved developers, giving this community the opportunity to innovate using MOVIECLIPS.com’s library of more than 12,000 clips, each tagged with rich metadata, Find and share clips from your favorite films, and get details about becoming an approved MOVIECLIPS.com developer, at movieclips.com.

About MOVIECLIPS.com
Launched in December 2009, MOVIECLIPS.com is a premium online video destination offering audiences the largest and most diverse collection of movie scenes. MOVIECLIPS.com allows fans to find, watch and share more than 12,000 movie clips from the libraries of most major Hollywood studios. Each clip is tagged with up to 1,000 pieces of data (dialogue, actor, director, action, mood, etc) to make the most searchable collection of movie scenes on the web. Go to movieclips.com for more information.

Vinny’s first design gig

admin — Tue, 02 Mar 2010 22:18:30 +0000

You gotta love Facebook and the power of the internet. After Vinny posted his illustration of the Hulk within days was offered a project to make a company logo. A friend of a friend needed some Adobe Illustrator work done and my friend thought of Vinny. After seeing the logo, the owner of Concentric Clothing asked Vinny if he wanted to continue with a new project. Redoing the clothing line’s shirt artwork in Adobe Illustrator, see below.

My son Vinny just turned 8 and he has been designing and developing on his computer for years. This is his first professional project. Vinny is becoming very independent deciding to buy 2 pizza pies for the family on a Monday night instead of the usual Friday pizza night.

Vinny created all the inks and coloring in Adobe Illustrator CS4.

To see larger versions click on the images above.

Did Adobe get advice from Leon on how to respond to Steve Jobs?

admin — Wed, 03 Feb 2010 16:15:19 +0000

A few days ago Steve Jobs said that Adobe is lazy and that the new iPad doesn’t have Flash because ‘whenever a Mac crashes, more often than not, it’s because of Flash”. “No one will be using Flash. The world is moving to HTML5.” I wrote about this here.

I wasn’t upset with Steve that’s his job to push his product and if that means putting down your competitors than so be it. I was upset with Adobe for never defending themselves whenever Steve did this, and it has happened multiple times.

I am glad to see Adobe’s CTO Kevin Lynch posted this response on his blog which was covered by Techcrunch “Adobe CTO Kevin Lynch Defends Flash, Warns HTML5 Will Throw The Web “Back To The Dark Ages Of Video”.

I wonder if Leon was brought into Adobe to give advice on how to handle Mr Steve Jobs. Either way, good job Kevin.

Steve Jobs Calls Adobe Lazy and blames Flash for crashing Macs

admin — Mon, 01 Feb 2010 03:53:24 +0000

Jobs recently held a town hall meeting at Apple and said that Adobe is lazy and that the new iPad doesn’t have Flash because “whenever a Mac crashes, more often than not, it’s because of Flash”. “No one will be using Flash. The world is moving to HTML5.”

So in few sentences Steve basically calls Adobe incapable of producing quality software, irrelevant and calls them lazy which is perhaps the worst thing an engineer could be called. Just think of what the mood at engineering department at Adobe headquarters is like right now. Do you honestly believe that they will get any quailty people applying now?

Can Adobe get a CEO with balls who can actually do something when stuff like this happens? I had to look it up on Google, the president and chief executive officer of Adobe is Shantanu Narayen. Good job Shantanu .

Seems like Shantanu needs a few ideas so here goes.
Shantanu, could Adobe not release CS5 for the Mac and see how relevant Adobe is to the purchases of Mac’s and see if Steve changes his tune. The main reason people buy a Mac is to be creative and the programs most creatives use is Adobe. Am I missing something here, can Adobe at least delay releases to the Mac. Honestly if Steve Jobs said anything like this about Microsoft when Bill Gates was in charge, tell me Bill wouldn’t have unleashed hell on Apple. But Adobe just takes it and will soon be so insignificant no one will will even bother to insult them.

Shantanu, how about calling out Apple on Objective C and how horrible it is to develop in it. And that the main reason of not letting Flash on the iPad is to not unleash millions of Flash developers onto their platform.

Shantanu, how about going on the offensive and saying how Youtube and all web video would not exist unless it was for Flash. How about questioning Apple on why Flash works fine on Android, why doesn’t it work on the iPhone? Shantanu say anything, do anything, but being silent and taking the high road is not the right play.

cnet arrticle

Vinny’s second Illustration

admin — Wed, 27 Jan 2010 17:06:14 +0000

My son Vinny just turned 8 and he has been designing and developing on his computer for years. This is his 2nd design and it took him 2 weeks to complete.

He based this off the super-hero ‘The Incredible Hulk’ and the original artwork is from Marvel comics. Vinny created all the inks and coloring in Adobe Illustrator CS4.

To see larger version click on the image or here

My son Anthony’s first design work on the web

admin — Fri, 15 Jan 2010 07:01:13 +0000

My 12 year old son Anthony has been in front of a computer on his grandpa’s lap since the age of 2. At age 4 he started designing and animating in Adobe Flash. At age 8 he got his own computer and started programming. Lately, he has taken an interest in video, he has his own video and digital cameras and is using Adobe Premiere and AfterEffects.

Anthony based this Illustration off the super-hero Spiderman and the original artwork is from Marvel comics. Anthony created all the inks and coloring in Adobe Illustrator CS4.

My son Vinny’s first design work on the web

admin — Thu, 14 Jan 2010 07:59:28 +0000

My son Vinny just turned 8 and he has been designing and developing on his computer for years. This is his first design that has gone up on the internet.

He based this off his favorite super-hero Spiderman and the original artwork is from Marvel comics. Vinny created all the inks and coloring in Adobe Illustrator CS4.

Reversing Gradient stops in Silverlight

admin — Tue, 12 Jan 2010 07:43:18 +0000

In this tutorial I will show how to reverse the gradient stops in Microsoft Blend.

Complex gradients
A complex gradient is a gradient that has multiple gradient stops such as the image below which has 7.

Reverse Gradient stops button
You can perform a reversal of all your gradient stops by one simple click. In the image below the arrow is pointing to the button in the properties panel to reverse the gradient stops.

Perfect reversal
As you can see the gradient stops have been reversed exactly, there is no need to guess.

Reversed Gradient
And in one simple click you can have a perfectly reversed gradient.

Using RotationY to rotate Objects in Silverlight

admin — Thu, 31 Dec 2009 05:34:52 +0000

In this tutorial we will rotate an image left to right with a slider control.

Steps
1- Place an image on the stage
2- on the image add a PlaneProjection, this can easily be done by editing the Projection / Rotation / Y in the properties panel
3- name the PlaneProjection to x:Name=”rotater”
4- add a slider to the stage
5- name the slider x:Name=”rotateYSlider”
6- on the slider set ValueChanged=”changeRotateY”

View all parts of the tutorial
Part 1 – Scaling Objects with a Slider control in Silverlight
Part 2 – Using RotationX to rotate Objects in Silverlight
Part 3 – Using RotationY to rotate Objects in Silverlight

Use the Rotate Y slider to rotate the image

XAML code

C# code


private void changeRotateY(object sender, System.Windows.RoutedPropertyChangedEventArgs e)
{
	rotater.RotationY = rotateYSlider.Value;
	rotater.RotationY = rotateYSlider.Value;
}

Embedding fonts in Silverlight

admin — Mon, 28 Dec 2009 03:04:58 +0000

In this tutorial I will show how to embed a font in Silverlight and show the increase in file size that will occur when doing so.

Placing a Textblock component on the stage and using a built-in Silverlight font such as “Arial” the xap file created will be 4 kb. However, if try to use a font such as “Myriad Pro” when you view the results panel you will see a message “The font, Myriad Pro, isn’t a built-in Silverlight font. You must embed this font for it to display in your Silverlight Application.”

Embedding a font is as simple as selecting the “Embed” checkbox in the text properties panel.
One thing to note when embedding the font “Myriad Pro” the xap file size becomes 831 kb.

XAML code

Using RotationX to rotate Objects in Silverlight

admin — Sun, 13 Dec 2009 23:02:04 +0000

In this tutorial we will rotate an image with a slider control. This is the 2nd tutorial of image transformations, the first tutorial ‘Scaling Objects with a Slider control in Silverlight’

Steps
1- Place an image on the stage
2- on the image add a PlaneProjection, this can easily be done by editing the Projection / Rotation / X in the properties panel
3- name RotationX to x:Name=”rotateX”
4- add a slider to the stage
5- name the slider x:Name=”rotateXSlider”
6- on the slider set ValueChanged=”changeRotateX”

Use the Rotate X slider to rotate the image

XAML code

C# code


private void changeRotateX(object sender, System.Windows.RoutedPropertyChangedEventArgs e)
{
	rotateX.RotationX = rotateXSlider.Value;
	rotateX.RotationX = rotateXSlider.Value;
}

Silverlight Tip – Creating rounded corners in Silverlight

admin — Sun, 13 Dec 2009 02:37:42 +0000

In this tutorial I will show how to create a rounded corner on an object. In a previous tutorial Scaling Objects with a Slider control in Silverlight, The design of the slider control I wanted had a rounded edge. Programmatically you can set the RadiusX and RadiusY properties but I wanted to do this within Microsoft Blend design mode.

The object I wanted to edit was the ‘horizontaltracklargechangedecreaserepeatbutton’ layer in the slider control. Once I was within the object I created a ‘Rectangle’, selected it and handles in the top left corner appeared. Simply drag in and out on the handles and all corners of the objects will go from square to rounded. FYI, the RadiusX and RadiusY of this control is 2.75.

Scaling Objects with a Slider control in Silverlight

admin — Sun, 13 Dec 2009 01:03:36 +0000

In this tutorial we will scale an image with a slider control.

Steps
1- Place an image on the stage
2- add a transform group to that image, this can easily be accomplished by editing the scale property
3- name ScaleX to x:Name=”scaleTransform”
4- add a slider to the stage
5- name the slider x:Name=”scaleSlider”
6- on the slider set ValueChanged=”changeScale”

Use the slider to scale the image

XAML code

C# code


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace ScaleObject
{
	public partial class MainPage : UserControl
	{
		public MainPage()
		{
			InitializeComponent();
			scaleSlider.Value = 7;
		}

		private void changeScale(object sender, System.Windows.RoutedPropertyChangedEventArgs e)
		{
			scaleTransform.ScaleX = scaleSlider.Value;
   			scaleTransform.ScaleY = scaleSlider.Value;
		}
	}
}

Building a Start Playing button for your Hulu inspired SilverLight video player

admin — Fri, 11 Dec 2009 05:14:07 +0000

In this tutorial we will create a start play button on launch of your Hulu inspired SilverLight video player.

Steps
1- Set the media element’s AutoPlay=”False”
2- Place a button in the middle of the stage
3- Replace the graphics on normal and mouseover states
4- on click of start button set the buttons visibility to collapsed, set the media element to play

View all parts of the tutorial
Part 1 – Building a Play-Pause control
Part 2 – Loading external video
Part 3 – Building a Progress Bar
Part 4 – Building a Download Progress Bar
Part 5 – Building a Volume Control
Part 6 – Building the Time Display
Part 7 – Volume Slider control
Part 8 – Start playing button

XAML code

C# code


	startButton.Visibility = Visibility.Collapsed;
	controlBar.Visibility = Visibility.Visible;
	mp.Play();

Building a Volume Slider for your Hulu inspired SilverLight video player

admin — Fri, 11 Dec 2009 00:16:19 +0000

In this tutorial we will edit a slider control and use it as our volume slider control. This volume slider will allow the user the ability to scrub the volume from 0-100%.

Steps
1- Place a slider control on the stage
2- Right click on the slider control and select “Edit Template/Edit a copy”
3- Replace the graphics for ‘HorizontalThumb’ and ‘TrackRectangle’
4- Databind the Media Element control ‘volume’ property to the volume slider
5- Set the value property of the volume slider to 1

XAML code

Silverlight Tip – Editing selections from the Objects and Timeline panel

admin — Thu, 10 Dec 2009 02:13:47 +0000

To me, it is the little things that make you more productive within a given environment that I constantly search for. Since I have only been working with Silverlight for less than 2 months there are cool things I find almost daily. I have not shared those little things since they are not full fledged tutorials, but that I am changing that today. If it helped me than perphaps it can help someone else, and that is the main reason I started to blog. I was building a custom volume slider for my video player and I was having difficulty selecting the ‘HorizontalThumb’ object from the Blend horizontal slider component and found a way to avoid wasting time.

When you are editing a Silverlight component within Blend to make your own custom component you will see multiple objects. Selecting the object you want to edit can become frustrating. Simply select the object you want to edit by selecting it from the Objects and Timeline layer and right click and do your editing.

Using Transition Preview within Microsoft Blend

admin — Mon, 07 Dec 2009 00:22:02 +0000

In this video I demonstrate the Transition Preview within Microsoft Expression Blend. This will save lots of time when creating states and not having to run the project.

Building the Time Slider control for your Hulu inspired SilverLight video player

admin — Sun, 06 Dec 2009 15:19:23 +0000

This is part 6 in our series of building a Hulu inspired video player. In this tutorial we will be building the slider time display control.

We will take the static design of UI design

1- Replace a slider of type hSlider
2- Replace the design elements

XAML code

C# code


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace HuluSilverLight
{
	public partial class hulu_player : UserControl
	{
		public double barSize;
		System.Windows.Threading.DispatcherTimer myDispatcherTimer = new System.Windows.Threading.DispatcherTimer();

		public hulu_player()
		{
			InitializeComponent();
			myDispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 500);
            myDispatcherTimer.Tick += new EventHandler(setTimeControl);
            myDispatcherTimer.Start();
		}

		private void setTimeControl(object o, EventArgs sender)
		{
			current.Text = String.Format("{0:00}:{1:00}:{2:00}", mp.Position.Hours, mp.Position.Minutes, mp.Position.Seconds);
		}

		private void downloadProgressHandler(object sender, System.Windows.RoutedEventArgs e)
		{

			total.Text = String.Format("{0:00}:{1:00}:{2:00}", mp.NaturalDuration.TimeSpan.Hours, mp.NaturalDuration.TimeSpan.Minutes, mp.NaturalDuration.TimeSpan.Seconds);
		}
	}
}

Building a Volume Control for your Hulu inspired SilverLight video player

admin — Sat, 05 Dec 2009 18:07:18 +0000

This is Part 5 in a series of tutorials demonstrating how to build a Hulu inspired video player in Silverlight 3.
In this video we will show how to databind a media element’s isMuted property to a toggle button volume control’s isChecked property.

XAML code

Joost is officially dead. I am very upset…

admin — Sat, 28 Nov 2009 03:25:49 +0000

Wow, I just found out that Joost is officially no more. There are many times when you know that something will happen but you figure, no way that this is going to happen.

In the early part of 2007 Joost was the shit. They had articles being written about them almost daily and each one of them were all praising Joost as the next big thing. There was no reason to believe that this wouldn’t be the case, they had the infamous Kazaa and Skype founders Niklas Zennström and Janus Friis as founders. The founders had succeeded in everything they touched and had made billions together and this was going to be another industry the pair was was going to cause havoc to.

For 6 months I was amazed at the presentation of Joost, fullscreen video with overlays that contained menu navigation and widgets. Anyone saying that they were not the first to do so in this manner or scale is either lying or simply does not know what they are talking about. Everyone in the video space today owes alot to the innovation Joost created back then.

There was one annoying thing that kept happening in the first half of 2007, I had to update the Joost desktop application almost daily. It basically would not work unless I updated the entire application, granted it was beta software but come on, this is 2007 and I am still doing this?

In the same timeframe I was seriously thinking of starting a blog. I had installed WordPress, had a design for my blog and within a few hours of writing my first article I realized I was just simply horrible in expressing my ideas in words, so I scraped the blog plan. My first article was,”Joost should be web based”, basically to drop the desktop approach and become web based. Since I couldn’t write a lick I did what was instinctive for me which was to reverse engineer the Joost desktop application into a web based Flash application. Flash was simple to me and was web based, lightweight and auto updated and could do everything the Joost desktop could do.

I sent my Joost web based app to a few friends the night before my birthday who I trusted and were the best user experience, designers, project managers and engineers wanting to know what they thought. My friends started sending the link out and my app became viral. I remember this clearly because the next day I am on Moonlight beach and then eating at a restaurant on Route 101 just chilling on my birthday and I am being called by blogs asking me questions for their articles.

Newteeve did a writeup and others soon others followed, then my app went on the homepage of Digg.com.

The whirlwind had started, I got sitdowns with the CEO’s of just about every video company, I met with Chad, the CEO of Youtube and his team, met with Yahoo. I was being flown around the country to meet CEO’s and VC’s because of my blog concept, this was totally cool.

The obvious thing I thought would happen was that Joost would contact me and we would work together. I remember Chad asking me “What does Mike think about what you are doing”. I just didn’t answer him because I had never heard from Mike.

I obviously thought Joost would change and adapt a web based approach. My app clearly showed the public wanted this, the blogs, Digg, users all voted and wanted a web based player. Joost’s CEO Mike Volpi one month later promised to do so, but he did not do so for well over a year. Guess what happened in that timeframe, Hulu. Hulu took the Joost concept and went web based and just crushed Joost, Joost never recovered.

Two years later, over the summer of 2009 I got a call from a senior person at Joost asking if I would like to collaborate on my Hulu Adobe Air player for Joost. I had the pleasure of working with the talented creative and engineering teams from Joost on my Adobe Air player of Joost.com.

Because of Joost I now have thousands of emails from users who have downloaded software I have built in the past 2 years. I now have the ability to now build a concept and have thousands immediately view it and give me feedback, this is huge. If not for Joost I would never have this ability, so I am forever thankful to Joost.

To me, I believe Joost was ahead of its time and I am very sad that this has happened. Today we have lost a company which should have made it, but didn’t.

New iMac for my Home office

admin — Fri, 27 Nov 2009 05:00:30 +0000

Finally got my Mac, time to start developing iPhone apps. Really digging the way my office looks at night now.

Drag and Drop images from Filesystem to Silverlight 4 Applications

admin — Thu, 26 Nov 2009 19:27:37 +0000

In this video I show how to drag and drop images from the filesystem into a Silverlight 4 application.
On an image component simply add a drop event and set AllowDrop=”True”
You will need to download the tools to build Silverlight 4 beta applications, make sure to download Microsoft Expression Blend 4.

XAML code

C# code


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.IO;
using System.Windows.Media.Imaging;

namespace SilverlightApplication14
{
	public partial class IPhoneMain : UserControl
	{
		public IPhoneMain()
		{
			InitializeComponent();
		}

		private void OnDropEvent(object sender, DragEventArgs e)
		{
			FileInfo[] files = e.Data.GetData(DataFormats.FileDrop) as FileInfo[];

			foreach (FileInfo fileInfo in files)
			{
				FileStream fs = fileInfo.OpenRead();
				BitmapImage bi = new BitmapImage();
				bi.SetSource(fs);
				img.Source = bi;
				fs.Close();
			}
		}
	}
}

Microsoft blows past Flash and unleashes Silverlight 4 Beta

admin — Thu, 19 Nov 2009 23:50:43 +0000

For the past 2 weeks I have been saying Adobe Flash is done because of Silverlight 3 part1 and part 2. Now, Microsoft releases the beta of Silverlight 4 and I can honestly say that Adobe Flash should get out of the RIA arena entirely. Is this a stretch?, why did anyone think an animation product could compete in the RIA space in the first place?

The manner in which Microsoft released the beta of Silverlight 4 at the Professional Developer Conference on Nov 18th shows me one thing, Microsoft is not only very serious about being the leader in the RIA arena but they are looking to crush the competition, namely Adobe Flash.

First, the speed in which this beta was announced, just 3 months after the release of Silverlight 3. The release of Silverlight 3 was huge, but this beta just completely blows it away. The demos presented at the PDC conference by Scott Guthrie were simply great and just sent the developers into a frenzy.

Secondly, the new features in Silverlight 4 are simply unbelievable. The new features include:
Webcam and microphone support
Printing
Library sharing with WPF
Rich Text
Clipboard access
Right click support
Mouse wheel
Drag and Drop from desktop
MVVM
WCF RIA Services
New Windowing API’s
Notification pop-up support
HTML support
Keyboard in Fullscreen mode
Hardware device access

The planned release of Silverlight 4 is in the first half of 2010.

I love how folks are not agreeing with me on the end of Adobe Flash and sending me emails, the bottom line is that I see this as the modern day “Browser wars” when Microsoft went all out against Netscape and crushed them. I see Microsoft doing the same in the RIA space and Microsoft is going all out to win. Microsoft doing a release like this in 3 months, I ask myself how many resources were ported over from other products to this release?

Developers can start building apps but the player is not pubicly available
Silverlight 4 Beta Information – Get all your downloads here
Silverlight 4 Beta – A guide to the new features
Silverlight 4 runtime

The End of Adobe Flash – Part 2

admin — Wed, 18 Nov 2009 13:13:13 +0000

This is an update to my article on ‘SilverLight will be the Adobe Flash killer’. Tomorrow will be 2 weeks since I have written the article and two very big things have already occurred.

The first is that Adobe cut 9% percent of its workforce on Nov 10th, this is the second huge cut by Adobe in the past year. In my opinion, Adobe is a Desktop publishing company and not a software devleopment company and when/if further cuts occur, they will happen on the Flash teams, not the Photoshop teams.

The second big thing to occur is the yesterday’s article by Techcrunch on was the announcement of a ‘Seesmic for Windows’ client. The entire article seems like a huge jab/left hook at Adobe Air and it’s limitations and all the new capabilities Seesmic will have because of the switch to the Windows platform.

What you will see as a result of Seesmic moving to Windows is a constant reminder of the Windows platform due to the nature in which Loic delivers releases, which seems to be almost weekly.

In my original article I basically stated that you could do the same exact things in Silverlight that you could do in Flash. I was hesistant to state that Silverlight was more powerful because I wanted to reach the flash community in a calm rational approach.

Seesmic coming out like this will be the first in many to come on the limitations the Flash/Adobe Air platform as compared to the Microsoft platform.

Two weeks ago I believed it would be 2 years before all the real applications/games on the web would be in Silverlight and Flash would be used for nothing more than creating banners. I think it will be sooner than that now.

Databinding controls in SilverLight 3

admin — Tue, 17 Nov 2009 12:57:47 +0000

In the following video I will show how to Databind a progressbar’s width to the position of a video. The Databinding feature in Microsoft Expression Blend 3 allows this interaction without the need to write one of code.

You can view my article on Databinding here

Building a Download Progress Bar for your Hulu inspired SilverLight video player

admin — Sat, 14 Nov 2009 18:16:49 +0000

This is part 4 in our series of building a Hulu inspired video player. In this tutorial we will be building a download progress bar.

We will take the design of our download progress bar and set it’s width equal to the position of the video’s DownloadProgress property. To make this auto-update we will hook into the ‘DownloadProgressChanged’ event.

1- Place a rectangle on the stage, on a layer below the progress bar
2- Set the rectangle’s HorizontalAlignment to Left
2- Set the rectangle’s color to white and its alpha to 20%
3- On the DownloadProgressChanged event of the mediaElement we will execute code

The end result in code is: loadProgressBar.Width = mp.DownloadProgress * bar.ActualWidth;

XAML code

C# code


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace HuluSilverLight
{
	public partial class MainPage : UserControl
	{
		public MainPage()
		{
			InitializeComponent();
		}

		private void downloadProgressHandler(object sender, System.Windows.RoutedEventArgs e)
		{
			loadProgressBar.Width = mp.DownloadProgress * bar.ActualWidth;
		}
	}
}

Building a Progress Bar for your Hulu inspired SilverLight video player

admin — Fri, 13 Nov 2009 12:32:13 +0000

This is part 3 in our series of building a Hulu inspired video player. In this tutorial we will be building a progress bar.

We will take the design of our progress bar and set it’s width equal to the position of the video’s current position. To make this dynamic and without needing to write any code we will use the concept of Binding.

You can view a video on Databinding here
1- Place a rectangle on the stage
2- Set the rectangle’s HorizontalAlignment to Left
2- Set the rectangle’s color to white and its alpha to 20%
3- Bind the width property of the rectangle to the Position.TotalSeconds of the mediaElement

In design view
Select the rectangle
Click the yellow box next to the width property.
Select ‘Databinding’
Select the ‘Element Property’ tab
In the “Scene Elements’ list, select the mediaElement control
In the properties list select ‘Position / TotalSeconds’

The end result in XAML is: Width=”{Binding Position.TotalSeconds, ElementName=mp, Mode=OneWay}”

XAML code

C# code


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace HuluSilverLight
{
	public partial class hulu_player : UserControl
	{
		public hulu_player()
		{
			InitializeComponent();
		}

		private void pauseVideo(object sender, System.Windows.RoutedEventArgs e)
		{
			(Application.Current.RootVisual as MainPage).mp.Pause();
		}

		private void playVideo(object sender, System.Windows.RoutedEventArgs e)
		{
			(Application.Current.RootVisual as MainPage).mp.Play();
		}

	}
}

Loading external video into your Hulu inspired Silverlight video player

admin — Wed, 11 Nov 2009 12:47:41 +0000

This is part 2 in our series of building a Hulu inspired video player. This tutorial may well be the most important in the process of building a Silverlight video player.

In our previous example “Building a Play-Pause control for a Hulu inspired SilverLight video player” the video was included within the Silverlight file. This caused a very bad user experience because the user had to wait to load the entire video before the file was shown.

By setting the video source to be remote, the Silverlight file is now 14k as compared to 6,700k. Now, the Silverlight file which simply contains a MediaElement is loaded almost instantaneously and the video plays as it loads.

You can play and pause the video

XAML code

C# code


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace HuluSilverLight
{
	public partial class hulu_player : UserControl
	{
		public hulu_player()
		{
			InitializeComponent();
		}

		private void pauseVideo(object sender, System.Windows.RoutedEventArgs e)
		{
			(Application.Current.RootVisual as MainPage).mp.Pause();
		}

		private void playVideo(object sender, System.Windows.RoutedEventArgs e)
		{
			(Application.Current.RootVisual as MainPage).mp.Play();
		}

	}
}

Building a Play-Pause control for a Hulu inspired SilverLight video player

admin — Tue, 10 Nov 2009 05:26:34 +0000

The following example is the Part 1 in a series of tutorials demonstrating how to build a Hulu inspired video player in Silverlight 3. This tutorial shows how to create a play-pause button control utilizing the ToggleButton control.

1- Place a ToggleButton on the stage
2- Right click and select “Edit Template / Edit a copy”
3- Name your control
4- Delete everything in the component – FocusVisualElement, DisabledVisualElement, contentPresenter and the Background. Do not delete the top level Grid.
5- In the states panel add designs for the Normal, MouseOver and Pressed states.
6- Add the Pause icon to the Unchecked CheckStates and the Play icon to the Checked CheckState.
7- Add a MediaElement control and set it’s source.
8- On your custom control add the code to pause and play the video on the Checked and UnChecked events.

You can play and pause the video

XAML code

C# code


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;

namespace HuluSilverLight
{
	public partial class hulu_player : UserControl
	{
		public hulu_player()
		{
			InitializeComponent();
		}

		private void pauseVideo(object sender, System.Windows.RoutedEventArgs e)
		{
			(Application.Current.RootVisual as MainPage).mp.Pause();
		}

		private void playVideo(object sender, System.Windows.RoutedEventArgs e)
		{
			(Application.Current.RootVisual as MainPage).mp.Play();
		}

	}
}

Dynamically creating thumbnails with WriteableBitmap and DispatcherTimer in Silverlight 3

admin — Sat, 07 Nov 2009 20:43:13 +0000

In the previous example “Creating thumbnails of video frames with WriteableBitmap in Microsoft Expression Blend 3″ the user was able to create thumbnails by clicking on the video display.

The following example shows how thumbnails could be dynamically created by using DispatcherTimer thereby eliminating the need to click.

To stop the timer from firing, I simply hooked into the MediaElement mediaEnded event.

XAML code

C# code


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Media.Imaging;

namespace ImageSnapshot
{
	public partial class MainPage : UserControl
	{
		System.Windows.Threading.DispatcherTimer myDispatcherTimer = new System.Windows.Threading.DispatcherTimer();

		public MainPage()
		{
			InitializeComponent();

            myDispatcherTimer.Interval = new TimeSpan(0, 0, 0, 0, 500);
            myDispatcherTimer.Tick += new EventHandler(takeSnapShot);
            myDispatcherTimer.Start();
		}
		private void takeSnapShot(object o, EventArgs sender)
		{
			WriteableBitmap snapShot = new WriteableBitmap(myMediaElement, null);

			Image image = new Image();
			image.Height = 89;
			image.Margin = new Thickness(10);
			image.Source = snapShot;

			thumbs.Children.Add(image);
			scroller.UpdateLayout();
			double scrollPos = thumbs.ActualWidth;
			scroller.ScrollToHorizontalOffset(scrollPos);
		}

		private void stopTimer(object sender, System.Windows.RoutedEventArgs e)
		{
			myDispatcherTimer.Stop();
		}
	}
}

Creating thumbnails of video frames with WriteableBitmap in Microsoft Expression Blend 3

admin — Sat, 07 Nov 2009 08:03:44 +0000

Click on video to create thumbnails
The following example shows how to create thumbnails by using the WriteableBitmap class.

XAML code

C# code


using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Media.Imaging;

namespace ImageSnapshot
{
	public partial class MainPage : UserControl
	{
		public MainPage()
		{
			InitializeComponent();
		}

		private void takeSnapShot(object sender, MouseButtonEventArgs e)
		{
			WriteableBitmap snapShot = new WriteableBitmap(myMediaElement, null);

			Image image = new Image();
			image.Height = 89;
			image.Margin = new Thickness(10);
			image.Source = snapShot;

			thumbs.Children.Add(image);
			scroller.UpdateLayout();
			double scrollPos = thumbs.ActualWidth;
			scroller.ScrollToHorizontalOffset(scrollPos);
		}
	}
}

SilverLight will be the Adobe Flash killer

admin — Fri, 06 Nov 2009 02:03:53 +0000

Prediction
I am making a very big prediction, it is the beginning of the end of Adobe Flash. When I first saw Flash 12 years ago I knew immediately that this was it, it was light years ahead of anything on the web. It is rare that you see something and know immediately that this is going to be big. In the years 1998, 99, 2000 the Flash community was awesome, it was like we were in the wild west just discovering new stuff. I really felt I was in on something and could not believe that other people could not see the same.

The Debate
You may have seen numerous articles on the Flash vs Silverlight debate such as this one. I believe that the articles being written and discussions that are taking place are simply asking the wrong questions.

The discussions should not be between the specific details of Flash and Silverlight. But it should be at a higher level, such as “How long will it take me to become a professional in Silverlight?”, by professional, I mean someone is compensated for their work. Just think of the possibilities that are opened up by learning this product, you basically open yourself up to a whole new industry.

Learning Curve
So if I am right, the million dollar question is – How long is it going to take to learn this new software product?
In my honest opinion if you are a Flash developer as soon as you start the program you will know about 60% of it right out of the box. Simply due to the similarities between Flash and Blend, practically the same tools, timeline, stage, properties, layout code etc. The following videos I have made are about 30 minutes in total length and will get you up to about 80%. Think about that, 80% knowledge of a new product and you have invested less than an hour.

Animation
Introduction to Animation in Microsoft Expression Blend 3

Integration with Adobe
Importing graphics from Adobe Illustrator into Microsoft Expression Blend 3

Customizing Cursors
Implementing a custom hit area in Microsoft Expression Blend 3

Drawing
Exploring the Gradient tool in Microsoft Expression Blend 3

Layout
Exploring the Canvas control in Microsoft Expression Blend 3

Video
Creating a Silverlight video player in Microsoft Expression Blend 3

Layers
Exploring the Objects panel in Microsoft Expression Blend 3

Creating Buttons
Creating a Silverlight button with Microsoft Blend 3

Styles
Creating a Resource Dictionary with Microsoft Blend 3

Hit Area
Implementing a custom hit area in Microsoft Expression Blend 3

Money
When all is said and done, it comes down to money. If a developer is as knowledgeable in Flash and SilverLight, the Silverlight developer will be compensated more, PERIOD. The flash job opportunities mostly come by way of the Advertising field and game development worlds and the projects built are measured in days.

The Silverlight opportunities will come by way of Engineering based companies. Engineering companies mostly work on projects that are measured in years.

The Bottom Line…
For the last 10 plus years when asked what I do, I would proudly say “I am a flash developer that ….
Moving forward my answer will be “I create user experiences and I use products a,b,c.

Try Silverlight for 60 days for free. I feel like it’s 1998 all over again and can’t believe more people aren’t aware of this movement. I am going to do everything I can to push Silverlight in front of everyone whether they are developers, users or clients.

Either way we will be the winners from this, us the developers. Microsoft and Adobe will be forced to improve.

Introduction to Animation in Microsoft Expression Blend 3

admin — Fri, 30 Oct 2009 10:07:16 +0000

In this video I discuss a few keys topics of animation in Microsoft Expression Blend 3. Topics include storyboards, creating keyframes, setting transforms on objects and previewing within the Blend IDE.

Importing graphics from Adobe Illustrator into Microsoft Expression Blend 3

admin — Thu, 29 Oct 2009 23:11:55 +0000

In this video I show how to import vector graphics from Adobe Illustrator and load it into a user control in Blend 3.

Implementing a custom hit area in Microsoft Expression Blend 3

admin — Thu, 29 Oct 2009 05:24:10 +0000

In the following video I show how to implement a custom hit area in Microsoft Expression Blend 3.