This document provides steps to create an auto-play image gallery with thumbnails in Flash CS5. It involves adding layers, importing images, converting images to buttons, adding actionscript for the image timer and buttons. The gallery will automatically transition between images every 6 seconds. Clicking a thumbnail will pause the auto-play until the mouse exits the thumbnail. The actionscript resets the timer so the gallery plays continuously, returning to the first image.
I prepared this material when I was working as a Tracking, Rigging and Animation Artist. I hope you find this material useful. All the best for your career.
I prepared this material when I was working as a Tracking, Rigging and Animation Artist. I hope you find this material useful. All the best for your career.
Useful Tools for Making Video Games - XNA (2008)Korhan Bircan
A presentations I gave back in 2008 when I was the teaching assistant for Innovating Game Development course in Brown University.
This is an introductory tutorial of Microsoft XNA Game Studio. I talk about displaying 3D models, handling keyboard and mouse input, 3rd person shooter camera, and creating spline animations.
Working with Layout Managers. Notes 1. In part 2, note that the Gam.pdfudit652068
Working with Layout Managers. Notes: 1. In part 2, note that the Game class inherits from
JPanel. Therefore, the panel you are asked to add to the center of the content pane is the \"game\"
object. 2. In part 4, at the end of the function, call validate(). This is not mentioned in the book,
but it is mentioned in the framework comments.
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class Game extends JPanel
{
private JButton [][] squares;
private TilePuzzle game;
public Game( int newSide )
{
game = new TilePuzzle( newSide );
setUpGameGUI( );
}
public void setUpGame( int newSide )
{
game.setUpGame( newSide );
setUpGameGUI( );
}
public void setUpGameGUI( )
{
removeAll( ); // remove all components
setLayout( new GridLayout( game.getSide( ),
game.getSide( ) ) );
squares = new JButton[game.getSide( )][game.getSide( )];
ButtonHandler bh = new ButtonHandler( );
// for each button: generate button label,
// instantiate button, add to container,
// and register listener
for ( int i = 0; i < game.getSide( ); i++ )
{
for ( int j = 0; j < game.getSide( ); j++ )
{
squares[i][j] = new JButton( game.getTiles( )[i][j] );
add( squares[i][j] );
squares[i][j].addActionListener( bh );
}
}
setSize( 300, 300 );
setVisible( true );
}
private void update( int row, int col )
{
for ( int i = 0; i < game.getSide( ); i++ )
{
for ( int j = 0; j < game.getSide( ); j++ )
{
squares[i][j].setText( game.getTiles( )[i][j] );
}
}
if ( game.won( ) )
{
JOptionPane.showMessageDialog( Game.this,
\"Congratulations! You won!\ Setting up new game\" );
// int sideOfPuzzle = 3 + (int) ( 4 * Math.random( ) );
// setUpGameGUI( );
}
}
private class ButtonHandler implements ActionListener
{
public void actionPerformed( ActionEvent ae )
{
for( int i = 0; i < game.getSide( ); i++ )
{
for( int j = 0; j < game.getSide( ); j++ )
{
if ( ae.getSource( ) == squares[i][j] )
{
if ( game.tryToPlay( i, j ) )
update( i, j );
return;
} // end if
} // end inner for loop
} // outer for loop
} // end actionPerformed method
} // end ButtonHandler class
} // end Game class
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class NestedLayoutPractice extends JFrame
{
private Container contents;
private Game game;
private BorderLayout bl;
private JLabel bottom;
// ***** Task 1: declare a JPanel named top
// also declare three JButton instance variables
// that will be added to the JPanel top
// these buttons will determine the grid size of the game:
// 3-by-3, 4-by-4, or 5-by-5
// Part 1 student code starts here:
// Part 1 student code ends here.
public NestedLayoutPractice()
{
super(\"Practicing layout managers\");
contents = getContentPane();
// ***** Task 2:
// instantiate the BorderLayout manager bl
// Part 2 student code starts here:
// set the layout manager of the content pane contents to bl:
game = new Game(3); // instantiating the GamePanel object
// add panel (game) to the center of the content pane
// Part 2 student code ends here.
bottom = new JLabel(.
I prepared this material when I was working as a Tracking, Rigging and Animation Artist. I hope you find this material useful. All the best for your career.
I prepared this material when I was working as a Tracking, Rigging and Animation Artist. I hope you find this material useful. All the best for your career.
Useful Tools for Making Video Games - XNA (2008)Korhan Bircan
A presentations I gave back in 2008 when I was the teaching assistant for Innovating Game Development course in Brown University.
This is an introductory tutorial of Microsoft XNA Game Studio. I talk about displaying 3D models, handling keyboard and mouse input, 3rd person shooter camera, and creating spline animations.
Working with Layout Managers. Notes 1. In part 2, note that the Gam.pdfudit652068
Working with Layout Managers. Notes: 1. In part 2, note that the Game class inherits from
JPanel. Therefore, the panel you are asked to add to the center of the content pane is the \"game\"
object. 2. In part 4, at the end of the function, call validate(). This is not mentioned in the book,
but it is mentioned in the framework comments.
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class Game extends JPanel
{
private JButton [][] squares;
private TilePuzzle game;
public Game( int newSide )
{
game = new TilePuzzle( newSide );
setUpGameGUI( );
}
public void setUpGame( int newSide )
{
game.setUpGame( newSide );
setUpGameGUI( );
}
public void setUpGameGUI( )
{
removeAll( ); // remove all components
setLayout( new GridLayout( game.getSide( ),
game.getSide( ) ) );
squares = new JButton[game.getSide( )][game.getSide( )];
ButtonHandler bh = new ButtonHandler( );
// for each button: generate button label,
// instantiate button, add to container,
// and register listener
for ( int i = 0; i < game.getSide( ); i++ )
{
for ( int j = 0; j < game.getSide( ); j++ )
{
squares[i][j] = new JButton( game.getTiles( )[i][j] );
add( squares[i][j] );
squares[i][j].addActionListener( bh );
}
}
setSize( 300, 300 );
setVisible( true );
}
private void update( int row, int col )
{
for ( int i = 0; i < game.getSide( ); i++ )
{
for ( int j = 0; j < game.getSide( ); j++ )
{
squares[i][j].setText( game.getTiles( )[i][j] );
}
}
if ( game.won( ) )
{
JOptionPane.showMessageDialog( Game.this,
\"Congratulations! You won!\ Setting up new game\" );
// int sideOfPuzzle = 3 + (int) ( 4 * Math.random( ) );
// setUpGameGUI( );
}
}
private class ButtonHandler implements ActionListener
{
public void actionPerformed( ActionEvent ae )
{
for( int i = 0; i < game.getSide( ); i++ )
{
for( int j = 0; j < game.getSide( ); j++ )
{
if ( ae.getSource( ) == squares[i][j] )
{
if ( game.tryToPlay( i, j ) )
update( i, j );
return;
} // end if
} // end inner for loop
} // outer for loop
} // end actionPerformed method
} // end ButtonHandler class
} // end Game class
import javax.swing.*;
import java.awt.*;
import java.awt.event.*;
public class NestedLayoutPractice extends JFrame
{
private Container contents;
private Game game;
private BorderLayout bl;
private JLabel bottom;
// ***** Task 1: declare a JPanel named top
// also declare three JButton instance variables
// that will be added to the JPanel top
// these buttons will determine the grid size of the game:
// 3-by-3, 4-by-4, or 5-by-5
// Part 1 student code starts here:
// Part 1 student code ends here.
public NestedLayoutPractice()
{
super(\"Practicing layout managers\");
contents = getContentPane();
// ***** Task 2:
// instantiate the BorderLayout manager bl
// Part 2 student code starts here:
// set the layout manager of the content pane contents to bl:
game = new Game(3); // instantiating the GamePanel object
// add panel (game) to the center of the content pane
// Part 2 student code ends here.
bottom = new JLabel(.
Actionscript 3 - Session 2 Getting Started Flash IDEOUM SAOKOSAL
Actionscript 3 - Session 2 Getting Started Flash IDE
Taught by Oum Saokosal, Head of Information Technology, National Polytechnic Institute of Cambodia
Modify the following source code so that when the mouse is clicked w.pdfarorastores
Modify the following source code so that when the mouse is clicked within 30 pixels of the
middle of the smiley face it changes color. It will alternate between the yellow and red smiley
faces.
two images have been given to you , redSmiley.gif and happyFace.gif to get started.
Just for fun:
Create more than 2 colors of smiley faces and rotate through the images changing each time the
mouse is clicked within the threshold.
Use different images other than smiley faces, change images each time the mouse is clicked
within the threshold.
Add a sound each time the image changes.
Have the image slow down, if it has been more than x number of seconds since the image has
changed.
Solution
import java.awt.*;
import java.awt.event.*;
import java.awt.image.BufferedImage;
import javax.swing.*;
public class ChangeImageOnClick {
private void showContentsImage() {
JFrame driver = new JFrame(\"Move pointer on Image\");
driver.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
CustomPanel contentPane = new CustomPanel();
driver.setContentPane(contentPane);
driver.pack();
driver.setLocationByPlatform(true);
driver.setVisible(true);
}
public static void main(String\\u005B\\u005D args) {
SwingUtilities.invokeLater(new Runnable() {
public void run() {
new ChangeImageOnClick().showContentsImage();
}
});
}
}
class CustomPanel extends JComponent {
private final int SIZE = 50;
private int imageX = 100;
private int imageY = 100;
private int imageIndex;
private ImageIcon image;
private ImageIcon firstImage;
private ImageIcon secondImage;
private java.net.URL url;
private Rectangle boundsForMouse;
public CustomPanel() {
image = new ImageIcon();
try {
url = new java.net.URL(\"please mention url location of imaage\");
firstImage = new ImageIcon(url);
url = new java.net.URL(\"please mention url location of image\");
secondImage = new ImageIcon(url);
} catch(Exception e) {
e.printStackTrace();
}
imageIndex = 1;
image.setImage(firstImage.getImage());
boundsForMouse = new Rectangle(imageX - 30,
imageY - 30,
firstImage.getIconWidth() + 60,
firstImage.getIconHeight() + 60);
setOpaque(true);
addMouseListener(new MousePosition());
}
private int setImage(int counter) {
System.out.println(\"Image Index : \" + counter);
if (counter == 1) {
image = new ImageIcon();
image.setImage(secondImage.getImage());
boundsForMouse = new Rectangle(imageX - 30,
imageY - 30,
secondImage.getIconWidth() + 60,
secondImage.getIconHeight() + 60);
repaint();
counter++;
return (counter);
} else if (counter == 2) {
image = new ImageIcon();
image.setImage(firstImage.getImage());
boundsForMouse = new Rectangle(imageX - 30,
imageY - 30,
firstImage.getIconWidth() + 60,
firstImage.getIconHeight() + 60);
repaint();
return (--counter);
}
return 1;
}
@Override
public Dimension getPreferredSize() {
return (new Dimension(500, 500));
}
@Override
public void paintComponent(Graphics g) {
super.paintComponent(g);
g.clearRect(0, 0, getWidth(), getHeight());
g.drawImage(image.getImage(), imageX, imageY, null);
}
private cl.
1 How do you create a frame (AWT or swing)How do you set thhirstcruz
1 How do you create a frame (AWT or swing)?
How do you set the size for a frame (AWT or swing)?
What would happen if the statements frame.setSize(400, 300) and frame.setVisibile(true) (lines 9 and 12) were swapped in the following program?
1: import javax.swing.*;
2:
3: public class MyFrameWithComponents {
4: public static void main ( String [] args ) {
5: JFrame frame = new JFrame( "MyFrameWithComponents" );
6: // Add a button to the frame:
7: JButton okayBtn = new JButton( "OK" );
8: frame.add( okayBtn );
9: frame.setSize( 400, 300 );
10: frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
11: frame.setLocationRelativeTo( null ); // Center frame on screen
12: frame.setVisible( true );
13: }
14: }
2 A Why do you need to use layout managers?
B What is the default layout manager for a Frame or JFrame?
C How do you add a component to a Frame or JFrame?
3 The following program is supposed to display a button in a frame, but the button doesn't display.
What is the problem?
How would you fix that?
1: import javax.swing.*;
2:
3: public class Test extends JFrame {
4: public Test () {
5: add( new JButton( "OK" ) );
6: }
7:
8: public static void main ( String [] args ) {
9: JFrame frame = new JFrame();
10: frame.setSize( 100, 200 );
11: frame.setVisible( true );
12: }
13: }
4 A What is the default layout manager for a JPanel?
B How do you add a component to a JPanel?
5 A How do you create a Color object?
B What is wrong with the following code to create a Color?
new Color(400, 200, 300)
C Which of these two colors is darker?
new Color(10, 0, 0)
new Color(200, 0, 0)
6 How do you create a Font object with the font name Courier, size 20 points, and style bold?
7 What happens if you add a button to a container several times, as shown below?
Is this a syntax error, logic error, runtime error, or more than one of these
?
1: JButton btn = new JButton( "click me" );
2: JPanel panel = new JPanel();
3: panel.add( btn );
4: panel.add( btn );
5: panel.add( btn );
8 Will the following code display three buttons (assume the image is found and is correct)?
Will the buttons display the same icon?
1: import javax.swing.*;
2: import java.awt.*;
3:
4: public class Test extends JFrame {
5: public static void main ( String [] args ) {
6: JFrame frame = new Test();
7: frame.setTitle( "Button Icons" );
8: frame.setSize( 200, 100 );
9: frame.setDefaultCloseOperation( JFrame.EXIT_ON_CLOSE );
10: frame.setVisible( true );
11: }
12:
13: public Test () {
14: ImageIcon usIcon = new ImageIcon( "images/us.gif" );
15: JButton jbt1 = new JButton( usIcon );
16: JButton jbt2 = new JButton( usIcon );
17:
18: JPanel p1 = new JPanel();
19: p1.add( jbt1 );
20:
21: JPanel p2 = new JPanel();
22: p2.add( jbt2 );
23:
24: JPanel p3 = new JPanel();
25: p3.add( jbt1 );
26:
27: add( p1, BorderLayout.NORTH );
28: add( p2, BorderLayout.SOUTH );
29: add( p3, BorderLayout.CENTER );
30: }
31: }
9 Given a ...
The following GUI is displayed once the application startsThe sug.pdfarihantsherwani
The following GUI is displayed once the application starts:
The suggested size of the GUI is 640x480.
There are 10 targets displayed with random x/y values within the following ranges:
Valid x values are between 40 and (width-40)
Valid y values are between 50 and 150.
No movement on the GUI is allowed until the user presses the “Down Arrow” key. Once the user
presses the “Down Arrow” key,allthe targets will slowly move to the bottom (x value must
remain the same).
(I suggest slowing the targets down as they move towards the bottom to make the game more
interesting. Instead of adding one to the y coordinate for each target every 0.025 seconds, add
one-third instead).
A timer is also implemented and shown at the top of the GUI (Shown currently as Time: 0.000).
As soon as the user presses the “Down Arrow” key, the timer will start and maintain the total
time that the user has been playing the game in seconds. The precision of the timer should be to 3
decimal places (thousandths of a second)
Once the user presses the “Down Arrow” key, the user will also be able to move the cannon in
the horizontal direction between the left (0) margin and the right (width -1) margin only using
the following three options:
Pressing the “Right Arrow” key moves the cannon 5 pixels to the right
Pressing the “Left Arrow” key moves the cannon 5 pixels to the left
The user can drag the cannon by using the mouse to any horizontal position between 0 and width
-1. (Must be implemented as a mouseDragged)
Once the user has positioned the cannon in the desired horizontal location, he can fire a
cannonball from the cannon by pressing the “Up Arrow” key.
Firing the cannon consists of displaying a cannonball on the screen at the end of the cannon
barrel and gradually moving the cannonball upward (vertical direction only) towards the desired
target. The cannonball image is given as cannonball.png and is shown below:
An example of initially displaying the cannonball upon pressing the “Up Arrow” key at the end
of the cannon barrel is shown below:
The cannonball should move upward gradually (between 1 to 5 pixels every .025 seconds) from
the cannon barrel as shown below:
The cannonball continues to move upward until it either :
Hits a target
Reaches the upward boundary
An example of the cannonball missing a target and travelling to the top boundary is shown
below:
The following should be performed if the cannonball hits a target:
Remove the target from the screen
Remove the cannonball from the screen (only one target can be hit by a single cannonball)
Assume that only one cannonball can be on the screen at a time. (You should prevent the cannon
from firing while a cannonball is still visible on the display)
Each time a cannonball is fired, the shot information is incremented by 1 and displayed at the top
of the display.
Each time a target is hit, the score information is incremented by 1 and displayed at the top of the
display.
A mosaic illustrating the playing of the game is shown .
Procedure of animation in 3 d autodesk maya tools & techniquesijcga
At present time a new technique to approaches for producing computer animation by using software. It is introduced at university level as a text for under graduates and post graduates. It is also useful for those who want to become computer graphics programmers or animation professionals. It is newly introduced techniques in which anyone can create animation for game, education or for entertainment. It addresses the issue of computer-based animation which primarily deals with multiple 2 dimensional planes. This document concentrates on full 3D computer animation by using Autodesk Maya software which is latest for animation and identifies the useful methods and techniques to move objects in interesting ways. In present time many film makers uses it for creating cartoon character for characterize their visualization on screen. A lot of softwares are available in market which helps to create such kind of animation and effect with help of computer graphics.
Expert Accessory Dwelling Unit (ADU) Drafting ServicesResDraft
Whether you’re looking to create a guest house, a rental unit, or a private retreat, our experienced team will design a space that complements your existing home and maximizes your investment. We provide personalized, comprehensive expert accessory dwelling unit (ADU)drafting solutions tailored to your needs, ensuring a seamless process from concept to completion.
You could be a professional graphic designer and still make mistakes. There is always the possibility of human error. On the other hand if you’re not a designer, the chances of making some common graphic design mistakes are even higher. Because you don’t know what you don’t know. That’s where this blog comes in. To make your job easier and help you create better designs, we have put together a list of common graphic design mistakes that you need to avoid.
Hello everyone! I am thrilled to present my latest portfolio on LinkedIn, marking the culmination of my architectural journey thus far. Over the span of five years, I've been fortunate to acquire a wealth of knowledge under the guidance of esteemed professors and industry mentors. From rigorous academic pursuits to practical engagements, each experience has contributed to my growth and refinement as an architecture student. This portfolio not only showcases my projects but also underscores my attention to detail and to innovative architecture as a profession.
Can AI do good? at 'offtheCanvas' India HCI preludeAlan Dix
Invited talk at 'offtheCanvas' IndiaHCI prelude, 29th June 2024.
https://www.alandix.com/academic/talks/offtheCanvas-IndiaHCI2024/
The world is being changed fundamentally by AI and we are constantly faced with newspaper headlines about its harmful effects. However, there is also the potential to both ameliorate theses harms and use the new abilities of AI to transform society for the good. Can you make the difference?
1. Flash Auto Play Image Gallery
w/
Thumbnails
Fisheries Information Management Center
Prepared by: Lyndon Jeorge A. Mendoza
2. Overview
In this tutorial we will show you how to create an auto-
play image gallery with thumbnails in Flash CS5. We will apply
a couple of simple, yet nice transitions to the images and
thumbnails. This will require you to get the hands a bit dirty in
animation and action scripting. However, this is going to be
easy and fun! So here we go.
3. Added Feature
Auto-play Image Gallery with Thumbnails in Flash CS5
also has a feature that when you click a particular thumbnail,
the gallery will not continue playing till the mouse cursor is not
remove over the thumbnail (see the Final Result video).
5. Step 1
Open your Adobe Flash CS5
and we will start creating your own
Flash Auto-play Image Gallery with
Thumbnails.
6. …cont. of
Step 1
Create a new file with ActionScript
3.0 and modify the document just
by clicking the „Edit‟ button like it‟s
shown on the screenshot . You can
enter the document properties via
the admin panel (follow the
highlights in red) or pressing Ctrl+J.
On this tutorial I made mine to a
width of 600px by 500px of height
with white background.
7. Step 2
After customizing your document,
we are now ready to add some
layers.
Just right-click your mouse on the
Layer Area and choose „Insert
Layer‟ or click the small button
highlighted in red for shortcut .
8. …cont. of
Step 2
After creating the three new layers,
give them the names Thumbnails,
Big Images and Actions.
To rename a layer, double click on
it and type the text. See the
screenshot.
9. Step 3
Add four images from your
computer to your library. To do this
press File => Import => Import to
Library. You can also import the
images directly to the stage, by
pressing Ctrl+R.
10. …cont. of
Step 3
Now choose the images you want
to put one your Image Gallery.
You can choose as many as you
want but for this tutorial, I use only
four images.
12. Step 4
Go to the Buttons layer and select
the first frame on the timeline. Drag
the images from your library to the
stage (in case you haven‟t imported
them right to the stage already).
Notice that the first frame of each
layer has a small circle on it. This is
a blank keyframe. Once you put
anything on the stage, the circle
transforms into black dot which
corresponds to the filled keyframe.
13. …cont. of
Step 4
And modify their size to 129×86 px.
Be sure to drag the images to our
document area which we‟ve made
white earlier.
Do the same steps to the 3
remaining images to complete the
set of our thumbnails.
14. Step 5
After completing the set, now you
have your thumbnails on the stage.
Set image alignment by
selecting Align in Window menu, or
just press Ctrl+K.
15. …cont. of
Step 5
Align the images to the bottom and
distribute horizontal center like it‟s
shown on the screenshot.
16. Step 6
Our thumbnails are going to be
buttons, so now we need to convert
the images into the Button symbols.
Using the Selection Tool, right click
on the first thumbnail image and
choose “Convert to Symbol”, or
simply hit F8.
17. …cont. of
Step 6
In the opened window set the type
Button and name the symbol btn1.
Click “OK” to save the changes. Do
this for the other three images and
give them the
names btn2, btn3 and btn4,
respectively.
18. …cont. of
Step 6
Now we have to give each of these
the same Instance Name which is a
name to refer to your symbol or
object in ActionScript.
Instance Name can be set in the
„Properties‟ panel which you can
enter by selecting the necessary
object on the stage. Instance Name
of the btn1 button will be btn1 and
so forth.
19. Step 7
Right click on the first frame of the
Buttons layer, select Copy Frames,
go to the fourth frame and Paste
Frames the same way. Or you can
just drag the first frame up to the
fourth cell to copy it.
20. …cont. of
Step 7
As you notice, there‟s a Keyframe
at the end of the layer. We don‟t
need that so we have to delete it.
Just right-click on the Keyframe and
choose „Clear Keyframe‟ to delete
and you will see the result on the
second screenshot.
21. Step 8
OK, let‟s put the images that we will
be exactly viewing in our gallery.
Switch to the Big Images layer and
select the first frame on the
timeline. Drag the image that
corresponds to the first thumbnail
from your library to the stage. Size
it down to 558×320 px and set its
position to 18×0.05.
Of course, you may set your own
dimensions and place the pictures
whatever you like; this is just what
we use for this tutorial.
Insert three more blank keyframes (F6) and do the same
operation with the rest of the images.
22. …cont. of
Step 8
You can change the image by
clicking the „Swap‟ button
(highlighted in red). This will allow
you to swap the current shown
image to other image. Just be sure
that you‟re on the frame you want to
change the image.
After changing or swapping the
image, resize it again to have the
standard size same on what we did
on the first one.
23. Step 9
After changing all the images‟
properties, we are now to create the
actionscript for the images‟ timer.
This is important since we wanted
an auto-play image gallery.
Switch to the Actions layer and
select the first frame on the
timeline.
Right-click on the frame and choose
„Actions‟ or simply hit F9 for
shortcut.
24. …cont. of
Step 9
Now we have the blank area ready
for typing the code for our timer.
Just type in the window the
following code:
var nextImage:Timer = new
Timer(6000);
nextImage.addEventListener(Timer
Event.TIMER, playNext);
nextImage.start();
function
playNext(event:Event):void{
nextFrame();
}
The code will give the function to automatically start the movie,
play the next image and put time interval for showing each images.
25. Step 10
After putting up some actions, we
need to reset the play. This is
important in order to play our
gallery continuously and get back to
the first image again.
We just have to create another
blank keyframe for our actionscript
to reset the time of the gallery.
Just right-click on the frame (under
the Big Images layer next to the last
keyframe) and choose „Insert Blank
Keyframe‟.
26. …cont. of
Step 10
Now we have a blank keyframe
ready for adding the actionscript.
Right-click on the blank keyframe
and choose „Actions‟ of simply hit
F9 for shortcut.
Now type in the following code on
the pop-up window shown on your
screen:
nextImage.stop();
nextImage.reset();
gotoAndPlay(1);
This will give the function to stop the next image, reset the timer
and play the first frame again.
27. Step 11
Now we have to create another
function that will call the image
when you click one of the
thumbnails.
Switch to Actions layer and do the
same steps of adding actionscripts
shown on the previous slides and
type the following codes (see
screenshot or see the next slide).
28. Actionscript for the buttons:
stop();
///////////////////////////First///////////////////////////// /////////////////////////Third//////////////////////////////
btn1.addEventListener(MouseEvent.CLICK,play1); btn3.addEventListener(MouseEvent.CLICK,play3);
function play1(event:MouseEvent):void{ function play3(event:MouseEvent):void{
nextImage.stop(); nextImage.stop();
gotoAndStop (2); gotoAndStop (4);
btn1.addEventListener(MouseEvent.ROLL_OUT, btn3.addEventListener(MouseEvent.ROLL_OUT,
rollout); rollout);
function rollout(event:MouseEvent):void{ function rollout(event:MouseEvent):void{
nextImage.reset(); nextImage.reset();
nextImage.start(); nextImage.start();
} }
} }
//////////////////////////Second///////////////////////////// //////////////////////////Fourth/////////////////////////////
btn2.addEventListener(MouseEvent.CLICK,play2); btn4.addEventListener(MouseEvent.CLICK,play4);
function play2(event:MouseEvent):void{ function play4(event:MouseEvent):void{
nextImage.stop(); nextImage.stop();
gotoAndStop (3); gotoAndStop (5);
btn2.addEventListener(MouseEvent.ROLL_OUT, btn4.addEventListener(MouseEvent.ROLL_OUT,
rollout); rollout);
function rollout(event:MouseEvent):void{ function rollout(event:MouseEvent):void{
nextImage.reset(); nextImage.reset();
nextImage.start(); nextImage.start();
} }
} }
29. Now our image gallery is almost done but if you test the
movie, you will notice that after playing the last image you will
see a fast blink. And that is some kind of a problem to me. So
I try to find an alternative to that and you will see it on the next
slide.
30. Step 12
To remove the “blink effect” on our
image gallery, we have to create
blank keyframes just by clicking the
first frames on both Thumbnails and
Big Images layer. Hold Shift then
drag the frames one step.
31. …cont .of
Step 12
Now you will notice that you have
already blank frames on both
Thumbnails and Big Images layer.
What we need to do next is to copy
the first filled frame one by one on
both layers.
Switch to Big Images layer and
right-click on the first filled keyframe
and choose „Copy Frames‟.
32. Step 13
Now paste the copied frame on the
first frame and you will see that the
blank key frame is filled now.
Do the steps also on Thumbnails
layer and see the result.
33. Step 14
To add some spice to our images
when they come in, let‟s learn how
to animate them in Flash CS5.
So, go down to your Big Images
layer and select the first frame then
the image. To be able to add some
animation to our images, we need
to convert them to symbols and
choose graphic as the type.
34. …cont. of
Step 14
On the pop-up window, set the
name of the symbol to mov1 and
change its type to Movie Clip like
shown on the screenshot.
Repeat this operation for each of
the four images. Let the names
be movie1, movie2, movie3 and
movie4.
35. …cont. of
Step 14
Now double-click the newly
converted symbol. What we need to
do now is to add 3 more layers.
Same on the previous steps, right-
click on the layer area and choose
„Insert Layer‟ or just click the button
below for shortcut.
36. …cont. of
Step 14
After creating the three new layers,
give them the names Content, Title,
Launch and Actions. To rename a
layer, double click on it and type the
text (see screenshot).
37. Step 15
What to do next is to add title.
Switch to Title layer and choose on
the Properties panel and press the
letter „T‟ button or just hit „T‟ on your
keyboard for shortcut to toggle „Text
Tool.
38. …cont. of
Step 15
Now click on the stage and start
typing the title for your image.
Remember to switch on the Title
layer before putting your title on the
stage.
39. Step 16
Now it‟s time to add the link button
for the content of our image.
Do the same steps on how to add
title and what we need to add is just
to convert it to button.
Switch to Launch layer, type in your
title then click anywhere to the
stage in order to set that your done
typing. Right-click on your title and
choose „Convert to Symbol‟ or
simply hit F8.
40. …cont. of
Step 16
On the pop-up window, name your
button to btnlnk1, change its type to
Button and click OK.
41. Step 17
Next is to add the actionscript that
will call the page of your image.
Switch to Actions layer and right-
click the blank keyframe or hit F9
for you to type in the codes.
42. …cont. of
Step 17
On the pop-up window, type in the
following codes:
btnlnk1.addEventListener(MouseEv
ent.CLICK,
fl_ClickToGoToWebPage);
function
fl_ClickToGoToWebPage(event:Mo
useEvent):void
{
navigateToURL(new
URLRequest("../pages/AboutUs/ne
ws/IIMCplant_bicol.htm"), "_blank");
}
This actionscript will give the function to navigate the content page
of the image into new tab when the button is being clicked.
43. Step 18
Now it‟s time to add some
animation on our image, title and on
the link button.
First, switch to the Content layer.
Now choose the desired span of
time then right-click on that
particular frame and choose „Insert
KeyFrame‟ or simply hit F6 for
shortcut.
44. …cont. of
Step 18
You can see that it automatically
inserts some frames; the number of
frames inserted depends on your
frame rate. Let‟s cut it down to 15
frames per second.
Select the image on the stage. Go
to the object properties,
choose Alpha in the Style
menu and put it 0%.
45. …cont. of
Step 18
Click Ctrl+Enter to test your movie.
You will see that the Movie plays
over and over again and we don‟t
want this loop happen. Stop action
comes in handy here.
Return to your movie clip window.
Then go to the last frame and
hit F9. Type stop() in the Actions
window and that should fix the
problem.
46. …cont. of
Step 18
Now let‟s create a sleek fade-in
effect by means of some color
effects and motion tween.
Just right-click on any area between
the first and last keyframe and
choose „Create Classic Tween‟.
Do the same steps on both Launch
and Title layer to have the same
effects on your title and link button.
47. Step 19
After having all the effects for the
images, title and link button, switch
to the action layer and insert a
blank keyframe same with the
length time span of the other layers.
This is just to make the actionscript
available on the time span of the
gallery while playing.
48. Step 20
Another cute effect we‟re going to
apply is rollover.
Double click on the first button in
the thumbnail line, which is btn1.
You can see four frames on your
timeline – Up, Over, Down and Hit.
These are the states of our button.
•The Up frame is the inactive stage when
nothing is happening, the button is
displayed as it is.
•The Over is the stage when the mouse
hovers over the button.
•The Down frame is the stage when the
button is clicked on.
•The purpose of the Hit frame is to define
the clickable area or the coordinates of
the button.
49. …cont. of
Step 20
Now you will see that the UP frame
is already filled. What we need to
do is to fill the other frames and
we‟re ready to add some effects.
Hit F6 to the succeeding frames
one by one to fill.
50. …cont. of
Step 20
Switch to UP frame and right-click
the first thumbnail and convert it to
symbol.
On the pop-up window name your
newly converted thumbnail button
to btnup1 and select Graphic as the
type of symbol.
51. …cont. of
Step 20
To add effects, you can choose
whatever kind you want. For this
tutorial I‟ve chosen Tint to add color
effects.
Go to the Properties panel, click the
Style dropdown menu and choose
„Tint‟ and set the tint to 50%, red to
59%, green to 142%, and blue to
173% (follow the highlights in red)
to have this color effects for your
thumbnail button.
52. Step 21
After having the color effects, we
are now to create an emphasizing
effects on our thumbnail.
Switch to OVER frame, right-click
the thumbnail and convert it again
to symbol. Name it btnover1 and
select Graphic as style.
53. …cont. of
Step 21
Now to add an emphasizing effects,
click the thumbnail and move it a
little bit higher than the other
thumbnails.
54. …cont. of
Step 21
To add effects when the thumbnail
is clicked, do the previous steps on
how to convert it to symbol with a
graphic style and name it
btndown1.
Select the Style to Tint and set the
colors to 0% (follow the highlights in
red).
This will give you the effect of
making your thumbnails color black
when clicked.
55. …cont. of
Step 21
Move on to the Hit area and using
the Rectangular Tool draw an area
you want to be clickable on your
thumbnails. Repeat this step for the
other three thumbnails.
56. …cont. of
Step 21
To get back into movie clip area,
click the blue arrow button on the
upper left of the stage (see the
screenshot).
57. Step 22
After having all the effects for your
thumbnails, go to Control => Test
Movie => Test or press Ctrl +
Enter to see the result of your
image gallery.
Now you know how to create an
auto-play image gallery with
thumbnails and spice it with some
nice effects.
59. References
• How To Create A Simple Image Gallery In Flash
CS4 http://tuts.flashmint.com/how-to-create-a-simple-
image-gallery-in-flash-cs4/
• Flash Tutorial: Create A Simple Image Gallery! -HD-
http://www.ilmugrafis.us/flash-tutorial-create-a-simple-
image-gallery-hd.html
• Flash Slideshow Image Gallery
http://layersmagazine.com/flash-slideshow-image-
gallery.html
60. Comments and Suggestions?
If you have questions or suggestions regarding
to this tutorial, please send me your email at
mendozalyndeorge@yahoo.com. Thank you!