Category Archives: Apple

iPhone’s beautiful "Battery Recharger" as a SilverLight animation


Sub Heading 5

this sample needs silverlight 1.1

Have I told you readers how much I love the user interface of Apple’s iPhone? Well I do!

There are so many goodies in there that over time I’ll reproduce them using Blend and SilverLight :) . Today I’ll be recreating the “Battery Recharger”.

Here’s what it looks like on the iPhone

OriginalBatter

Now here’s my version done using Blend and if you click on the image it will go to the demo page where I have animated it using SilverLight

BatteryRecharging

Apple took such care in painting a true “glass & light effect”. The light shining on the battery was done with such detail. I had to improvise with numerous separate “paths” to get the same result. If you look at my source you will see that each face (there are 4, top of the battery, middle of the battery, bottom of the battery, knob of the battery) has several “path shapes” each with complicated gradient brushes to produce  the lighting & glass effect of Apple’s control.

I love this control :)

Below is the tutorial of how I made this control. Enjoy!

BatteryRecharging2

“Top” and the “Bottom” are mirror images of each other. It is made up of several path’s each with different gradient fills.

Middle is made up of the “Filler” and a series of path’s with gradients. There are 2 groupings of paths (“group behind” and “group in-front” ) that surround the “filler path”, they were done this way to give a true 3D like affect.

The “Knob” is an exact copy of the “Top” that’s just shrunken down.

The “Filler” is a simple path shape that can be any color, which is currently showing as burgundy red.

The “Status” is a textblock that shows the status of the recharging battery.

The “Reflection” is an exact mirrored copy of the entire battery (without the text). Even the “Filler” is copied so that when the real “Filler” is animated we can animate the reflection as well giving an truly real reflection effect (see the demo animation).

The “TOP” part of the battery was achieved as follows, remember the “Bottom” and the “Knob” are just copies of the “Top”:

Take the basic “top” shape and make 5 copies, each copy will be the exact same shape but will have different gradients applied to them to give the glass/lighting effect.

First copy : forms the basic overall color of the top of the battery. It’s a black themed battery with a tinge of gray gradient at the bottom

 

Second copy: Lighting effect at the bottom part of the overall top shape

Third copy: Lighting effect in the middle of the overall top shape

Forth copy: Another lighting effect near the top of the overall top shape

Fifth copy: top most lighting effect of the overall top shape

all parts combined results in:

The “Middle” part of the battery was achieved as follows:

Like the “top” the “Middle” is made up of 5 copies of the same shape.

First copy: Basic color of the middle shape. Made up of a gradient

Second copy: Filler that we programmatically slide in width

Third copy: a lighting effect layer

Forth copy: another lighting effect layer

Fifth copy: another light effect layer

 

Combining all the layers without the filler layer it looks like this:

Add the filler layer to the combined layers above it looks like this:

I don’t think I need to go into the showing the rest of the parts of the battery, as I mentioned above they are all just variations of the previously covered 2 groups “Top”, “Middle”.

As you can see from my demo page this can be animated any way your heart desires. Create a stack of batteries and have them animate in different colors, the options are endless. I love SilverLight :)

Source code will soon be added to the “Blend Candy” area, stay tuned.

Apples "Accordion" control done in SilverLight


Sub Heading 4 

Apples “Accordion” is a simple yet powerful web site widget that makes great use of limited space. It’s just cool!

Accordian1

So how it works is as you hover over the text the associated panel with an image slides down. It’s a very simple animation that leaves a fullfilling feeling within the end user.

So this is my SilverLight version of the accordion: (click the picture to see the demo in action)

accordion20

My control downloads the images in the form of a zip package. It uses storyboard animations for the sliding effect and it uses a callback mechanism to the underlying html web page for the navigation postbacks.

To see this control in action with all the other controls go to my demo page.

The source code can be found here.

Apples "SlideShow" can turn any web site into a masterpiece


subheading 2 

Apples web site, a couple of versions ago, had what I call a “SlideShow” control. It was on the home page and it would show a slideshow of enthralling pictures of Apples products and people using them. It was nothing short of amazing! I could just watch those slides for hours.

Below is a picture of Apple’s home page and where the slide show was positioned.

SlideshowList

The slideshow would slide between several pictures all very smoothly without the slightest hint of network lag. Not only did it slide pictures in and out but it allowed links and text over the pictures, ultimately it felt like a story unfolding before your eyes.

I wanted to recreate that same control using SilverLight. I plan on using two images, one in view and the other hidden whilst it loads a picture. For the actual mechanism of loading the picture I envision using the downloader controller and a timer to start the downloading.

The slideshow will have 2 animations to slide the images from right-to-left or left-to-right.

