Hey everyone, I'm a 3D Artist with a graphic design background in print. I'm looking to create UI's and HUD's for games to expand my skill set.
I'll explain what I have and what I know but if you just want to see the question i'm asking just scroll to the bottom.
The image below is a mockup i did in photoshop for a BF4 loadout screen. (just for fun, i'm not actually working on BF4)
[apparently i need to post 5 times before i can post an image WTF????]
I know how to create buttons and have them change colour when i hover over them and I know how to make a box move (lol so simple) with a motion tween.
What i'm looking to find are tutorials that explain these things:
1. I want to be able to make it so that when you hover the mouse over the weapons it highlights (stroke around box) and slides to the right a bit. Then when you click on the highlighted weapon slot, more weapons slide out sidways showing you other weapons to choose from. Then when you click on a new weapon (or the same weapon again) a few boxes drop DOWN this time to reveal weapon attachments.
2. For the squad selection area I want to have it so if you click on a tab (i will be adding little arrows pointing down) there will be a drop down list that shows the players in the squad. Then when you click on the join squad button the tab will do a few things. The tab will change colour and slide to the right, the join squad text will change to leave squad and the text will change to black. (I'm pretty sure I have the colour change figured out).
3. For the class selection bar on the top. I'd like to be able to click on the arrows and a new character image loads in. I think this would be a portfolio gallery button tutorial or something of the like.
4. For the spawn points on the right, i'd like it to basically do something similar to the tabs on the left. Once you click on a tab it moves to the right a bit.
What i'm struggling with is making the text move with the tabs and creating buttons that move other buttons out of the way to reveal more information.
Sorry for the long post but if someone can point me to some tutorials as I don't know the terms i'm searching for. Google results haven't turn up too much because of this.
I'll explain what I have and what I know but if you just want to see the question i'm asking just scroll to the bottom.
The image below is a mockup i did in photoshop for a BF4 loadout screen. (just for fun, i'm not actually working on BF4)
[apparently i need to post 5 times before i can post an image WTF????]
I know how to create buttons and have them change colour when i hover over them and I know how to make a box move (lol so simple) with a motion tween.
What i'm looking to find are tutorials that explain these things:
1. I want to be able to make it so that when you hover the mouse over the weapons it highlights (stroke around box) and slides to the right a bit. Then when you click on the highlighted weapon slot, more weapons slide out sidways showing you other weapons to choose from. Then when you click on a new weapon (or the same weapon again) a few boxes drop DOWN this time to reveal weapon attachments.
2. For the squad selection area I want to have it so if you click on a tab (i will be adding little arrows pointing down) there will be a drop down list that shows the players in the squad. Then when you click on the join squad button the tab will do a few things. The tab will change colour and slide to the right, the join squad text will change to leave squad and the text will change to black. (I'm pretty sure I have the colour change figured out).
3. For the class selection bar on the top. I'd like to be able to click on the arrows and a new character image loads in. I think this would be a portfolio gallery button tutorial or something of the like.
4. For the spawn points on the right, i'd like it to basically do something similar to the tabs on the left. Once you click on a tab it moves to the right a bit.
What i'm struggling with is making the text move with the tabs and creating buttons that move other buttons out of the way to reveal more information.
Sorry for the long post but if someone can point me to some tutorials as I don't know the terms i'm searching for. Google results haven't turn up too much because of this.