Using Camtasia 5.1

Prep

• Decide as specifically as you can what you are going to show and what points you want to make (though its not worth scripting as reading a script and operating the keyboard would be too much for one person to do and might come across a bit boring).

• Try and keep to as quick as sequence as possible as the video can soon get long.

• Divide it up into small tasks, so you can record the video in small sequences (easier for editing and recording). Real life examples work best i.e. imagine you are a student trying to find a lecture room.

• If you’ve got time Camtasia has loads of video sequence showing you how to use it.

In Camtasia

Create a project

This will store all the video clips.

Make your recording

• Decide what area of the screen you are going to record. If you can keep to 800×600 then less resizing will need to be done later.

• Select the area (lock to the application) and go for a standard size rather than custom to save having to do any cropping later. 1024×768 did automatic zooming onto the cursor location which saves a lot of post processing and doesnt look too bad. Probably shouldnt go much larger.

• Record your video sequence – can be quicker to do the narration real-time but you can also add voice narration afterwards too.

• If you record sound in real-time. turn off any programs that are likely to make any sound during the recording and be aware of anything likely to make any background noise like fans, doors slamming, phones ringing etc.

• Press F10 to stop the video. Reduces the amount of fumbling for the menu at the end and therefore the amount of editing required at the end of sequences.
• When the menus offer to ‘edit the recording’ or ‘record next’ select the edit option this will add your clip to the clip bin and saves having to drag it in later.

• Decide between clips whether you want to start the next clip on the same screen or go on or back to previous screens. In which case sort that out before you start recording.

• For the next recording you can choose last area to record the same section of screen as you set up previously, do look to see if the lock to the application checkbox is still on.

Editing your video

• You can edit the sound as well as the screen shots using the timeline window along the bottom of the camtasia screen.

• You can drag this window to make it larger or magnify it up which will help make editing more precise.

• Play back your video to decide any sections you want to remove and note the exact time you want to start and stop your crop. With sound you can spot noisy bits along the timeline and edit them out or reduce the volume level. There is also an automatic sound clean up function.

• Find the same spots along the timeline select them both and then right click to make your cut.

• You can insert transitions and titling clips between your sections of video, to place them in you need to switch from timeline to storyboard view.

• Go steady with the transitions most of these are pretty unsubtle.

• Storyboard view is also useful for reordering your sequence of clips if you wish to.

Accessibility

• Create a transcript of the audio track to go with the video.

• Use this to create captions and attach sections to the video as required.

• Looks like there could be more useful features for editing video I just didn’t get around to trying any of them.

Producing the Video

• Choose the ‘custom production settings’ option.

• Select swf/flv (this will produce M4V as well) if you tick the bottom box for additional outputs.

• Select the ‘Flash Options’ button and choose FLV up the video quality to the highest. Set the frame rate at 15 bitrate at 1000.

• Apply the changes.

• Size – Look at the ‘Fit in’ drop down and decide what you want your final video to be (prob. 640×480). The programe will tell you how this will look with the addition of the scrubber bar.

• Publishing might take a while. So dont bother unless you are really sure you’ve got everything how you want it.

Sara Lever : 19 Sep 2008 10:38 |  Comments (1) |  Close comments |  Report a problem

Whale watching photos

Sara Lever : 08 Sep 2008 21:44 |  Comments (0) |  Close comments |  Report a problem

Accessibility Update WCAG 1 and 2

Some interesting findings from recently attended Accessibility Tools:

• A lot wide focus i.e. colour issues including contrast between foreground and background colours, colour blindness, dyslexic issues, epilepsy, motor impairement
• The ‘Web Accessibility Toolbar’ (WAT) that links into IE or Opera has a flock of Accessibility testing features that cover a lot of the WCAG1 and WCAG2 testing requirements
• Accessibility testing still requires manual and JAWs testing – particularly for flash, ajax/javascript pages, videos, other dynamic stuff.
• WCAG 2.0 though not yet finalised requires even more checking (maybe 3x as long) though in theory every aspect should be more strictly testable
• A need to test for flicker on moving elements of a site using a PEAT tool.
• We apparently still need to test applications with Javascript off for the 5% of users who do this for security reasons
• We should be checking that flash and other dynamic elements work via the keyboard only as well as via magnification and JAWs
• Text only renditions should not include any tables
• Do Disabled User Testing – with a range of disabilities -
  Severe vision impaired – Screen reader user,
  Medium vision impaired – Magnification user,
  Mild vision impaired – Large text/high contrast,
  Severe motor difficulties – voice recognition
  Mild motor difficulties (like RSI) – keyboard alone
  Medium dyslexic – no special technology
  Learning disability – no special technology
  but leave it very late in the process so that most issues will be already found as some disabled users will take double the time to complete a task

