Flash week 5 l.jpg
Advertisement
This presentation is the property of its rightful owner.
1 / 32

Flash Week 5 PowerPoint PPT Presentation

Flash Week 5 Presentation by Mindy McAdams Post-mortem: Flash 3 exercise Sliding panel functionality Use of big, beautiful pictures (vs. tiny pictures) Choices for layout of buttons, text, etc. Sliding panel functionality Let’s look at some excellent solutions to the button puzzle …

Download Presentation

Flash Week 5

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Flash week 5 l.jpg

Flash Week 5

Presentation by Mindy McAdams


Post mortem flash 3 exercise l.jpg

Post-mortem: Flash 3 exercise

  • Sliding panel functionality

  • Use of big, beautiful pictures (vs. tiny pictures)

  • Choices for layout of buttons, text, etc.


Sliding panel functionality l.jpg

Sliding panel functionality

  • Let’s look at some excellent solutions to the button puzzle …

  • Two solutions, each quite different


Slide4 l.jpg

This button is not inside the movie clip (and notice the instance name of the button)


Slide5 l.jpg

There is a second button underneath the first one


Slide6 l.jpg

Notice the instance name of the second button


Slide7 l.jpg

Inside the movie clip timeline, the script addresses the button instance up on the main Timeline (with _parent)


Slide8 l.jpg

The script inside the movie clip timeline is different for each position (out, in) of the sliding panel


Sliding panel functionality9 l.jpg

Sliding panel functionality

  • Now look at a very different solution that is equally as good …


Slide10 l.jpg

Here is the sliding panel on the main Timeline


Slide11 l.jpg

On the timeline of the sliding panel movie clip, the whole panel is a button symbol


Slide12 l.jpg

The script on the button in frame 1 of the movie clip


Slide13 l.jpg

Here’s the button after “slideout”


Slide14 l.jpg

The script on the button in frame 11 of the movie clip


Sliding panel functionality15 l.jpg

Sliding panel functionality

  • Both of these solutions are very good because the sliding panel can only slide down when it is up, and vice versa

  • Buttons that work the way you would expect them to work enhance the professional quality of a Flash package


Now let s discuss design l.jpg

Now let’s discuss design

  • Use of images in Flash

  • Placement of images (not the same as on a regular Web page)

  • Use the full Stage whenever you can

  • Small is not beautiful


Which looks better 1 l.jpg

Which looks better? (1)


Which looks better 2 l.jpg

Which looks better? (2)


Which looks better 3 l.jpg

Which looks better? (3)


Again which is better 1 l.jpg

Again: Which is better? (1)


Again which is better 2 l.jpg

Again: Which is better? (2)


Placement of buttons panels l.jpg

Placement of buttons, panels

  • Functionality first

  • Alignment with other items on the Stage

  • Avoid centering in most cases

  • “Don’t make me think”

    • What will the user expect?

    • What does the user want to do?


Slide23 l.jpg

B


Balance alignment l.jpg

Balance & alignment

A different alignment changes everything


Placement of sliding panel l.jpg

Placement of sliding panel

Where would you put the sliding panel?


Placement of sliding panel26 l.jpg

Placement of sliding panel

Appearance is similar to buttons, but not identical


Placement of sliding panel27 l.jpg

Placement of sliding panel

Enough space for panel to look okay when it is visible


Positioning text pictures l.jpg

Positioning text & pictures

What can be improved?


Positioning text pictures29 l.jpg

Positioning text & pictures

Photo size & alignment; text alignment


Positioning text pictures30 l.jpg

Positioning text & pictures

Placement of both text and photos


Positioning text pictures31 l.jpg

Positioning text & pictures

Alignment guides the eye; proximity shows relationships. Use of space: Avoid “crowding”


The end l.jpg

The End

Presentation by Mindy McAdams


  • Login