The SlideShow control I created was simple in design, it is only version 1 and in future versions it will have more animations and features. But for now it delivers the experience I’m looking for. [click the picture to see the live demo]

SlideshowList2

I was planning on placing a media element somewhere on the bottom right of the parent canvas and load in a cool movie. This would stay stationary whilst the background images slide around. I plan on building this functionality when I finally create my Blend web site.

This “SlideShow List” control forms part of a bigger project called the “Blend Candy – Web site”. The goal of this project is to provide you with many cool controls that you can mix and match to create an unbelievable web site. Currently there are 3 controls in this project, download the source for this control and the other 3 controls here (BlendCandy-Website.zip)

To see all the controls in action go to this demo page.

Apple’s "rotating marquee" done with SilverLight


subheading 3

Simple in design and blends so well with the rest of the Apple site. I decided to create a SilverLight version of this control.

Here’s a screen shot of the control from Apple’s web site.

applemarque

As can be seen from the picture above it is very simple in functionality. There’s nothing complicated about it but it delivers the basic requirements of a marquee tool.

So will this be overkill as a SilverLight application? I don’t think so because I envision creating a fully immersive version of the “marque control” complete with awe inspiring animations in the way only SilverLight can do. Eventually it will be an amazing user control :)

The messages are hard-coded within the SilverLight control but it’s easy enough to retrieve them from an XML file or a database. In some future version, when I use it for my web site, I’ll retrieve the messages from a webservice potentially “Astoria”.

Here’s my version of it [click on the actual picture to see the demo in action]

rotatingmarquee

It makes use of an internal timer and 2 animations. The animations “fade in” and “fade out” the messages.

This control forms part of a bigger project called the “Blend Candy – Web site”. The goal of this project is to provide you with many cool controls that you can mix and match to create an unbelievable web site. Currently there are 3 controls in this project, download the source for this control and the other 2 controls here (BlendCandy-Website.zip)

Apples Product Slider – written in SilverLight


SubHeading 6

In my ongoing love with Apples web site I’ve replicated there “product slider” control in SilverLight. I love this control purely because it look’s great and is so functionally spot on!

From a design perspective it isn’t revolutionary but it just delivers a perfect user experience and is so harmonious with the rest of the web site.

productSlider

I wrote the control with my future web site in mind, blend candy. The pictures are hard coded in xAML but I for-see some future version dynamically populating the product’s from an XML source.

The entire control took me over a day to create, this is actually longer than I had expected, the complications came with the slider part of the control. Getting the drag functionality of the slider was difficult purely because mathematics isn’t my strongest strength and you definitely need to know your maths when working with mouse positions and canvas/rectangle positions.

So this is how my version of apples “product slider” turned out. [Click the image to see the control in a sample page]

productslider

*updated (30/8/2007) to use a zip file for all the assets and a downloader control to download the zip file. Overall this provides a better user experience upon control load up. The source code has been updated with the latest changes so if you want it download it from the link below :)

I think it turned out quite well and because this SilverLight control is 100% scriptable I can theme it to any color I want. I really love SilverLight and xAML (in particular the design bench Blend).

This control forms part of a bigger project called the “Blend Candy – Web site”. The goal of this project is to provide you with many cool controls that you can mix and match to create an unbelievable web site. At the time of this writing there is only 1 other control in the project, download the source here (BlendCandy-Website.zip)

Please leave comments of any problems or future enhancements you have in mind, I’m always grateful for any type of feedback!

Digg!

A beautiful "menu" in the likeness of Apples web site


subheading 2

Apple has an amazing web site. I continuously go back to it to marvel at the beautiful design. There are so many features on their site that I just love, one being the “top menu”.

1

What I wanted to do was replicate the same type of menu but using SilverLight. I want it to be a fully functional control that upon menu click called a JavaScript function in the base page, this was so that I can wire up the event to a non-SilverLight event or to another SilverLight control.

After a lot of toiling, mainly around the wiring up of the C# code to the xAML elements, this is the result: [Click on the image to go to the sample to see it working]

2

I took great care in the look of the xAML elements, making sure the correct visual experiences were maintained in comparison to the apple menu bar.

Each menu item call’s back to the html page calling a JavaScript function. The search box also call’s back to the underlying asp.net page raising a JavaScript function.

All up it was a great learning experience, now I have a fully functional ready to use apple style menu :)

Eventually I want to use it in some future web site of mine, if I ever want to turn this blog into a web site that is!

This control forms part of a bigger project called the “Blend Candy – Web site”. The goal of this project is to provide you with many cool controls that you can mix and match to create an unbelievable web site. At the time of writing of this post there is only 1 control in the project, download the source here (BlendCandy-Website.zip)

There are other features from Apples site that I also want to build in SilverLight, stay tuned as I build them and give them away for free! Remember “it’s better to give then to receive”!