WCAG 2
not yet formalised may be live by the July 2009. Advised to think about transitioning now.
likely to include

• more on colour contrast testing
• testing for the simplity of text with the old Fog factor type calculations
• possible inclusion of BSL sign language at level 3
• flash keyboard controlled
• page titles
• headings and labels
• making sure the current focus is visible
  Comparison table here:
  http://www.w3.org/WAI/WCAG20/from10/comparison/#cptable *
  Useful checklist*
  WCAG has produced a checklist you can customise

http://www.w3.org/WAI/WCAG20/quickref/Overview.php

Testing Plan
They recommend following the approach from the BSI
http://www.equalityhumanrights.com/Documents/Disability/Accessibility_guidance/PAS78.pdf
(but this just looks humungous to me!)

I’ve also been given a guide to testing techniques per WCAG 1.0 checkpoint. That I could type in when I have more free time. A lot of the checkpoints can be tested with the WAT tool but there are exceptions checkpoints i.e.
Priority 1
2.1 use of colour to convey info – check manually
6.2 if equivalent content is used for dynamic content is the updated when the dynamic content changes – check JAWS/manually
7.1 flickering – check with PEAT tool
14.1 Is the language clear and simple – can partially check with WAT but also need to do manually
6.2 Are pages usable with scripts, applets, or other programming objects turned off or not supported – check manually and with keyboard only can partially check with the WAT tool.
1.3 Multimedia provide an auditory description of the key points for any visual multimedia element – check manually
1.4 For time based multimedia presentations synchronise audio captions with the track – check manually
11.4 provide an alternative accessible page with equivalent info, if after best efforts you cannot create an accessible page (this should use W3c technologies) – check manually can partially check with WAT or JAWS.

Sara Lever : 25 Jul 2008 10:41 |  Comments (0) |  Close comments |  Report a problem

Photoshop tips

These are really an aide-memoire for my own benefit:

If creating a photo montage ‘luminosity’ may be handy for layering over/above other graphics.

To lose the white background on a graphic try ‘multiply’.

Both in layer appearance options.

Sara Lever : 19 Jun 2008 14:21 |  Comments (0) |  Close comments |  Report a problem

This week on Westwood Campus

Writing about web page http://blogs.warwick.ac.uk/saralever/gallery/installations/

This week on westwood campus our eyeballs have been given something of a treat. So I’ve taken the liberty of capturing the event, see the gallery labelled installations......

Many thanks to the Students, hope they did well, it only seems a shame that come next week things will probably be back to normal!!

Sara Lever : 06 Jun 2008 22:43 |  Comments (2) |  Close comments |  Report a problem

Skinning/Styling in Flex

Writing about web page http://www.adobe.com/devnet/flex/articles/flex_skins_08.html

S’funny that Adobe have a separate term for the whole styling of applications, which gives the first clue, that maybe they think about it in a different way.
Anyway skinning does seem to have progressed nicely since I last used Flash being a lot more stylesheet orientated, me likie.

To get rid of the nasty halo theme, is a lot simpler than in flash days. To tint the rollover/selection colours to something more to your taste, simply add this to the top of your stylesheet:

global {
themeColor: #767FA0;
}

and job done. Though I did google quite a bit before finding this and there were a lot more complicated ways of achieving similar probably giving more fine grain control.

Right for skinning the rest you can get quite a long way via stylesheets, using the Style Explorer to get the syntax. I found that the datagrid, hugely tricky to customise and style in flash much more quickly sorted in flex i.e.:

DataGrid {
color: #ffffff;
fontWeight: bold;
headerColors: #ffffff, #ffffff;
borderThickness: 0;
borderColor: #ffffff;
alternatingItemColors: #B6BBCE, #A4A9BF;
rollOverColor: #5F6885;
textRollOverColor: #ffffff;
selectionColor: #3F4251;
textSelectedColor: #ffffff;
horizontalGridLines: true;
horizontalGridLineColor: #ffffff;
}

the code for producing an itemrenderer similarly much shorter.

Whilst I think of it, some other useful styles are :

roundedBottomCorners: true;
cornerRadius: 10;
borderStyle: solid;

for nice rounded components. (though didn’t seem to work for all elements/components).

