Sei sulla pagina 1di 3
70 Technique Flash CS4 Slide navigation Want to bring iPhone- style slide navigation into your
70
Technique
Flash CS4
Slide
navigation
Want to bring iPhone-
style slide navigation into
your own online portfolio?
Stewart Hamilton-
Arrandale shows you how
Re-creating the beautifully simple drag-and-throw functionality
of the iPhone to create a simple yet visually pleasing portfolio
centrepiece for your web page is easy. What’s more, by controlling
the content through an external XML file, you’ll be able to use this
technique to add and edit your portfolio without the need of
redesigning or recoding your site. The advantages of this approach
are two-fold: you can concentrate on the visual casing of the design,
while the content can be updated and edited independently.
In this tutorial, we’ll be looking at the interactive
elements and the way your audience will interact with a drag-and-
throw portfolio. We’ve based our design on the iPhone, but have set
up the tutorial so you can mimic this action with any design you
choose. We will be using ActionScript 3.0 and utilising external XML
files for updatable content to help make this project flexible for all
your future needs.
01
Copy the relevant fi les from this issue’s disc to your computer. Open the
PSDs folder – the document is set up at the correct size for the content used in this
tutorial. I’ve chosen to use an iPhone image, but you can choose any background image
you like. Simply drop your image in place of the white Holder layer. This will be the
canvas for our iPhone-style interface.
Stewart Hamilton-
Time needed
Arrandale
1 hour
The award-
winning freelance
digital designer has
produced Flash
solutions for the
likes of Crown Paints
and Original Source,
and delivered motion
graphics pieces for
Liverpool Capital of
Culture ‘08. To find
out more see www.
creativewax.co.uk
On the disc
The files needed to
complete this
tutorial, plus the full
screen-grabs for
each step of this
tutorial, can be
found in
DiscContents\
Resources\Flash
Skills
ActionScript
animation
Basic
ActionScript 3.0
understanding
Simple image
manipulation
Simple Flash
graphics
Basic
understanding
of XML
02
All the content elements used in this tutorial are saved out as JPEGs and
loaded individually into the Flash interface. This could be expanded easily in the future
to accommodate loading SWFs or other file formats. All the content has already been
saved out into the FINAL\imgs folder, ready to be used in the final interface.
Computer Arts August 2009
www.computerarts.co.uk
be used in the final interface. Computer Arts August 2009 www.computerarts.co.uk ART164.tut_flash 70 11/6/09 6:20:30 pm

ART164.tut_flash

70

be used in the final interface. Computer Arts August 2009 www.computerarts.co.uk ART164.tut_flash 70 11/6/09 6:20:30 pm
be used in the final interface. Computer Arts August 2009 www.computerarts.co.uk ART164.tut_flash 70 11/6/09 6:20:30 pm

11/6/09

be used in the final interface. Computer Arts August 2009 www.computerarts.co.uk ART164.tut_flash 70 11/6/09 6:20:30 pm

6:20:30 pm

   

71

    71 04 Open the DragThrow.as file. We’ll run through how   this works: if
    71 04 Open the DragThrow.as file. We’ll run through how   this works: if

04

Open the DragThrow.as file. We’ll run through how

 

this works: if we start with lines 14-69, we have our basic

 

03

Now open the DEV folder and take a look at FlashiPhone.fla. Looking at the

AS layer, you’ll notice some simple code which is used for setting up the drag-and-

throw technique, similar to that of the iPhone. Run the code and have a play with throwing it left to right.

variable declarations and then our two public methods – one for setting up the events for dragging and throwing, and then a reset method for when we need to remove this functionality and reset our current position back to its default position.

 
  06 Lines 115-152 are used for updating the position of the content. The
06 Lines 115-152 are used for updating the position of the content. The

06

Lines 115-152 are used for updating the position of the content. The

are used for updating the position of the content. The   05 Lines 76-109 are the
 

05

Lines 76-109 are the main methods for tracking the

position and velocity of the dragging. Firstly, in trackContentDrag, we start to drag the content and set a loop for checking its position and release of the mouse. We then call trackContentThrow, which checks if the velocity was over the movement threshold or if the content itself was over half way across the screen. After this, we move the content with either the nextSection, prevSection or getSection methods.

nextSection method tries to move the content on, whereas the prevSection method tries to move back. Once the getSection method is called, this checks where the new position for the content is and moves to it. Once there, it resets the velocity for the next interaction and also updates the counters on screen to reflect the new position.

updates the counters on screen to reflect the new position. 07 Next, lines 158-209 cover the
updates the counters on screen to reflect the new position. 07 Next, lines 158-209 cover the

07

Next, lines 158-209 cover the creation of the

