Rebuilding My Website Using Flex – Part 1

This is the first in a series of posts that will document my experience using Adobe Flex to dramatically improve a simple existing website. Like many of you, I am fairly new to Flex Development and need a good project to sink my teeth into. If you have not developed in Flex before, you may might find series of posts a good starting point. You can learn as I learn! πŸ™‚ If you are a seasoned Flex developer, feel free to jump in and make suggestions for improvement.

What is Flex?

Flex is an open-source framework for developing rich web applications. Flex applications run on the Adobe Flash Player so there is nothing to install on the client as long as Flash Player is installed (and practically every computer has it installed). There are no server requirements so whatever web host/server you are using now will be fine. Here are a few links to get you more familiar:

Project Description:

As mentioned in earlier posts, I have a weekend aerial photography business called Tiger Aerial Photography. For over three years, I’ve had a very simple four page HTML website at http://www.tigeraerial.com. Although it’s very simple and short, this site has served me well, but it could be much better, especially using Flex.

My Requirements:

  • Fastest approach possible –> I have a very demanding day job and a weekend job (aerial photography), so my time is extremely limited. I want great results in the shortest possible time. I want to take advantage of existing Flex components and minimize the amount of custom code.
  • Unique – make my photography stand out –> Is doesn’t matter how cool the site is if the photography doesn’t look good and attract customers. When the user lands on the home page, I want them to immediately see some of my best work and have one of two samples automatically zoom and pan to show the full resolution of the images. Many of my competitors show only static images at low resolutions so I want my potential customers to see how much detail my 12.3 megapixel Nikon D300 can capture. This will be the most challenging (and most fun) part of this project.
  • Simple –> My existing website is very simple and to the point. My goal is to maintain the simplicity while dramatically improving the look and feel. I plan to keep the same four major sections that I have today:
    1. Home Page – Primary landing page – this is where I need to hook ’em. I currently use AutoViewer, a great flash-based slide show viewer. This gives my page at least a hint of richness. I think I can do better than this.
    2. About Page – Description of the services that I provide – mostly text but I might try adding a bit of eye candy.
    3. Portfolio – Links to multiple galleries of my work. I use SmugMug for my online galleries. For the initial conversion to Flex, I’ll just link to the appropriate SmugMug page.
    4. Contact Information – Simple page with contact info. Currently this page has a link to my email address which has generated an incredible amount of spam, so I’m considering replacing this with an information request form. We’ll need a bit of simple server integration to make this happen.

    Tooling up!:

    • I have a few choices on tools:
      • I could download the Flex SDK and use the command line compiler to compile my Flex application. This is a great option for many developers, especially since the Flex SDK is free.
      • I could instead download Flex Builder which is an Eclipse-based IDE that includes the SDK and features context-sensitive help, visual UI designer, debugger, memory profiler, etc.. There is a downloadable 60 day trial so you can grab it now and follow along with me. After 60 days, you’ll need to purchase the product to continue using it. Flex Builder comes in two flavors – a stand-alone version and an eclipse plugin. The stand-alone version includes everything I need including a pre-configured Eclipse environment. The Eclipse plugin would allow me to add Flex Builder to my existing Eclipse environment.
    • I chose also the stand-alone Flex Builder for this project. Although I am a command-line kind of guy and could probably get by with the Flex SDK, I need the visual designer, integrated help and debugger. I highly recommend this for anyone new to Flex – it will dramatically ease the learning curve.
    • I’ll use Photoshop for any required image work. I expect very little, if any.

    Getting everything ready:

    Project Plan:

    • I’ll start by choosing a basic layout, navigation controls and color schemes.
    • I’ll start with the home page. I’ll play around with some different images effects to see if I can figure out how to do engaging tricks with some of my photography. I’ll experiment with <mx:Move>, <mx:Resize>, <mx:Fade>, <mx:Blur> and will mix these up a bit using <mx:Sequence> and <mx:Parallel>. I’ll post all of the variations with source as I go.
    • Next, I’ll focus on the About page and Contact Us page. These should be fairly simple but will require a little tweaking to get the right fonts, colors, etc.
    • I’ll then tackle the Portfolio page. This page will contain links to the SmugMug galleries but I want these links to be interesting. Typically, if a visitor goes to my portfolio page, they are a good prospect so I need to really dazzle them. There are tons of options for this. I could do simple thumbnails or do something really unique like an image carousel with good animation, etc. There are a few custom components available that I plan to experiment with so this will be fun.

    My next post will jump right in on the development. I plan to include both text and video. Stay tuned!

    ~ by gregorywilson on March 22, 2008.

    17 Responses to “Rebuilding My Website Using Flex – Part 1”

    1. I know is’t a nit, but isn’t the D300 12.3 MP?

    2. Yep – I just changed it from 12.1 to 12.3 – thanks – Greg

    3. March 24th – 28th is Adobe Developer Week. There will be many online training sessions available. Click here for a list of sessions and to register.

      Greg

    4. Hi Greg,

      Thanks for the easy step by step explanation. Just what I needed. I have to make a simple homepage in swf for a school assignment. But I do not like to work with Flash CS3. I do not like the timeline. So I guess that Flex is the way to go for me. I have a development background and I become happy when I see code. With you tutorial I can work around the usage of Flash CS3. πŸ˜‰

    5. Thanks Christine! The 2nd of the series is nearly done. I’ve been working on it between trips πŸ™‚

      Greg

    6. Googled the web just to see what’s out there for Adobe Flex and photography and saw your site. Like you, I dove into learning Flex myself recently with the thought of possibly showcasing my personal interest in photography in a sort of RIA environment. When I saw the sample application FlexStore (a mock-up for an online cellphone company), I thought I could use it’s look and feel as a baseline (I probably adopted 70% of the code to showcase my archives) and maybe add stuff on it. Anyhow, to make the long story short, I came up with this website: http://www.pixeldose.com :).

      Oh, those aerial and panoramic shots are cool, btw. ‘Must be a completely different experience shooting down from way up there.

      Good luck on your project.

    7. I checked out your site – very nice! Have you considered posting the source?

      My next series will be up soon πŸ™‚

      Greg

    8. This is really useful stuff for me as I too run an aerial photography site, am time poor and will seriously consider your approach here. Site as current is at http://www.ukaerialphotos.com. Good luck.

    9. Hi Greg. This is great! Thanks so much.

      But… am I being stupid? I can’t find Part 2. Have you posted it yet?

    10. Hey Jen – part 2 is coming soon I hope… been SOOO busy.

      Thanks for asking.

      Greg

    11. Ok, I’ll keep checking back. πŸ™‚

    12. Just curious if you posted part 2.

    13. Another Flex fans. πŸ™‚
      Have you felt the pain yet?

    14. i was hunting for a good web hosting company to upload my website i made in flex. can u suggest any?

    15. Hello,

      I am really impressed by your website. I am also trying to make one website in Flex for Non Profit Organization. Could you please help me out in my open issues i.e
      (1)Page Up, Page Down, Up, Down Arrows keys not working in my Flex Application.
      (2)CTRL F function is not working for searching text in web pages

      I would appreciate if you could help me with my issues.

      Regards
      -Sonali

    16. Did you post the part 2 already? If so how do I find the link?

      Thanks
      B

    17. All the best to create your site.
      please share few source that helps me to learn

    Leave a Reply

    Fill in your details below or click an icon to log in:

    WordPress.com Logo

    You are commenting using your WordPress.com account. Log Out / Change )

    Twitter picture

    You are commenting using your Twitter account. Log Out / Change )

    Facebook photo

    You are commenting using your Facebook account. Log Out / Change )

    Google+ photo

    You are commenting using your Google+ account. Log Out / Change )

    Connecting to %s

     
    %d bloggers like this: