Our Blog

CF Presenter under X-rays

(or CF Presenter without its skin)


Before:

After:

All the changes were possible thanks to the implementation of CSS in flash forms. The code is exactly the same in both examples. The only difference is that one has CSS and the other is in its default plain vanilla skin that comes with cfform.

Although the CSS properties have to be placed inline and it's not possible to have them in an external file, the ability of skin our forms with CSS is a very nice feature.

PS: the source is coming

View the example without CSS
View the example with CSS

Nahuel Foronda

Nahuel Foronda

10 Comments

  2. Alex

    Really looking forward to seeing that source... great work guys...

  3. twoedge

    The styled version seems to run MUCH slower than the non-styled one. I wonder if it is because of the font difference. I assume in the un-styled one you are using non-embedded system fonts, but that does not seem to be the case in the styled version.
    <br/>
    It is very noticeably different, but looks good. As always, the fight between performance and appearance wages on...
  4. Nahuel

    Nahuel

    Hi twoedge
    This is on purpuse, it is part of the style.
    In the accordion I added the style "openDuration:1500;" to make the transition between the slides slower.
    When you see the non-styled version you get the default speed of the accordion.
  5. Tim Cunningham

    Tim Cunningham

    An odd characteristic about it: if you initially view it in a browser window that is not maximized, and then you maximize the window, the flash form keeps the same dimensions as it was when it was not maximized.

    I have been searching the web and the MM docs, to see if there is some onresize event or action script method to dynamically resize the cfform. If found this action script: http://www.mustardlab.com/developer/flash/objectresize/ but don't see how to incorporate it into a cfform.

    Tim Cunningham
  6. Felipe

    Felipe

    "Although the CSS properties have to be placed inline and it's not possible to have them in an external file"

    Just a tip:

    You can create a "css.cfm" page that set the style as varables ie:
    <cfset stinput = 'background-color: ##cc3300; background-alpha:56;
    border-color:##ffffff; border-cap-color:##ffffff;'>

    Then include it with cfinclude, so you can set the style like this:
    <cfinput type="text" name="email" style="#stinput#">

    So when you chage something in the css.cfm page it will update all your presentation.
  7. John Farrar

    John Farrar

    OK... when will the teaser turn public? We would like to get flash presenter if you could make it available.

  8. Tom

    I NEED THIS CODE 8-). Looks great and I am currently on a project where it would be a tremendous contribution. Please advise on when you will be posting the source. Kind Regards

  9. Nahuel

    Hi Tom,
    The code is available for download in the following link:
    http://www.asfusion.com/blog/entry/cf-presenter-source-code
  10. Brian

    Brian

    Hi there. Would it be possible for you guys to post the source for the CFPresenter version without the skin? I'm having a difficult time removing the skin for this without breaking it. Thanks!!!