and
shadowDistance: 5;
shadowDirection: right;
dropShadowColor: #000000;

for drop shadows on and within components

and
backgroundAlpha: 0.4;

for transparent effects, though effected nested components too.

A weirdness I found was that paddingleft would only work when added to the component and not in the stylesheet.

Adobe describes two ways of skinning either graphical or programmatic leaving it up to you to go with what you feel the most comfortable.

With graphical skins

advantages:
being easier, familiar, and can hand off artwork creation to a designer
disadvantages:
Not as flexible size wise (though can apply embed9)
Graphics might not work well depending on the effect you want to achieve
Can’t then apply programming
larger file sizes presumably

and programmatic skins

Pros
Dynamic
Smaller file size
Flexible in terms of ability to do more with different states
Cons
More difficult, requiring coding, more to go wrong

So I thought I’d start with graphical skinning and build up to programming as required.

The Adobe article above and associated files is a bit of a find, as you can use this as a method of graphically skinning components. They provide graphics package basics of all the images for you to tailor and the css to go with it. So now I can even change how the scrollbars look. Though I haven’t found graphics labelled datagrid in the graphics file, maybe this is a compilation of other components.

I did wonder if this would bloat the .swf file, but so far have just used some of the graphics and styles from here.

Results so far looking good.

Updated version of this article for Flex3
http://www.adobe.com/devnet/flex/articles/skins_styles_03.html

Flex 3 now has a CSS Design mode…....
Adobe continues to describe skinning and styling as separate approaches. Implying there are some graphical effects you might not be able to achieve through styling alone.

Don’t forget to embed any fonts, graphics that you may need just put the @ symbol in front of anything to be embedded in the code and the word Embed in the stylesheet. e.g.

backgroundImage: Embed(source=”images/bg.png”);

or you will need to ensure that the appropriate files are copied along with your application

Sara Lever : 26 Feb 2008 17:06 |  Tags: Flex |  Comments (1) |  Close comments |  Report a problem

More on Illustrator for beginners.

Workspace

1. Illustrator contains various default templates, which can be useful for say creating a CD Booklet or Letterhead. To find them do File > New Template.
2. From the Welcome screen there are also options to start new types of documents, selecting Web Document sets the units to pixels and allows the size of the workspace to change, and mode to RGB.
3. Mobile and Web Devices allows you to view designs as from a mobile device, there are a selection to choose from and there is a bit of information about devices.
4. Perspective grids – View Outline is a wireframe grid. Page View Tiling will show the printable area for the default printer.
5. Bridge (top right – black icon) is a file navigation system that shows images.
6. On panels there are general more optionals than displayed, though panels and options are repeated in the application so there appears to be more than there actually is, due to repetition.
7. Window > Workspace will allow you to reset your panel display you can set up your own preferred set of open panels.
8. Hitting Ctrl-0 fits the file to the window size, useful if you have zoomed. Hitting spacebar will give a grabber handle this is helpful for moving around the workspace quickly.

Drawing Tools

1. With any of the drawing tools, like the rectangle tool onc eyou have drawn something with it, clicking on the page will allow you to see the set dimensions or for other shapes add points or radius.
2. Shift Alt g allows any shape to grow from the centre instead of the top left corner.
3. Toolbox > Pencils the middle pencil the ‘smooth pencil’ will straighten out wonky curves.
4. Selected grouped shapes (Object > Group) can be easily copied using Alt.
5. Smartguides are useful to line up and draw shapes that need to be exact.

Colours

1. Swatches > Open Swatch Library – will open up collections of colour palettes.
2. If you’ve used a colour a lot in your work and you might want to change it in every place at the same time you can. Double click the colour tick the Global checkbox button before using the colour then if you need to change it just open the colour and change it, all instances of that colour will change.
3. If you’ve set up a particular swatch of colours that you want to use over and over again you can do so by saving the file with the colours in (somewhere you’ll remember). Then on a new file go to Swatches > open swatch library > Other libraries navigate to your file and open it. Your colour swatches will open. You can apply to same trick to save or reuse gradients and symbols.

Pen tool.

1. Pencil or pen drawn lines can be easily turned to brush strokes, just select the brush stroke to apply.
2. To draw a straight line click the start point and click the end point with shift held down.
3. To stop the line drawing click the direct selection tool.
4. When drawing with the pen and you want to convert an anchor point whilst still drawing hit Alt.

Symbols