counters on screen and add mouse events for jumping directly to this content’s position. Every time we create a new set of counters, we remove the last set in case the amount has changed. This utilises the clean-up method on line 215 for looping through and removing movies from a display list.

08

Open FlashiPhone.fla from the FINAL folder. You’ll notice in the Properties

panel that we are using a document class to set up this file. If you click inside the iPhone holder movie on stage, you’ll see all the movies we are using already set up.

Run the code and play around with it. Open content.xml and play with putting new content in this and re-ordering it to show how this affects the interface.

www.computerarts.co.uk

 

Computer Arts August 2009

the interface. www.computerarts.co.uk   Computer Arts August 2009 ART164.tut_flash 71 11/6/09 6:20:31 pm

ART164.tut_flash

71

the interface. www.computerarts.co.uk   Computer Arts August 2009 ART164.tut_flash 71 11/6/09 6:20:31 pm
the interface. www.computerarts.co.uk   Computer Arts August 2009 ART164.tut_flash 71 11/6/09 6:20:31 pm

11/6/09

the interface. www.computerarts.co.uk   Computer Arts August 2009 ART164.tut_flash 71 11/6/09 6:20:31 pm

6:20:31 pm

72

Technique Slide navigation

72 Technique Slide navigation 09 Open the FlashiPhone.as and look at lines 13-68. First we declare

09

Open the FlashiPhone.as and look at lines 13-68. First we declare our

variables, then in our set-up method we create all the drag-and-throw functionality (as we did in the last file). We disable mouse events for any movies sitting above the Content pane. We then start to load the content for this interface and set up some listeners for resizing content, then call that as default for when the movie first launches. Once the XML has loaded, we call the xmlLoaded method, which sets a reference to the loaded XML.

xmlLoaded method, which sets a reference to the loaded XML. Next look at lines 129-201. While

Next look at lines 129-201. While this looks like a lot of code, it’s just doing a

few basic animations and mouse-tracking techniques for when we roll over the menu. This can easily be replaced with something much simpler or more complex later on. Also, we have the checkMenu, showMenu and hideMenu methods, which control showing and hiding the main menu system.

11

which control showing and hiding the main menu system. 11 13 On lines 237-277 we load

13

On lines 237-277 we load the images from the XML

content we selected and position them based on their number reference. We then check to see when all of the images have

been loaded to see when we should show them. Once they have all loaded, we hide the preloader and set up the drag-and- throw class. We also have our simple show-and-hide loader methods for showing the loader screen.

show-and-hide loader methods for showing the loader screen. 10 Lines 73-123 cover creating the menu. Firstly

10

Lines 73-123 cover creating the menu. Firstly keep a

reference of the original position of the main menu, then set up

a mouse event for the home button. Next, loop through the XML, and set up and load the images that will act as buttons in the menu. Once they have loaded, call the showImg method for animating them in.

have loaded, call the showImg method for animating them in. 12 Lines 207-231 in the getSection

12

Lines 207-231 in the getSection method cover

getting a new set of content for a section we have clicked on. Firstly, destroy all the old content on screen. Next, use the number reference stored in the menu item we clicked on to get an XMLList from the main XML content to loop through, load and create the new content items. Lastly, tell the drag-and- throw class how many pages of content there is going to be.

throw class how many pages of content there is going to be. 15 So, where could

15

So, where could we take this

in the future? The next step could be to have a multi-directional drag-and- throw system, or to implement real-time blurring when you throw the screen. Have a play around and, hopefully, this will lead to some exciting times whilst building your portfolio site.

to some exciting times whilst building your portfolio site. 14 On lines 283-336 are some utility
to some exciting times whilst building your portfolio site. 14 On lines 283-336 are some utility

14 On lines 283-336 are some

utility methods for loading our XML files:

loading external content; an error catching method; a resize method to update the content position when the screen size changes; and a destroyContent method for removing loaded content from screen/memory.

Computer Arts August 2009

www.computerarts.co.uk

ART164.tut_flashremoving loaded content from screen/memory. Computer Arts August 2009 www.computerarts.co.uk 72 11/6/09 6:20:32 pm

72

content from screen/memory. Computer Arts August 2009 www.computerarts.co.uk ART164.tut_flash 72 11/6/09 6:20:32 pm
content from screen/memory. Computer Arts August 2009 www.computerarts.co.uk ART164.tut_flash 72 11/6/09 6:20:32 pm

11/6/09

content from screen/memory. Computer Arts August 2009 www.computerarts.co.uk ART164.tut_flash 72 11/6/09 6:20:32 pm

6:20:32 pm

content from screen/memory. Computer Arts August 2009 www.computerarts.co.uk ART164.tut_flash 72 11/6/09 6:20:32 pm