1. Any grouped object can be added to the symbol library for reuse.
2. Symbols selected from the symbol libraries can be broken apart for editing (right click).

Tracing

1. To create a vector shape from a scan you can import the scan as a template and draw over it, if saved as a template the scan will not appear on the final artwork, though visible on the screen. On a new file, do File > Place make sure to tick the template checkbox. The artwork will appear as a locked greyed out image. That you can draw over, this will give fine-grain control but be slow to do. You can also try using live trace.

Live Trace / Live Paint

1. File > Place choose your method of live trace, from the drop down menu, then click expand. Live paint can then be used to infil with colour any clear areas. If there are gaps between areas, show live paint gaps will reveal them.

Save to Flash

1. Saving a graphic as .svg or .svg compressed will preserve vector qualities but allow for import to flash.

Fonts

1. If you put a shape onto the workspace and using the text tool type text into it, your text will fit within the outline of the shape. You can alter the shape the text will move with it.
2. Text can be imported from Word (most variants), RTF, plain text (ascii), using File > Place.
3. Type in an area box can be sorted into rows and columns using the Type > Area Type Options.
4. Type can be wrapped around a graphic, choose Object > Text Wrap > Make you can increase the distance away from the object in the Text Wrap Options dialog
5. Ctrl+Shift+> is a useful shortcut to increasing text size.
6. To reuse font styles, highlight the area to be the same, and use the eyedropper to select the font you want to borrow the style of.
7. Once you change type to create outlines it is no longer editable.
8. Wrapping text around shapes. Create a path (any line or shape without a fill or stroke). Select the type tool move to where you want to start typing on your shape you should get a cursor insertion point, or a crossed wavy line the text will now follow the path. If you need to move the text along the path, select with the selection tool, the beginning, end and mid-point will be marked, the easiest to grab is the midpoint, when selected a black arrow next to an upside down capital T appears.

Working with photoshop

If you are creating say a photo montage in photoshop for use within Illustrator, you can work on both in tandem. Place the piece of work your creating as a file in Illustrator and keep editing in Photoshop, when you reopen Illustrator it will have spotted that a change has been made and prompt you to update the placed image. This is pretty handy if your likely to be iteratively modifying. Dont forget to embed at the end. Best to embed as if you move files around links will be broken.

Create a new layer before importing the work, will allow you to control where it ends up in your layers heirarchy.

Sara Lever : 26 Feb 2008 17:02 |  Tags: Illustrator |  Comments (0) |  Close comments |  Report a problem

Development of the Mobile Website.

Writing about web page http://m.warwick.ac.uk

I was given the brief of developing a mobile website for the University of Warwick. The idea was that it should provide content for someone visiting the University who is using a mobile browser whether this was a new student, new member of staff or someone external to the University, the latter being the main target audience . At this stage other Universities that had mobile websites in the UK and further afield were surveyed. I looked at how the UI’s were structured, the type of content available and the urls.

From very early on in the project it was decided to write content specifically *for the mobile site, so that it was short and pertinent suiting the capabilities of the devices it would be viewed on.

Based on what the target audience might be trying to achieve, the first draft for pertinent content looked something like this:

This was to be a website maintained within the eLab Web Team so it was necessary to avoid creating a high maintenance website, that was large or with a lot of frequently changing information.

Other decisions that had to be made were:

• What technology/standards should we use for development?
• What url should we have?
• What structure shall we apply to the information?
• What should the UI look like?

A useful reference was the .dotMobi website, their guide called the “Mobile Web Developer’s Guide’ http://dev.mobi/node/197, the comparison of CSS http://dev.mobi/node/154#r1 and online emulator http://mtld.mobi/emulator.php. Also very helpful was the video “Google Developer Day London: Building a Mobile Website” on youtube http://www.youtube.com/watch?v=i4dV9nIpHes.

From this and a survey of the web, we were able to define a set of guidelines for the creation of the website interface, as follows:-

• Have only a small logo
• For the navigational elements give each a number (0-9). Use 0 for home. Sort navigation elements by popularity
• Provide one content item per page
• Use color banding for sections, to give a sense of where you are
• Include a short strapline
• Have the Uof W phone number always at the bottom of the page
• All phone numbers should be selectable
• Keep text to the very minimum on each page
• Have not too many sections of navigation or go to deep, max drill-down 5 levels.
• Have a meaningful but short title bar
• Consider screen sizes

Screen sizes to consider
The smallest screensize for mobiles is something like 128×160 pixels and the largest 320×320 pixels. The width is the more important as pages are of course scrollable. It was decided to design our pages to fit 240 pixels in width. Some phones are smart enough to scroll for larger images or scale them. It was found when testing the pages on a variety of devices (bought, begged and borrowed) this size worked relatively well. We also figured that for the smaller screen sizes, the web surfing experience was just so horrible not many folks would be doing it!

Note well:
When sizing your image to fit the screen resolution, don’t forget about the browser furniture which is going to take up some screen real estate, the scrollbar etc, so your image needs to be slightly smaller.

What phones are our target audience using?

Nokia’s have most of the market share but which models was not know at this stage. Some time was spend looking for good statistics on actual models in use but this was hard if not impossible to find. (See survey).

Organising the content
The identification and organisation of the content was then a whiteboard and whiteboard rubber exercise. Applying the rules of not to many sections and not too deep.

The URL
m.warwick.ac.uk was registered as a short and simple url that is easy to type.

The Design of the UI

The detail of the content was thrashed out a bit more and a structure applied, some initial mockups of the home page and a subpage were created to see how it would all look put together.

This illustrated how restricted the space is and that at the top level many navigation sections would scroll of the screen.

A strong breadcrumb trail was designed in, main links given a number to allow quick getting backwards and forwards, as well as the university contact details at the bottom clearly visible.

Technology

As the content was being written or rewritten specifically for the mobile site it was decided not to use technology to repurpose existing content from Sitebuilder. This proved to be a wise choice, as when text was written it could be made very concise.
A possible option would have been to use the Sitebuilder CMS to generate mobile friendly markup or RSS.

So the technical decisions made were:

• Code in well formed, valid XHTML either XHTML basic and or XHTML –MP

• Validate every page ( validator.w3.org).

• Iinclude the correct encoding and doctype e.g.:

<?xml version=”1.0” encoding=”UTF-8” ?>
<!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML Basic 1.1//EN” “http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd”>

• Send google a mobile sitemap – http://www.google.com/webmasters/sitemaps/siteoverview?h1=en

• Make phone numbers links +1 206 545-0210

• Test on as many phones/emulators as possible of high and low specification

• Don’t do any popups, refreshes or client side redirects, also avoid tables and anything very complex chances are it won’t work very well or be valid markup

• Page Weight keep to below 30k where possible, so the page loads reasonable quickly on a mobile

The site was build using XHTML Basic but was switched to XHTML-MP when it was realised this rendered better on Ipod Touch. The emulators provided on the .mobi site were used heavily initially whilst the pages were being built. Now testing with a suite of phones after any new page is constructed is done instead.

Each page really must be validated as these DocTypes are very strict and an apostrophe or unclosed element will generate an error. Literature about mobiles gave heavy warnings that malformed pages would not render and crash mobiles. This however has not been our experience and we have pulled frequently changing content from other pages in a form that is not XHTML friendly but yet still seems to render ok. *
What were the hardest challenges for the mobile site?*

Images and in particular maps turned out to be the hardest thing to do on the mobile site. To generate an image at the small dimensions and file size, with clear colours that could represent anything useful is challenging to say the least. Usually nice graphics on web sites are subtle in hue and shading. For the smaller more basic screen capabilities on mobiles this had to be turned on its head and go for bold, high contrast reduced colour palette images.

It was known from the start of the project that a map of campus would be needed. With the campus being so large a way to view parts of the map and to produce a map that would work at this resolution was important. What we’ve done to simplify the problem is to create a map of campus that you can move around in, with a nearby overview square. Buildings are numbered and a key below names them. Also implemented is a building search as an alternative way of finding places.

Rapidly changing information (such as news and events pages) was also a challenge for the mobile website. For news and events information has been embedded from the main University of Warwick website and wrapped to look like any other mobile website page. The same has been done for information for students about free computer seats seats.warwick.ac.uk which is fed directly from that website to the mobile site. A problem that has been found is that in some cases the native information is not available in the mobile profile doc type (XHTML-MP). This problem will be addressed with future iterations of the mobile site.

Survey

In October 2007 the opportunity of adding questions to a survey of new and returning students undertaken by QUAD Research every year was available. The views of new students and returning students, would be similar to the target audience of outside visitors who had no knowledge of the university and what they might need to know on first arriving here, so would be useful to validate content choices made. 1799 students both new (946) and returning (853) filled in the survey.

QUAD reported:
_“Respondents were asked to select five things from a list they felt would be most important if Warwick had a website created specifically for use with mobile devices.

As might be expected maps of Campus, places to eat and drink and directions to Campus were considerably more important to new students than returning. Whereas, parking information, email searches and opening hours were more important to returning students. Students most frequently stated that they would like to be able to access bus information.”_

54 (2%) of students commented about what ‘other’ things they would like to see on the mobile website. Some students included more than one thing in their comment. A quick analysis of these revealed the most requested things on the mobile website:
12 votes for timetabling/my.warwick unforeseen changes to timetables
5 votes for events
3 votes for access to emails
3 votes for maps that include rooms/ room searching
3 votes for events at SU

Most popular phones owned by new and returning students:

Resolutions by popularity for the phones above:
240×320 = 463
176×220 = 141
320×240 = 41

After the survey results became available more bus information was added to the mobile website.

What next for the mobile site?

New information is added to the mobile site all the time. Recently a means of finding out the timetabled buses by bus stop has been added, which links out to Network West Midlands information. With new initiatives in the Coventry area this is likely to become real-time information shortly. Finding a mechanism to add more of the frequently changing content, is also a goal. Hooking the mobile site up to the main site such that the main site offers anyone arriving there on a mobile the chance to switch to a mobile-friendly website.

Sara Lever : 26 Feb 2008 14:45 |  Tags: Mobile |  Comments (0) |  Close comments |  Report a problem

Scalable Flex App

Follow-up to Flex 2 – Beginners Guide from Sara's Mindbloggeld

Getting a flash app to scale nicely. I’ve blogged about this as a record of the steps required.

• In the CSS use a background# image with EmbeddingImagesScale9 to keep some areas of a graphic a set size and stretch the rest, set also background-size:”100%”; so the background image fills the whole stage. For example:

  Application {
  background-image: Embed(“bg_and_header.png”,
  scaleGridTop=”60”, scaleGridBottom=”61”,
  scaleGridLeft=”260”, scaleGridRight=”444”);
  background-size:”100%”;
  background-color: #ffffff;
  }

• In the design a middle section that is a little bit plain is great for stretching!

• Dont set any fixed width’s or heights on your containers

• Instead use constraints based layout, to do that in your application declaration put
  viewSourceURL=”src/LayoutConstraintsEdges/index.html”

• Alongside this you’ll need to put on any parent containers layout=absolute (yeah I know – completely the opposite to what you’d think if you are used to CSS!) you’ll need this or when you apply constraints on any nested panels it won’t work child containers won’t know what they are being sized to, any inheritance from application is lost

• So for the constraints bit you might have a container that you always want to appear just offset from the top and left, so you’d put in the container or maybe in the CSS. You’ll need to do something like this probably around all your containers.

NOTE: Things that seem to stop the scaling are any hard width and height settings, scrollbars though I have seen an example with scrollbar that scales.

To view this example set your browser to 1024×768 and go to this page
Voila
- Sorry web team only…..
Then stretch over both your monitors. Components will get wider, but not taller (as I’ve turned vertical scroll bars off and that was enough to stop the rescaling).

Sara Lever : 15 Feb 2008 15:07 |  Tags: Flash Flex ITS |  Comments (0) |  Close comments |  Report a problem

Flex 2 – Beginners Guide

Went on a flex course eons ago, never used it! Having a bash today as I have a design for a video playing system and I’d like to see how it could be implemented what panels, containers etc. would be needed to get kind of interactive experience I’d imagined.

Key points worthy of note:

Importing graphics to show on your stage, there is no equivalent of the library. Just import to your project folder and then in design view or on code select image and enter the directory path to the image.

There appears to be some really neat way of scaling an image so that corners remain fixed and center grows this could be pretty handy for producing some scalable work. Info here

Stylesheets how to write them seems fairly straightforward, though the css syntax isnt the same argh just

and a stylesheet like this:
Application {
background-image: “backgrounds/brushed_metal.jpg”;
background-size: “100%”;
}

ControlBar {
horizontal-align: right;
}

Label {
left: 10;
}

Panel {
horizontal-center: 0;
vertical-center: 0;
}

TextInput {
left: 85;
right: 10;
}

.userlabel {
top: 12;
}

.userinput {
top: 10;
}

.passlabel {
top: 42;
}

.passinput {
top: 40;
}

But don’t be sloppy with your CSS or everything breaks! Hoping this will help with giving at least the illusion of scaling.

Sara Lever : 05 Feb 2008 17:10 |  Comments (5) |  Close comments |  Trackbacks (1) |  Report a problem